Getting Started

You can clone this playground website to experiment locally, or install the Chat SDK directly into your own app.

🚀 Quick Start: Clone and Run Locally

The quickest way to experiment is to clone this playground website and run it on your computer. This gives you a local copy with all examples ready to explore:

$npm install -g @botdojo/cli && botdojo playground

This will install the BotDojo CLI and start the playground with all examples configured. Perfect for experimenting before integrating into your own app.

Install in Your Own App

To integrate the Chat SDK into your own application, follow these steps to install the package, clone a sample agent, and create an API key.

1. Install the SDK

Add the Chat SDK package to embed the widget in your app.

📄Install the Chat SDKbash

1npm install @botdojo/chat-sdk

2. Clone a test agent and create an API key

Use the BotDojo CLI to pull a sample agent and generate a key you can drop into the widget.

Install the CLI: Use the BotDojo CLI to authenticate, manage projects, and create API keys (it will prompt you to sign in or create an account).

📄Install the CLIbash

1npm install -g @botdojo/cli

Clone a test agent: Pull an agent that supports Frontend MCP so you can use frontend tools.

📄Clone a test agentbash

1botdojo cloneToProject botdojo.com/botdojo/sdk-test-flows/390baa60-c95e-11f0-978d-47bef2a9ac47 --name "SDK - Model Context Flow"

Create a public API key: Generate an API key for the sample flow to power the chat widget.

📄Create a public API keybash

1botdojo flow api_key create {Flow id} --name "SDK Playground Public API Key"

Example Code

Here's an example showing how to embed a BotDojo chat widget with a Frontend MCP that provides browser information:

📄BrowserInfoChat.tsxtsx

1import { useMemo } from 'react';
2import { BotDojoChat, type ModelContext } from '@botdojo/chat-sdk';
3
4
5export default function BrowserInfoChat() {
6  // Define a ModelContext (Frontend MCP) with a tool to get browser info
7  const modelContext: ModelContext = useMemo(() => ({
8    name: 'browser_info',
9    description: 'Frontend MCP that provides browser information',
10    toolPrefix: 'browser',
11    uri: 'browser://context',
12    tools: [
13      {
14        name: 'get_browser_info',
15        description: 'Get information about the user\'s browser',
16        inputSchema: {
17          type: 'object',
18          properties: {
19            go: { type: 'boolean', description: 'Pass true to get browser info' },
20          },
21        },
22        execute: async () => {
23          const userAgent = window.navigator.userAgent;
24          const platform = window.navigator.platform;
25          
26          // Parse browser name from userAgent
27          let browserName = 'Unknown';
28          if (userAgent.includes('Firefox')) browserName = 'Firefox';
29          else if (userAgent.includes('Edg')) browserName = 'Microsoft Edge';
30          else if (userAgent.includes('Chrome')) browserName = 'Chrome';
31          else if (userAgent.includes('Safari')) browserName = 'Safari';
32          
33          return {
34            browser: browserName,
35            platform: platform,
36            userAgent: userAgent,
37          };
38        },
39      },
40    ],
41    
42    resources: [],
43    prompts: [],
44  }), []);
45
46  return (
47    <BotDojoChat
48      apiKey="your-api-key-here"
49      mode="inline"
50      autoFocus={false}
51      theme="light"
52      accentColor="#6366f1"
53      modelContext={modelContext}
54      welcomeMessage={`## Welcome!
55
56What kind of browser do I have?
57
58<promptbutton label="🌐 Check My Browser" body='{"text_input": "What kind of browser am I using?"}'></promptbutton>
59`}
60    />
61  );
62}
63

Try It Out

Missing API key

Run pnpm setup-playground or set BOTDOJO_MODEL_CONTEXT_API to try the chat.

Next Steps

Explore more examples to learn about headless chat integration and Frontend MCP tools.

Headless Chat →Frontend MCP →