Embed in plain HTML
The fastest way to drop the autopilot into an existing static site or a server-rendered page.
Minimum viable embed
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My page</title>
</head>
<body>
<h1>My page</h1>
<p>Open the chat from the floating button at the bottom right.</p>
<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();
client.connect({
conversationUrl: 'https://llmor.example.com/v1/conversations/<token>',
});
AutopilotBar.enableAutopilotBar(client);
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
That's the whole integration. The two scripts load synchronously, the singleton client gets created on first access, and the bar mounts itself.
Globals exposed
| Bundle | Global |
|---|---|
autopilot-core.standalone.min.js | window.AutopilotClient — exposes useAutopilotClient, setAutopilotClient, the AutopilotClient class, and all types. |
autopilot-bar.standalone.min.js | window.AutopilotBar — exposes enableAutopilotBar. |
Hosting the bundles yourself
After npm run build, copy these files from dist/ to your web server or CDN:
autopilot-core.standalone.min.jsautopilot-bar.standalone.min.js
Both are self-contained — they have no external CSS or asset references. The bar's Tailwind output and SVG icons are inlined in the JS.
Registering functions from the page
html
<script>
const client = AutopilotClient.useAutopilotClient();
client.registerFunction({
name: 'go_to_section',
description: 'Scrolls to a named section on the current page.',
parameters: {
type: 'object',
properties: { id: { type: 'string' } },
required: ['id'],
},
handler: ({ id }) => {
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
return { ok: true };
},
});
client.connect({ conversationUrl: '…' });
AutopilotBar.enableAutopilotBar(client);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Updating context from page interactions
html
<script>
const client = AutopilotClient.useAutopilotClient();
client.updateContext({ page: location.pathname });
// Keep it in sync if you use the History API
window.addEventListener('popstate', () => {
client.updateContext({ page: location.pathname });
});
</script>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
A full working example
The repo ships example/index.html which exercises every public API — connect button, disconnect, register function, update context, send message — all wired to a logs panel. Use it as a reference; the relevant pieces are also reproduced on the Plain HTML example page.