AI导哈

聊天SDK演示平台

BotDojo聊天SDK的交互式演示平台，提供实时调试和多种聊天模式示例。

  • by botdojo-ai
  • TypeScript
  • 本地部署
  • 7 星标
  • 更新于
在 GitHub 查看 botdojo-ai/chat-sdk-playground

使用说明

BotDojo聊天SDK游乐场

贝塔 -BotDojo聊天SDK的交互式游乐场

通过实时示例和实时调试探索聊天小部件、MCP应用程序和无头集成。

特性

  • 🚀 聊天SDK示例：内联、弹出、侧面板和无头聊天模式
  • 🎨 漂亮的UI：现代主题，三栏布局
  • 🐛 调试面板：所有SDK交互的实时事件记录
  • ⚡ 快捷操作：每个示例的预配置测试场景
  • 🔧 轻松设置：使用BotDojo CLI自动设置脚本

快速开始

先决条件

  1. Node.js 18+ 安装
  2. BotDojo命令行界面 安装：
    npm install -g @botdojo/cli
  3. BotDojo帐户 - 免费注册

安装

# Clone the repository
git clone https://github.com/botdojo-ai/chat-sdk-playground.git
cd chat-sdk-playground

# Install dependencies
npm install

设置

运行安装脚本以配置您的环境：

npm run setup

这将：

  • 使用BotDojo对您进行身份验证（打开浏览器并进行用户确认）
  • 使用当前的CLI项目上下文（从不自动切换）
  • 将测试代理流克隆到您的项目（或更新现有流）
  • 为新克隆的流创建公共API密钥
  • 生成 .env.local 所有配置

注： 安装脚本是幂等的，可以多次运行。它将：

  • 从源更新现有流，而不是创建重复流
  • 保留中的现有API密钥 .env.local
  • 仅为新克隆的流创建新的API密钥
  • 永远不要自动切换CLI项目上下文

启动开发服务器

npm run dev

打开 http://localhost:3500 在您的浏览器中。

例子

聊天SDK示例

示例 描述 关键模式 路径
入门指南 最小内联小部件示例 基本设置 /examples/chat-sdk/getting-started
聊天小部件模式 弹出窗口、侧面板、内联配置 小部件配置 /examples/chat-sdk/basic
无头聊天+MCP应用程序 使用SDK钩子构建自己的UI 自定义UI /examples/chat-sdk/headless-mcp
文档编辑器 代理使用MCP Apps差异卡编辑标记 notifyToolInputPartial，参考文献 /examples/chat-sdk/document-edit
产品增强 基于AI的产品描述增强 流媒体， onToolInputPartial, callTool，坚持 /examples/product-enhance
MCP应用程序练习 测试 ui/message, tools/call, ui/open-link MCP应用程序协议 /examples/chat-sdk/mcp-app-example
盆景店 带有结账流程的电子商务演示 完全集成 /examples/chat-sdk/bonsai-shop

展示的关键模式

这些示例包含解释重要模式的内联JSDoc注释：

  • 使用状态引用：工具执行函数通过引用捕获状态，以避免过时的闭包
  • resourceUri匹配：工具 _meta.ui.resourceUri 必须与资源完全匹配 uri
  • 使用onToolInputPart进行流式传输：在AI生成时接收部分工具参数
  • 使用tool.result检测完成情况：工具执行完成时的转换UI
  • 使用botdojo/presist保持状态：在页面重新加载时保存MCP应用程序状态
  • 使用callTool调用宿主工具：MCP应用程序可以触发主机上的操作
  • 尺寸报告：使用 reportSize 用于iframe中的动态内容

项目结构

chat-sdk-playground/
├── pages/                    # Next.js pages
│   ├── index.tsx             # Landing page
│   └── examples/             # Example pages
│       └── chat-sdk/         # Chat SDK examples
│
├── src/
│   ├── components/
│   │   └── layout/
│   │       ├── MainLayout.tsx      # Three-column layout
│   │       ├── ExampleNav.tsx      # Left navigation
│   │       └── DebugPanel.tsx      # Right debug panel
│   │
│   ├── lib/
│   │   └── eventBus.ts            # Centralized event logging
│   │
│   └── styles/
│       └── globals.css            # Global styles and theme
│
├── scripts/
│   └── setup.sh              # Automated setup script
│
├── .env.local               # Generated by setup script (gitignored)
└── package.json

