Plain HTML example

A complete static page with connect/disconnect controls, function registration, context updates, and a logs panel. Mirrors the example/index.html shipped with the source.
html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Autopilot Client Example</title>
    <style>
      body { font-family: system-ui, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
      #logs { background: #1e1e1e; color: #d4d4d4; padding: 15px; border-radius: 4px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 12px; }
      .log-entry.error { color: #f48771; }
      .log-entry.event { color: #dcdcaa; }
      button { margin-right: 8px; }
    </style>
  </head>
  <body>
    <h1>Autopilot Client Example</h1>

    <label>
      Conversation URL:
      <input id="url" style="width: 100%;" />
    </label>

    <div style="margin: 16px 0;">
      <button id="connect">Connect</button>
      <button id="disconnect" disabled>Disconnect</button>
      <button id="toggle" disabled>Show bar</button>
    </div>

    <div style="margin: 16px 0;">
      <button id="register" disabled>Register sample function</button>
      <button id="ctx" disabled>Update context</button>
      <button id="send" disabled>Send message</button>
    </div>

    <p>Status: <strong id="status">disconnected</strong></p>
    <h3>Logs</h3>
    <div id="logs"></div>

    <script src="https://docs.llmor.com/autopilot-client/pkg/cdn/autopilot-core.standalone.min.js"></script>
    <script src="https://docs.llmor.com/autopilot-client/pkg/cdn/autopilot-bar.standalone.min.js"></script>
    <script>
      const client = AutopilotClient.useAutopilotClient();
      const $ = (id) => document.getElementById(id);
      const logsEl = $('logs');

      function log(msg, type = 'info') {
        const el = document.createElement('div');
        el.className = `log-entry ${type}`;
        el.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
        logsEl.appendChild(el);
        logsEl.scrollTop = logsEl.scrollHeight;
      }

      let bar = null;

      client.on('status', (s) => {
        $('status').textContent = s;
        const connected = s === 'connected';
        $('connect').disabled = connected;
        ['disconnect', 'toggle', 'register', 'ctx', 'send'].forEach((id) => {
          $(id).disabled = !connected;
        });
      });

      client.on('messageAdded', ({ message }) =>
        log(`message: ${message.role} — ${message.message.slice(0, 60)}`, 'event'),
      );
      client.on('completionStream', ({ chunk }) => log(`chunk: ${chunk}`));
      client.on('functionRegistered', (fn) => log(`function registered: ${fn.name}`, 'event'));
      client.on('contextUpdated', ({ context }) => log(`context: ${JSON.stringify(context)}`));
      client.on('error', ({ context, error }) => log(`error (${context}): ${error.message}`, 'error'));

      $('connect').onclick = () => client.connect({ conversationUrl: $('url').value.trim() });
      $('disconnect').onclick = () => { client.disconnect(); bar?.destroy(); bar = null; };
      $('toggle').onclick = () => {
        if (bar) { bar.destroy(); bar = null; $('toggle').textContent = 'Show bar'; }
        else { bar = AutopilotBar.enableAutopilotBar(client); $('toggle').textContent = 'Hide bar'; }
      };
      $('register').onclick = () => {
        client.registerFunction({
          name: 'greet',
          description: 'Greets the user with a custom message',
          parameters: {
            type: 'object',
            properties: { name: { type: 'string' } },
            required: ['name'],
          },
          handler: async ({ name }) => `Hello, ${name}!`,
        });
      };
      $('ctx').onclick = () => client.updateContext({ page: location.pathname, ts: Date.now() });
      $('send').onclick = () => {
        const m = prompt('Message:');
        if (m) client.engageAutopilot(m);
      };
    </script>
  </body>
</html>
Plain HTML example ​

Plain HTML example
