Custom Trigger

Control when the agent opens using React state.

The open Prop

The <Char> component accepts an open prop to control visibility:

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


function App() {
  const [isOpen, setIsOpen] = useState(false);


  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        Chat with AI
      </button>
      <Char
        open={isOpen}
        onOpenChange={setIsOpen}
        devMode={{ anthropicApiKey: "demo" }}
      />
    </>
  );
}

Props Explained

PropTypeDescription
openbooleanControls whether the chat is open
onOpenChange(open: boolean) => voidCalled when open state changes

Hiding the Default Trigger

To hide the floating bubble entirely:

<Char
  open={isOpen}
  onOpenChange={setIsOpen}
  trigger={false}
  devMode={{ anthropicApiKey: "demo" }}
/>

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