太阳系3D查看器

一个使用React和Three.js构建的3D交互式太阳系查看器,设计为与Apps SDK和MCP(模型上下文协议)协同工作。
MCP + 应用程序SDK概览
模型上下文协议(MCP)是一种开放规范,用于将大型语言模型客户端连接到外部工具、数据和用户界面。MCP服务器会暴露模型在对话过程中可以调用的工具,并根据工具合约返回结果。这些结果可以包含额外的元数据(如内联HTML),应用程序软件开发工具包(Apps SDK)会使用这些元数据来与助手消息一起渲染丰富的用户界面组件(小部件)。
在应用程序软件开发工具包(Apps SDK)中,MCP(可能指某种中间件或控制协议)负责保持服务器、模型和用户界面(UI)之间的同步。通过标准化通信协议格式、认证方式和元数据,它使ChatGPT能够以与处理内置工具相同的方式处理您的连接器。
仓库结构
src/solar-system/– 太阳系小部件源代码assets/– 在运行构建步骤后生成HTML、JS和CSS包solar-system_server_python/– 用于3D太阳系小部件的Python MCP服务器build-all.mts– 快速构建编排器,为小部件生成哈希包
先决条件
- Node.js 18及以上版本
- pnpm(推荐)或 npm/yarn
- Python 3.10+(用于Python MCP服务器)
安装依赖项
克隆仓库并安装工作区依赖项:
pnpm install使用 npm 还是 yarn?请使用您偏好的客户端安装根依赖项,并相应地调整下面的命令。
构建小部件
太阳系小部件被打包成独立资源,由MCP服务器作为可重用的用户界面资源提供服务。
pnpm run build这个命令运行 build-all.mts,生成带版本的 .html, .js,以及 .css 内部文件 assets/该小部件已打包了所需的CSS,因此您可以直接托管这些包或通过您自己的服务器进行分发。
要在本地迭代该小部件,您也可以启动 Vite 开发服务器:
pnpm run dev提供静态资源服务
如果你想在不使用MCP服务器的情况下预览生成的包,请在运行构建后启动静态文件服务器:
pnpm run serve这些资产面临的风险是 http://localhost:4444 启用CORS,以便本地工具(包括MCP检查器)能够获取它们。
运行MCP服务器
该仓库包含一个用于提供太阳系小部件的Python MCP服务器。
太阳能系统Python服务器
python -m venv .venv
source .venv/bin/activate
pip install -r solar-system_server_python/requirements.txt
uvicorn solar-system_server_python.main:app --port 8000每个工具响应都包含纯文本内容、结构化的JSON以及 _meta.openai/outputTemplate 元数据,以便应用程序软件开发工具包(SDK)能够填充匹配的小部件。
在ChatGPT中进行测试
要将此应用添加到ChatGPT中,请启用 开发者模式并在“设置”>“连接器”中添加您的应用程序。
要在不部署本地服务器的情况下将其添加进来,你可以使用像……这样的工具 ngrok 将您的本地服务器暴露给互联网。
例如,一旦您的MCP服务器运行起来,您可以执行:
ngrok http 8000您将获得一个公共URL,可以在设置 > 连接器中使用它来将您的本地服务器添加到ChatGPT。
例如: https://.ngrok-free.app/mcp
一旦你添加了一个连接器,就可以在ChatGPT对话中使用它。
您可以通过在“更多”选项中选择您的应用,将其添加到对话上下文中。
然后,你可以通过询问与太阳系相关的问题来调用工具,比如“给我展示太阳系”或者“木星看起来是什么样子的?”。
下一步
- 自定义小部件数据:编辑其中的处理程序
solar-system_server_python/main.py从您的系统中获取数据。 - 创建你自己的组件:向(系统/列表)中添加新条目
src/它们将被构建脚本自动拾取。
部署您的MCP服务器
您可以选择您偏好的云环境来部署您的MCP服务器。
将此包含在环境变量中:
BASE_URL=https://your-server.com这将用于生成小部件的HTML代码,以便它能够从此托管URL提供静态资源。
做出贡献
欢迎提出问题或提交拉取请求(PRs)来改进这款应用,但请注意,我们可能无法审查所有建议。
许可证
这个项目遵循MIT许可证授权。详见 许可证 详情如下。
