使用说明
入门指南
先决条件
- Node.js和pnpm(或npm/yarn)
- 一个OpenAI API密钥
- 用于OAuth-enabled财务数据访问的财务数据集API帐户
- Thesys API密钥(从 https://console.thesys.dev/keys)
安装
-
克隆存储库:
git clone <repository-url> cd genui-mcp-demo -
安装依赖项:
pnpm install
配置
-
获取Thesys API密钥
访问 https://console.thesys.dev/keys 获取您的Thesys API密钥。
-
注册金融数据集MCP访问
在以下网址创建帐户 https://www.financialdatasets.ai/ 获取OAuth-auth-authenticated金融数据服务的API密钥。
-
运行应用程序:
pnpm dev -
配置应用程序:
- 打开浏览器并导航到
http://localhost:5173/ - 点击 “显示设置”
- 输入您的 Thesys API密钥
- 输入MCP服务器URL:
https://mcp.financialdatasets.ai/mcp - 保存设置
- 打开浏览器并导航到
测试应用程序
在聊天界面中尝试以下示例查询,以测试财务数据集成:
Comprehensive comparison of Bitcoin and Tesla stock performance from 2020 to October 2025
助理将使用MCP工具获取实时财务数据并提供详细分析。
项目结构
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:将所有内容联系在一起的主要应用程序组件。
