# Quickstart: Web SDK

Send your first AI message in 5 minutes.

### Step 1 — Install the Web SDK

```bash title="Terminal"
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`.

```typescript title="client.ts"
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.

```typescript title="client.ts"
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.

```typescript title="client.ts"
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.

```typescript title="client.ts"
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:

```typescript title="main.ts"
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();
```