Embed the Agent

Now let’s add the Char component to your React app.

Step 1: Import the component

Add this import at the top of your App.tsx:

import { Char } from '@mcp-b/char';

Step 2: Add the component

Add <Char> with devMode for local development:

<Char devMode={{ anthropicApiKey: "demo" }} />

Step 3: Verify

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

Your code should look like:

import { Char } from '@mcp-b/char';

export default function App() {
  return (
    <div className="app">
      <h1>My App</h1>
      <p>Welcome to the tutorial!</p>
      <Char devMode={{ anthropicApiKey: "demo" }} />
    </div>
  );
}