布局

游乐场采用三列布局：

┌─────────────────────────────────────────────────────────────┐
│  [Example Nav]  │  [Main Content]  │  [Debug Panel]         │
│                 │                  │                        │
│  Examples:      │  Example Demo    │  Event Log:            │
│  • Chat Modes   │                  │  🟢 onNewToken         │
│  • Headless UI  │  [Component]     │  🔵 onStepUpdate       │
│  • MCP Apps     │                  │  🟡 toolCall           │
│                 │  Quick Actions:  │  🔴 error              │
└─────────────────────────────────────────────────────────────┘

调试面板

调试面板显示来自SDK交互的实时事件：

  • 事件类型：令牌、步骤、工具调用、错误、信息、MCP应用程序
  • 过滤器：打开/关闭事件类型
  • 自动滚动：自动滚动到最新事件
  • 出口：以JSON格式下载事件
  • 清除：清除所有事件

环境变量

安装脚本生成 .env.local 对于这些变量：

# User-specific configuration (keep private)
NEXT_PUBLIC_ACCOUNT_ID=<your-account-id>
NEXT_PUBLIC_PROJECT_ID=<your-project-id>

# Flow IDs (client-side)
NEXT_PUBLIC_BOTDOJO_BASIC_FLOW_ID=<your-flow-id>
NEXT_PUBLIC_BOTDOJO_MODEL_CONTEXT_FLOW_ID=<your-flow-id>

# Server-side API key for JWT token generation
# This key is NOT exposed to the browser - tokens are generated server-side
BOTDOJO_MODEL_CONTEXT_API=<your-api-key>

脚本

命令 描述
npm run setup 运行设置脚本（验证、克隆流、创建API密钥）
npm run dev 在端口3500上启动开发服务器
npm run build 为生产而建
npm run start 启动生产服务器
npm run lint 运行ESLint
npm run clean 删除构建工件和node_modules
npm run install:test-deps 安装可选的测试依赖项（Puppeteer）
npm run test 运行所有测试（需要运行开发服务器和测试deps）

测试

游乐场包括基于Puppeteer的浏览器测试：

# Prerequisites: 
# 1. Install test dependencies (Puppeteer is optional and not installed by default)
npm run install:test-deps

# 2. Dev server must be running
npm run dev  # In one terminal

# 3. Run tests
npm run test  # In another terminal

特殊URL参数：

  • ?newsession=true -强制执行新会话（对测试有用）

故障排除

环境变量未加载

Next.js只能读取 .env.local 在启动时。运行安装程序后：

# Restart the dev server
npm run dev

安装脚本失败

确保已安装BotDojo CLI：

npm install -g @botdojo/cli

连接错误

对于本地开发，更新 .env.local 使用本地服务器URL并重新启动开发服务器。

端口3500已在使用中

更改端口 package.json:

"dev": "next dev -p 3600",
"start": "next start -p 3600"

部署

维塞尔

游乐场被配置为在部署过程中跳过可选依赖项（如Puppeteer），通过 vercel.json:

{
  "installCommand": "npm install --no-optional"
}

这使构建时间保持快速，并避免了生产中不必要的依赖关系。

技术栈

  • Next.js 13+ -React框架
  • TypeScript -类型安全
  • @botdojo/聊天sdk -聊天小部件和无头钩子
  • @botdojo/sdk -用于流执行的核心SDK
  • mcp应用程序视图 -MCP应用程序渲染
  • 顺风CSS -造型

贡献

想添加一个新示例吗？

  1. 在中创建新页面 pages/examples/chat-sdk/
  2. 将路线添加到 EXAMPLES 在 src/components/layout/ExampleNav.tsx
  3. 使用事件总线记录事件： eventBus.logInfo(), eventBus.logToken()等等。
  4. 包括常见测试场景的快速操作按钮

链接

许可证

MIT© BotDojo

相关 MCP