AI导哈

Box MCP客户端

一个基于React的客户端应用程序，用于通过模型上下文协议（MCP）与Box交互，提供聊天界面以访问Box内容和工具。

  • by box-community
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 box-community/mcp-client-remote-mcp-react

使用说明

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服务器（开发时可选）

安装

  1. 克隆和安装依赖关系：

    git clone <repository-url>
cd box-mcp-client-react
npm install

  2. 设置环境变量：

    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

  3. 运行开发服务器：

    npm run dev

  4. 打开浏览器： 引导到 http://localhost:3000

Box开发人员设置

  1. 创建Box应用程序：

    • 首选 Box开发人员控制台
    • 使用OAuth 2.0（用户身份验证）创建新的自定义应用程序
    • 记下您的客户端ID和客户端密码

  2. 配置OAuth：

    • 将重定向URI设置为： http://localhost:3000/auth/callback
    • 启用所需范围（通常为“读取所有文件和文件夹”）

  3. 更新环境：

    • 将您的客户ID和密码添加到 .env

MCP服务器集成

此客户端与实现模型上下文协议的Box MCP服务器一起工作。

使用真正的MCP服务器

  1. 部署Box MCP服务器（请参阅 MCP服务器)
  2. 集 VITE_BOX_MCP_SERVER_URL 在你的 .env 文件
  3. 该应用程序将连接并显示可用工具

发展模式

如果没有配置MCP服务器URL，则应用程序将以开发模式运行，并显示模拟响应。这使您能够：

  • 测试身份验证流程
  • 探索聊天界面
  • 开发UI组件

用法

  1. 身份验证：

    • 点击“使用Box登录”进行身份验证
    • 在弹出/重定向中完成OAuth流程

  2. 聊天界面：

    • 通过身份验证后，使用聊天界面
    • 发送消息以与MCP服务器交互
    • 查看可用的工具和资源

  3. 工具命令：

    • 使用 !tool <toolname> [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资源

故障排除

常见问题

  1. 身份验证失败

    • 验证Box客户端ID是否正确
    • 检查重定向URI是否与Box应用程序配置匹配
    • 确保生产中的HTTPS

  2. MCP连接问题

    • 验证MCP服务器URL是否可访问
    • 检查网络连接
    • 查看浏览器控制台以了解详细错误

  3. 构建问题

    • 确保Node.js版本兼容性
    • 清除npm缓存： npm cache clean --force
    • 删除node_modules并重新安装

调试模式

通过设置启用调试日志记录：

REACT_APP_DEBUG=true

贡献

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 如果适用，添加测试
  5. 提交拉取请求

许可证

该项目根据ISC许可证获得许可。

支持

关于以下问题：

相关 MCP