使用说明
MCP平台
通过ChatGPT中丰富、可操作的UI卡，将任何人类在循环中的工作流程转化为人工智能驱动的体验。
MCP平台是用于构建和管理MCP（模型上下文协议）应用程序的SaaS解决方案。它使企业能够在人工智能聊天界面中直接展示需要人类判断的决策——使用漂亮的交互式UI组件，而不是文本墙。
问题
像ChatGPT这样的人工智能助手功能强大，但它们在需要人工批准的工作流程中遇到了困难：
- 合同审批成为令人困惑的文本摘要
- IT票证以纯文本显示时会丢失关键上下文
- 任何需要丰富信息的决策都会成为用户体验的噩梦
解决方案
MCP平台允许您：
- 定义工具 从您的系统中获取数据
- 设计UI组件 呈现丰富的交互式卡片
- 连接到ChatGPT 通过MCP协议
- 赋予用户权力 在充分的背景下做出决定
演示用例
法律运营-合同管理
- 查看具有优先级、价值和状态的待处理合同
- 查看合同详细信息，包括关键条款和风险评估
- 直接从聊天界面批准合同
IT帮助台-票务管理
- 按优先级和类别查看开放支持票
- 查看门票详情和对话历史记录
- 更新状态、分配工单和解决问题
建筑
┌─────────────────────────────────────────────────────────────────┐
│ ChatGPT │
│ (or any MCP client) │
└─────────────────────────────────────────────────────────────────┘
│
│ MCP Protocol (SSE)
▼
┌─────────────────────────────────────────────────────────────────┐
│ MCP Server │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Tools │ │ UI │ │ Data │ │
│ │ Registry │ │ Templates │ │ Sources │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────┘
▲
│ Admin API
│
┌─────────────────────────────────────────────────────────────────┐
│ Admin Dashboard │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Server │ │ Tool │ │ UI │ │
│ │ Config │ │ Editor │ │ Builder │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
└─────────────────────────────────────────────────────────────────┘
项目结构
mcp-platform/
├── packages/
│ └── shared/ # Shared types, schemas, utilities
│ └── src/
│ ├── schemas/ # Zod schemas for validation
│ ├── types/ # TypeScript type definitions
│ └── demo-data/ # Sample data for demos
├── apps/
│ ├── server/ # MCP Server (Node.js)
│ │ └── src/
│ │ ├── mcp-server.ts # MCP protocol implementation
│ │ ├── config-manager.ts # Runtime configuration
│ │ └── data-sources/ # Data source adapters
│ └── web/ # Admin Dashboard (Next.js)
│ └── src/
│ ├── app/ # Next.js app router pages
│ ├── components/ # React components
│ └── lib/ # Utilities and API layer
└── docs/ # Documentation
入门指南
先决条件
- Node.js 18+
- npm 9+
安装
# Clone the repository
git clone <repository-url>
cd mcp-platform
# Install dependencies
npm install
# Build all packages
npm run build
发展
# Run all development servers
npm run dev
# Or run individually:
npm run dev --workspace=@mcp-platform/server # MCP Server on :8787
npm run dev --workspace=@mcp-platform/web # Dashboard on :3000
测试演示
- 启动开发服务器：
npm run dev - 打开仪表板：http://localhost:3000
- 导航到服务器的测试线束：
/servers/legal-ops-server/test - 试试：“给我看待处理的合同”或“分配给我的票是什么？”
连接到ChatGPT
使用ngrok（用于当地发展）
- 安装ngrok：https://ngrok.com/download
- 启动MCP服务器：
npm run dev --workspace=@mcp-platform/server - 暴露它：
ngrok http 8787 - 复制公共URL（例如。，
https://abc123.ngrok.io)
ChatGPT配置
- 在ChatGPT中，添加MCP连接器
- 使用您的ngrok URL作为服务器端点
- MCP服务器将公开其工具和UI模板
- 开始与您的AI工作流程聊天！
创建新用例
1.定义您的数据模型
在中创建类型 packages/shared/src/demo-data/your-use-case/:
// data-sources.ts
export interface YourItem {
id: string;
title: string;
status: string;
// ... your fields
}
export const yourItems: YourItem[] = [/* sample data */];
2.创建工具
在中定义工具 tools.ts:
export const yourTools: Tool[] = [
{
id: "get_your_items",
name: "Get Your Items",
description: "Retrieves items from the system",
inputSchema: { /* JSON Schema */ },
uiComponentId: "your-item-list",
// ... configuration
}
];
3.设计UI组件
在中创建UI组件定义 ui-components.ts:
export const yourUIComponents: UIComponent[] = [
{
id: "your-item-list",
name: "Item List Card",
templateType: "list-view",
fieldMappings: [/* map data to display */],
actionButtons: [/* user actions */],
// ... styling
}
];
4.注册服务器
添加服务器配置并从共享包索引导出。
环境变量
MCP服务器（应用程序/服务器）
PORT=8787 # Server port
NODE_ENV=development # Environment
CONFIG_PATH=./config # Configuration directory
管理员仪表板（应用程序/网络）
NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:8787 # MCP server URL
部署
MCP服务器
部署到任何Node.js主机：
- 铁路：连接仓库，设置
apps/server作为根 - 渲染：创建Web服务，生成命令：
npm run build - Fly.io：使用附带的Dockerfile（如果已添加）
管理员仪表板
部署到Vercel：
vercel --cwd apps/web
或任何兼容Next.js的平台。
故障排除
“无法连接到MCP服务器”
- 确保服务器正在运行：
npm run dev --workspace=@mcp-platform/server - 检查运行状况端点：
curl http://localhost:8787/health - 如果使用ngrok，请验证隧道是否处于活动状态
“工具未出现在ChatGPT中”
- 验证仪表板中是否启用了工具
- 检查MCP服务器日志是否有错误
- 重新加载配置：
POST /admin/reload
“UI组件未呈现”
- 确保UI组件链接到工具
- 检查字段映射是否与工具的输出模式匹配
- 在UI构建器中预览组件
贡献
- 复刻仓库
- 创建要素分支
- 进行更改
- 提交拉取请求
许可证
[您的许可证在这里]
