Custom Trigger

Control when the agent opens using JavaScript.

The open Property

The <char-agent> element has an open property you can set:

import '@mcp-b/char/web-component';
import type { WebMCPAgentElement } from '@mcp-b/char/web-component';


const agent = document.querySelector<WebMCPAgentElement>('char-agent')!;


// Open the agent
agent.open = true;


// Close the agent
agent.open = false;

Example: Button Trigger

import '@mcp-b/char/web-component';
import type { WebMCPAgentElement } from '@mcp-b/char/web-component';


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


app.innerHTML = `
  <div class="container">
    <h1>My App</h1>
    <button id="chat-btn">Chat with AI</button>
  </div>
  <char-agent dev-mode='{"anthropicApiKey":"demo"}'></char-agent>
`;


const agent = document.querySelector<WebMCPAgentElement>('char-agent')!;
const button = document.querySelector('#chat-btn')!;


button.addEventListener('click', () => {
  agent.open = true;
});

Hiding the Default Trigger

To hide the floating bubble, add trigger="false":

<char-agent trigger="false" dev-mode='{"anthropicApiKey":"demo"}'></char-agent>

Try it

Add a custom “Chat with AI” button. When clicked, it should open the agent.

First Conversation
CSS Variables
Powered by WebContainers
Files
Preparing Environment
  • npm install
  • npm run dev