Embed the Agent

Now let’s add the agent to your app using the web component.

Step 1: Import the web component

Add this import at the top of your app.ts:

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

This registers the <char-agent> custom element.

Step 2: Add the element

Add the <char-agent> element to your HTML with dev-mode:

app.innerHTML = `
  <div class="container">
    <h1>My App</h1>
    <p>Welcome to the tutorial!</p>
  </div>
  <char-agent dev-mode='{"anthropicApiKey":"demo"}'></char-agent>
`;

Step 3: Verify

Look at the preview—you should see a chat bubble in the bottom-right corner.

Your code should look like:

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

const app = document.querySelector<HTMLDivElement>('#app')!;

app.innerHTML = `
  <div class="container">
    <h1>My App</h1>
    <p>Welcome to the tutorial!</p>
  </div>
  <char-agent dev-mode='{"anthropicApiKey":"demo"}'></char-agent>
`;

Install the Packages

First Conversation

Files

Preparing Environment

npm install
npm run dev