AI导哈

3D太阳系查看器

一个基于React和Three.js构建的3D交互式太阳系查看器，可与Apps SDK和MCP（模型上下文协议）配合使用，适用于教育、演示和开发场景。

  • by jihyukma123
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 jihyukma123/solar-system-mcp-server

使用说明

太阳系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://<custom_endpoint>.ngrok-free.app/mcp

一旦你添加了一个连接器，就可以在ChatGPT对话中使用它。

您可以通过在“更多”选项中选择您的应用，将其添加到对话上下文中。

然后，你可以通过询问与太阳系相关的问题来调用工具，比如“给我展示太阳系”或者“木星看起来是什么样子的？”。

下一步

  • 自定义小部件数据：编辑其中的处理程序 solar-system_server_python/main.py 从您的系统中获取数据。
  • 创建你自己的组件：向（系统/列表）中添加新条目 src/ 它们将被构建脚本自动拾取。

部署您的MCP服务器

您可以选择您偏好的云环境来部署您的MCP服务器。

将此包含在环境变量中：

BASE_URL=https://your-server.com

这将用于生成小部件的HTML代码，以便它能够从此托管URL提供静态资源。

做出贡献

欢迎提出问题或提交拉取请求（PRs）来改进这款应用，但请注意，我们可能无法审查所有建议。

许可证

这个项目遵循MIT许可证授权。详见 许可证 详情如下。

相关 MCP