AI导哈

股票价格显示应用

一个基于Model Context Protocol (MCP)的ChatGPT应用，用于显示实时股票价格和市场指数数据，支持轮播和小部件格式展示。

  • by vikkysarswat
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 vikkysarswat/trade_detail

使用说明

交易详情-ChatGPT股价显示应用程序

ChatGPT应用程序构建于 模型上下文协议（MCP） 它以精美的轮播和小部件格式显示股票价格和指数数据。使用Python（FastAPI）后端和TypeScript/React前端组件构建。

⚡ MCP协议支持

✅ SSE传输（服务器发送事件） -完全符合MCP 1.0
✅ ChatGPT兼容 -适用于自定义MCP连接器
✅ JSON-RPC 2.0 -标准协议实施

连接URL: https://your-app-name.onrender.com/mcp

📖 完整的MCP测试和连接指南→

特性

  • 📊 实时股票价格：显示实时更新的当前股价
  • 📈 索引数据：跟踪主要市场指数（Nifty 50、Nifty Midcap、Nift Smallcap）
  • 🎠 旋转视图：在优雅的旋转木马中浏览多只股票
  • 📱 小部件格式：紧凑的小部件显示屏，便于快速浏览
  • 🚀 轻松部署：单击部署即可渲染
  • 💬 ChatGPT集成：使用自然语言查询股票数据

建筑

此应用程序遵循 模型上下文协议（MCP） 规范：

  • 后端：带MCP SSE传输的Python FastAPI服务器
  • 前端：使用Tailwind CSS的Types/React组件
  • 小部件：预构建的UI组件作为嵌入式资源
  • 运输：通过HTTPS的SSE（服务器发送事件）
  • 协议：mcp1.0+JSON-RPC 2.0
  • 部署：已准备好使用自动构建进行渲染

项目结构

trade_detail/
├── src/                          # Frontend React components
│   ├── stock-carousel/          # Carousel widget for stocks
│   ├── stock-widget/            # Individual stock widget
│   ├── index-widget/            # Market indices widget
│   └── utils/                   # Shared utilities
├── server/                       # Python MCP server
│   ├── main.py                  # FastAPI + MCP integration
│   ├── mcp_server.py            # MCP server with SSE transport
│   ├── stock_data.py            # Stock data fetching logic
│   └── requirements.txt         # Python dependencies
├── assets/                       # Built widget bundles (generated)
├── MCP_TESTING.md               # MCP testing & connection guide
├── build-all.mts                # Build orchestrator
└── render.yaml                  # Render deployment config

快速开始

先决条件

  • Node.js 18+
  • Python 3.10+
  • pnpm（推荐）或npm

安装

# Clone repository
git clone https://github.com/vikkysarswat/trade_detail.git
cd trade_detail

# Install dependencies
pnpm install
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r server/requirements.txt

# Build frontend
pnpm run build

# Start servers
pnpm run serve                              # Terminal 1: Assets (port 4444)
uvicorn server.main:app --reload --port 8000  # Terminal 2: MCP server

访问 http://localhost:8000 验证服务器是否正在运行。

部署以渲染

一键部署

  1. 分叉此存储库
  2. 首选 渲染仪表板
  3. 点击“新建+”>“Web服务”
  4. 连接您的GitHub存储库
  5. 渲染自动检测 render.yaml 并部署

设置环境变量

BASE_URL = https://your-app-name.onrender.com

验证部署

curl https://your-app-name.onrender.com/health
# Should return: {"status": "healthy"}

连接到ChatGPT

步骤1：启用开发人员模式

  • 转到ChatGPT设置
  • 启用“开发人员模式”

步骤2：添加自定义MCP连接器

连接器URL:

https://your-app-name.onrender.com/mcp

步骤3：测试

将连接器添加到您的聊天中，然后尝试：

  • “显示RELIANCE的当前价格”
  • 显示TCS、Infosys和Wipro的股价
  • “Nifty 50指数在做什么？”

📖 详细的连接指南和故障排除→

MCP工具

工具 说明 参数
get_stock_price 单库存小部件 symbol （字符串）
get_multiple_stocks 多库存旋转木马 symbols （数组）
get_index_data 市场指数显示 index_name （字符串）
search_stocks 搜索股票 query （字符串）

发展

本地测试MCP

# Install MCP inspector
npm install -g @modelcontextprotocol/inspector

# Test your server
mcp-inspector http://localhost:8000/mcp

添加新小部件

  1. 在中创建组件 src/your-widget/
  2. 添加入口点 src/your-widget/main.tsx
  3. 构建会自动检测到它

自定义库存数据

编辑 server/stock_data.py 与以下内容集成：

  • 雅虎财经（默认）
  • 阿尔法Vantage
  • NSE印度API
  • 您的自定义数据源

API终点

  • /mcp -ChatGPT的MCP SSE端点
  • /health -健康检查
  • / -服务器信息

技术栈

  • 后端：Python 3.11、FastAPI、Uvicorn、MCP SDK
  • 前端：TypeScript、React 18、Vite
  • 样式：顺风CSS
  • 协议：带SSE的模型上下文协议（MCP）
  • 部署：渲染

故障排除

ChatGPT中“404未找到”

  • ✅ 验证URL: https://your-app.onrender.com/mcp （无尾随斜线）
  • ✅ 检查健康端点是否正常工作
  • ✅ 确保启用了HTTPS

无法渲染的小部件

  • ✅ 集 BASE_URL 环境变量
  • ✅ 构建资产： pnpm run build
  • ✅ 检查可访问的资产

连接超时

  • ✅ 检查渲染日志是否有错误
  • ✅ 验证服务器是否正在运行： curl /health
  • ✅ 首先在当地与MCP检查员进行测试

📖 完整的故障排除指南→

文档

贡献

欢迎投稿！请看 贡献.md 作为指导方针。

许可证

MIT许可证-请参阅 许可证 详细信息文件

支持

  • 问题: GitHub问题
  • 电子邮件: vikky.sarswat@gmail.com

致谢

准备好部署了吗？ → 渲染仪表板
需要帮助？ → MCP测试指南

相关 MCP