Quickstart: Web SDK

Send your first AI message in 5 minutes.

Step 1 — Install the Web SDK

pnpm add @arlopass/web-sdk

Step 2 — Create a client

The client needs a transport — the bridge to the browser extension. The extension injects it at window.arlopass.

import { ArlopassClient } from "@arlopass/web-sdk";

const client = new ArlopassClient({
  transport: window.arlopass,
});

Step 3 — Connect to the extension

Call connect() with your app ID. This handshakes with the extension and verifies the user has it installed.

await client.connect({ appId: "my-app" });
console.log("Connected to Arlopass extension");

Step 4 — Select a provider

List the providers the user has configured, then select one. The extension handles all credential management.

const providers = await client.listProviders();
console.log("Available providers:", providers);

// Select the first available provider
await client.selectProvider(providers[0].id);

Step 5 — Send a message

Send a chat completion request. The response comes back from whatever model the user chose.

const response = await client.chat.send({
  messages: [
    { role: "system", content: "You are a helpful assistant." },
    { role: "user", content: "Hello! What can you do?" },
  ],
});

console.log(response.content);

Complete example

Here’s everything together in a single file you can run:

import { ArlopassClient } from "@arlopass/web-sdk";

async function main() {
  // 1. Create the client
  const client = new ArlopassClient({
    transport: window.arlopass,
  });

// 2. Connect to the extension
  await client.connect({ appId: "my-app" });

// 3. Pick a provider
  const providers = await client.listProviders();
  await client.selectProvider(providers[0].id);

// 4. Send a message
  const response = await client.chat.send({
    messages: [
      { role: "system", content: "You are a helpful assistant." },
      { role: "user", content: "Explain Arlopass in one sentence." },
    ],
  });

console.log(response.content);
}

main();