Skip to main content
This tutorial walks through a production-ready Char embed setup using a publishable key.
Prefer automation? See Get Started with Claude Code.

​
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

​
Step 2: Import the component

import "@mcp-b/char/web-component";

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

<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(): 
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,
});
publishableKey is required. idToken is optional.

​
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

Embedding Guide

Full auth and integration patterns

Identity Providers

Configure ID token validation

Framework Guides

React, Vue, Angular, and more

Custom Styling

Match the agent to your product