Skip to main content
This tutorial walks you through setting up Char by hand. You’ll install the package, embed the agent, and verify it works.
Learn by doing? Try our interactive tutorial to build with Char in your browser.
Prefer automation? See Get Started with Claude Code for a two-command setup.

​
What you’ll build

By the end of this tutorial, you’ll have:
  • The Char agent embedded in your web application
  • The agent running in development mode on localhost

​
Prerequisites

  • A web application (React, Vue, Next.js, or any HTML project)
  • npm, yarn, or pnpm
  • Your app running on localhost

​
Step 1: Install the package

​
Step 2: Import the web component

In your application’s entry point, import the web component: 
import "@mcp-b/char/web-component";
For React/Next.js, this typically goes in App.tsx or layout.tsx. For Vue, in main.ts. For plain HTML, use a script tag instead (see Step 3).

​
Step 3: Add the agent to your page

Add the custom element where you want the agent to appear: 
<char-agent dev-mode='{"anthropicApiKey":"YOUR_ANTHROPIC_API_KEY"}' />
For plain HTML without a bundler: 
<script src="https://unpkg.com/@mcp-b/char/dist/web-component-standalone.iife.js" defer></script>
<char-agent dev-mode='{"anthropicApiKey":"YOUR_ANTHROPIC_API_KEY"}'></char-agent>
dev-mode with API key only works on localhost. For production, configure SSO and use the connect() API with an ID token (and client ID). See Identity Providers.

​
Step 4: Verify

  1. Start your development server
  2. Open your app in the browser
  3. You should see a chat bubble in the bottom-right corner
  4. Click it and send a message
If you see the agent and can chat, you’re done with the basics.

​
What you have now

  • The agent is embedded and functional on localhost
  • Users can chat with the agent
  • The agent can see the page but can’t interact with it yet

​
What’s missing

To make the agent useful, you’ll need:
  1. WebMCP tools — Let the agent fill forms, click buttons, read data
  2. Production authentication — Configure SSO for deployment
  3. Styling — Match the agent to your app’s theme

​
Next steps

Add WebMCP Tools

Let the agent interact with your UI

Configure SSO

Set up authentication for production

Custom Styling

Theme the agent to match your app

Framework Examples

React, Vue, Next.js integration patterns