MCP纳米飞行员
一个连接到MCP(模型上下文协议)服务器和Jan AI模型的小型React+Tailwind演示,展示了一个具有工具调用支持的交互式聊天UI。
此回购包含什么
src/components/McpNanoPilotChatbot.tsx--主聊天UI组件(重命名自EnterpriseChatbot).src/services/mcpClient.ts--MCP客户端包装器,通过SSE连接并调用工具。src/store-Redux对消息、工具和API调用进行切片和存储连接。public/index.html--应用程序入口HTML。package.json/package-lock.json--项目元数据和依赖关系。
快速启动
- 安装依赖项
npm install- 设置环境变量(可选)
REACT_APP_MCP_BASE_URL--MCP SSE端点(默认值:http://localhost:5000/mcp/sse)REACT_APP_MCP_BEARER_TOKEN-MCP SSE+API请求的承载令牌REACT_APP_JAN_MODEL--调用Jan时使用的模型(默认值:llama3.2)
- 运行开发服务器
npm start打开 http://localhost:3000 在您的浏览器中。
备注
- UI使用Tailwind CSS,并且有意简单,因此您可以插入自己的MCP服务器和工具。
- MCP客户端设置
name到mcp-nano-pilot当向MCP服务器注册客户端时。 - 主UI组件已重命名为
McpNanoPilotChatbot以匹配存储库品牌。
主题(MCP纳米试点)
- 添加了黑暗主题的霓虹灯以匹配
MCP-NANO-PILOT品牌。 - 主题标记和CSS变量位于
tailwind.config.js和src/index.css:
- --nano-cyan, --nano-indigo, --pilot-pink, --muted
- 要调整颜色,请编辑
tailwind.config.js以及CSS变量src/index.css.
贡献
在中进行编辑 src/components 或 src/services。如果您更改了环境变量名称,请相应地更新此README。
许可证
用于演示目的的开源。
