AI导哈

聊天UI工具

一个基于React和Tailwind的演示项目，连接MCP服务器和Jan AI模型，提供支持工具调用的交互式聊天界面。

  • by crazilazi
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 crazilazi/mcp-nano-pilot

使用说明

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 --项目元数据和依赖关系。

快速启动

  1. 安装依赖项
npm install
  1. 设置环境变量（可选）
  • 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)
  1. 运行开发服务器
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。

许可证

用于演示目的的开源。

相关 MCP