Box MCP客户端反应
一个基于React的客户端应用程序，用于通过模型上下文协议（MCP）与Box交互。此应用程序提供了一个聊天界面，用于与Box MCP服务器通信并访问Box内容和工具。
特性
- Box OAuth身份验证：使用OAuth 2.0使用Box进行安全登录
- MCP集成：连接到Box MCP服务器以访问Box工具和资源
- 聊天界面：与MCP服务器通信的交互式聊天UI
- 工具执行：直接从聊天界面执行Box MCP工具
- 发展模式：未配置MCP服务器时的模拟响应
- 现代用户界面：采用风格化组件和TypeScript的响应式设计
- 错误处理：全面的错误边界和用户友好的消息
建筑
React App → MCP Client → Box MCP Server该应用程序遵循分层架构：
- 表示层：带有样式化组件的React组件
- 服务层：身份验证和MCP客户端服务
- 集成层：Box API和MCP协议处理程序
技术栈
- 前端：React 19与TypeScript
- 生成工具：快
- 样式：带有主题提供程序的样式化组件
- MCP-SDK:
@modelcontextprotocol/sdk（官方TypeScript SDK） - 认证：OAuth 2.0与Box
- 发展：热重新加载和快速刷新
快速开始
先决条件
- Node.js 18或更高版本
- npm或yarn包管理器
- Box开发者帐户
- 已部署的Box MCP服务器（开发时可选）
安装
- 克隆和安装依赖关系：
git clone
cd box-mcp-client-react
npm install- 设置环境变量：
cp .env.example .env编辑 .env 根据您的配置：
# Required: Box OAuth credentials
VITE_BOX_CLIENT_ID=your_box_client_id_here
VITE_BOX_CLIENT_SECRET=your_box_client_secret_here
VITE_BOX_REDIRECT_URI=http://localhost:3000/auth/callback
# Optional: Box MCP Server URL
VITE_BOX_MCP_SERVER_URL=https://your-box-mcp-server.example.com
# OpenAI API Configuration
VITE_OPENAI_API_KEY=your_openai_key
# Optional: Debug mode
VITE_DEBUG=false- 运行开发服务器：
npm run dev- 打开浏览器：
引导到 http://localhost:3000
Box开发人员设置
- 创建Box应用程序：
- 首选 Box开发人员控制台 - 使用OAuth 2.0（用户身份验证）创建新的自定义应用程序 - 记下您的客户端ID和客户端密码
- 配置OAuth：
- 将重定向URI设置为： http://localhost:3000/auth/callback - 启用所需范围（通常为“读取所有文件和文件夹”）
- 更新环境：
- 将您的客户ID和密码添加到 .env
MCP服务器集成
此客户端与实现模型上下文协议的Box MCP服务器一起工作。
使用真正的MCP服务器
- 部署Box MCP服务器（请参阅 MCP服务器)
- 集
VITE_BOX_MCP_SERVER_URL在你的.env文件 - 该应用程序将连接并显示可用工具
发展模式
如果没有配置MCP服务器URL，则应用程序将以开发模式运行，并显示模拟响应。这使您能够：
- 测试身份验证流程
- 探索聊天界面
- 开发UI组件
用法
- 身份验证：
- 点击“使用Box登录”进行身份验证 - 在弹出/重定向中完成OAuth流程
- 聊天界面：
- 通过身份验证后，使用聊天界面 - 发送消息以与MCP服务器交互 - 查看可用的工具和资源
- 工具命令：
- 使用 !tool [parameters] 执行MCP工具 - 例子： !tool list_files path=/
项目结构
src/
├── components/
│ ├── Auth/ # Authentication components
│ │ ├── LoginButton.tsx
│ │ └── AuthCallback.tsx
│ ├── Chat/ # Chat interface components
│ │ ├── ChatContainer.tsx
│ │ ├── ChatHeader.tsx
│ │ ├── MessageList.tsx
│ │ ├── MessageBubble.tsx
│ │ ├── MessageInput.tsx
│ │ └── TypingIndicator.tsx
│ └── Common/ # Shared components
│ ├── ThemeProvider.tsx
│ ├── GlobalStyles.tsx
│ └── ErrorBoundary.tsx
├── services/
│ ├── authService.ts # Box OAuth handling
│ └── mcpClient.ts # MCP client implementation
├── hooks/
│ └── useAuth.ts # Authentication hook
├── types/
│ ├── auth.ts # Authentication types
│ ├── chat.ts # Chat message types
│ └── mcp.ts # MCP protocol types
├── styles/
│ └── theme.ts # Theme configuration
├── utils/
│ └── crypto.ts # Token encryption utilities
├── App.tsx # Main application component
└── index.tsx # Application entry point可用脚本
npm run dev-在端口3000上启动开发服务器npm run build-为生产而建npm run preview-预览生产构建npm test-运行测试（尚未配置）
安全功能
- 令牌加密：访问令牌在存储前已加密
- 仅限HTTPS：所有通信都使用HTTPS
- PKCE流程：OAuth 2.1，带有用于代码交换的证明密钥
- 安全标头：所有MCP请求的适当授权标头
- 误差边界：防止应用程序崩溃传播
MCP协议实现
应用程序实现了模型上下文协议规范：
- 认证：对每个请求进行承载令牌身份验证
- 会话管理：正确的会话创建和清理
- 运输：带有会话ID标头的流式HTTP
- 错误处理：全面的MCP错误响应处理
- 工具调用：支持特定于Box的MCP工具
- 资源访问：通过MCP访问Box资源
故障排除
常见问题
- 身份验证失败
- 验证Box客户端ID是否正确 - 检查重定向URI是否与Box应用程序配置匹配 - 确保生产中的HTTPS
- MCP连接问题
- 验证MCP服务器URL是否可访问 - 检查网络连接 - 查看浏览器控制台以了解详细错误
- 构建问题
- 确保Node.js版本兼容性 - 清除npm缓存： npm cache clean --force - 删除node_modules并重新安装
调试模式
通过设置启用调试日志记录：
REACT_APP_DEBUG=true贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 如果适用，添加测试
- 提交拉取请求
许可证
该项目根据ISC许可证获得许可。
支持
关于以下问题：