AI导哈

AI聊天机器人交互界面应用

MCP Apps是Model Context Protocol的扩展，允许MCP服务器返回丰富的交互式用户界面，包括仪表盘、数据可视化、表单和实时监控等功能。

  • by 23blocks-OS
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 23blocks-OS/ai-agents-apps

使用说明

23块MCP应用程序

使用MCP Apps SDK的AI聊天机器人交互式UI应用程序。

什么是MCP应用程序？

MCP Apps是模型上下文协议的扩展，允许MCP服务器在返回工具结果的同时返回丰富的交互式用户界面。您的AI助手可以显示以下内容，而不仅仅是文本响应：

  • 交互式仪表板
  • 数据可视化
  • 表单和向导
  • 实时监视器
  • 还有更多。..

可用应用程序

应用程序 描述 状态
forms-app 表单管理仪表板、调查生成器、分析 已计划
content-app 内容管理、后期编辑、系列组织者 已计划
files-app 文件浏览器、上传管理器、访问控制仪表板 已计划
jarvis-app AI代理管理、对话查看器 已计划

入门指南

先决条件

  • Node.js>=18.0.0
  • pnpm>=8.0.0
  • 23块API证书

安装

# Clone the repo
git clone https://github.com/23blocks-OS/ai-agents-apps.git
cd ai-agents-apps

# Install dependencies
pnpm install

# Set environment variables
export BLOCKS_API_URL="https://api.23blocks.com"
export BLOCKS_API_KEY="your-app-id"
export BLOCKS_AUTH_TOKEN="your-bearer-token"

# Run development server
pnpm dev

环境变量

变量 描述
BLOCKS_API_URL 23块API基本URL
BLOCKS_API_KEY 您的应用程序ID（AppId标头）
BLOCKS_AUTH_TOKEN 用于身份验证的承载令牌

项目结构

ai-agents-apps/
├── apps/                    # MCP App applications
│   ├── forms-app/          # Forms Block dashboard
│   ├── content-app/        # Content Block dashboard
│   ├── files-app/          # Files Block dashboard
│   └── jarvis-app/         # Jarvis Block dashboard
├── packages/               # Shared packages
│   ├── shared-ui/          # Common UI components
│   ├── api-client/         # 23blocks API client
│   └── mcp-utils/          # MCP Apps utilities
├── examples/               # Example apps
│   └── minimal-app/        # Minimal MCP App example
└── docs/                   # Documentation

创建MCP应用程序

每个应用程序包括：

  1. MCP 服务器 -注册工具并提供UI资源
  2. UI应用程序 -带有交互式组件的React应用程序

看 docs/creating-aps.md 详细指南。

贡献

  1. 分叉回购
  2. 创建特征分支(feat/my-feature)
  3. 进行更改
  4. 提交PR

许可证

麻省理工学院-参见 许可证 了解详情。

相关

相关 MCP