MCP聊天：通过MCP使用外部工具的OpenAI
这是一个简单的基于网络的聊天应用程序，演示了如何将OpenAI支持的助手与模型上下文协议（MCP）服务器提供的外部工具集成。
概述
该应用程序提供了一个聊天界面，用户可以在其中与人工智能助手进行交互。助手可以利用一组“工具”来执行超出其内置功能的操作。这些工具是从可配置的MCP服务器动态获取的，允许灵活和可扩展的功能。该应用程序使用OAuth 2.0对MCP服务器进行安全的身份验证和授权。
特性
- 聊天界面：一个简单、干净的界面，用于与人工智能助手聊天。
- OpenAI集成：使用OpenAI API生成响应。
- 通过MCP使用外部工具：从任何符合MCP的服务器动态列出和调用工具。
- OAuth 2.0身份验证：使用授权码授予流安全连接到MCP服务器。
- 流媒体响应：助理的回应是实时流式传输的。
- 工具调用：助手可以决定调用一个或多个外部工具来满足用户的请求。
- 可配置设置：用户可以通过设置面板配置其OpenAI API密钥和MCP服务器URL。
运作原理
- 配置：用户在设置面板中提供其OpenAI API密钥和MCP服务器的URL。
- 工具发现：当对话开始时，应用程序会查询MCP服务器以获取可用工具的列表。
- 聊天完成请求：用户的消息以及可用工具的列表被发送到OpenAI API。
- 工具调用：如果OpenAI模型决定使用工具，应用程序将收到工具调用请求。然后，它使用提供的参数调用MCP服务器上的指定工具。
- 工具结果：工具调用的结果被发送回OpenAI模型。
- 最终响应：模型处理工具结果并生成最终响应，该响应将流式传输回用户。
MCP服务器的身份验证是通过OAuth 2.0处理的。第一次调用工具时，用户会被重定向到MCP服务器以授权应用程序。后续调用将使用存储的访问令牌。
入门指南
先决条件
- Node.js和npm（或yarn/pnpm）
- 一个OpenAI API密钥
- 访问OAuth 2.0的MCP服务器和客户端ID
安装
- 克隆存储库：
git clone
cd c1-oauth-mcp- 安装依赖项：
npm install配置
- 运行应用程序（请参阅下一步）。
- 在浏览器中打开应用程序。
- 点击“显示设置”。
- 输入您的OpenAI API密钥。
- 输入MCP服务器的URL。
运行应用程序
npm run dev这将启动开发服务器，通常在 http://localhost:5173.
项目结构
src/components/：包含UI的React组件。
- ChatMessages.tsx：显示聊天记录。 - ChatInput.tsx：用于发送消息的输入字段。 - SettingsPanel.tsx：用于配置API密钥和服务器URL的面板。 - AuthCallback.tsx：处理OAuth 2.0回调。
src/lib/：包含应用程序的核心逻辑。
- auth.ts：为MCP实现OAuth 2.0客户端提供程序。 - mcp-client.ts：与MCP服务器交互的客户端（列出/调用工具）。 - openai-client.ts：用于与OpenAI API交互的客户端，包括工具调用处理。
src/App.tsx：将所有内容联系在一起的主要应用程序组件。