> ## Documentation Index
> Fetch the complete documentation index at: https://docs.usechar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Get Started Manually

> Install and embed the Char agent using publishable-key authentication

This tutorial walks through a production-ready Char embed setup using a publishable key.

<Note>
  **Prefer automation?** See [Get Started with Claude Code](/guides/claude-code-setup).
</Note>

## What you'll build

By the end, you'll have:

* A working `<char-agent>` embed
* Org-scoped authentication via a publishable key
* Optional per-user identity with `idToken`

## Prerequisites

* A Char account and organization
* A publishable key from **Dashboard → Settings → Publishable Keys**
* A web app (or static HTML page)

## Step 1: Install

<Snippet file="install-agent.mdx" />

## Step 2: Import the component

```ts theme={null}
import "@mcp-b/char/web-component";
```

## Step 3: Add `<char-agent>` with your publishable key

```html theme={null}
<char-agent publishable-key="pk_live_..." />
```

This is enough to run the agent in key-only mode.

## Step 4: Add per-user identity (optional)

If your users already authenticate with an IDP, pass their ID token with `connect()`:

```ts theme={null}
import type { CharAgentElement } from "@mcp-b/char/web-component";

const agent = document.querySelector("char-agent") as CharAgentElement;
const idToken = await getIdTokenForCurrentUser();

agent.connect({
  publishableKey: "pk_live_...",
  idToken,
});
```

<Info>
  `publishableKey` is required. `idToken` is optional.
</Info>

## Step 5: Verify

1. Start your app
2. Open the page with `<char-agent>`
3. Open the agent and send a message

If you can chat, the embed is working.

## Next steps

<CardGroup cols={2}>
  <Card title="Embedding Guide" icon="code" href="/guides/embedding-agent">
    Full auth and integration patterns
  </Card>

  <Card title="Identity Providers" icon="shield" href="/identity-providers/index">
    Configure ID token validation
  </Card>
</CardGroup>

<CardGroup cols={2}>
  <Card title="Framework Guides" icon="layers" href="/guides/frameworks/index">
    React, Vue, Angular, and more
  </Card>

  <Card title="Custom Styling" icon="palette" href="/guides/custom-styling">
    Match the agent to your product
  </Card>
</CardGroup>

<Snippet file="support-cta.mdx" />