AI导哈

猫互动小部件开发工具

一个结合OpenAI Apps SDK和Model Context Protocol (MCP)的项目，用于开发在对话中插入猫动画和互动的小部件。

  • by kazurego7
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 kazurego7/neko-mcp

使用说明

一些-mcp

这是一个将OpenAI Apps SDK和Model Context Protocol（MCP）组合起来，试制“猫在认真的对话旁边突然出现”体验的项目。用于开发部件的前端（neko-widget-dev/）和基于云flare Workers的服务器（neko-mcp-server/中所述修改相应参数的值。

项目愿景

  • 在AI和用户的对话中，采用了猫只用叫声和动作插队，稍微缓和一下空气的演出。
  • 在对话的休息时间显示猫图像画廊等，尝试简单的交互。

更详细的想法笔记 doc/neko-mcp構想メモ.md 来修改标记元素的显示属性。

存储库配置

  • neko-widget-dev/ –Vite+React项目，用于开发和构建小部件，例如猫卡鲁塞尔。
  • neko-mcp-server/ –在Cloudflare Workers上运行的MCP服务器。创建的部件 cat-carousel 作为工具发布。
  • doc/ –补充文档，如项目构思备注。

必要条件

  • Node.js 20.19 以上（Vite 7 / Wrangler 4 の推奨要件）
  • pnpm
  • 本地启动部署MCP服务器

安装，安装

  1. 安装小部件开发环境的依赖关系。
    cd neko-widget-dev
pnpm install
  2. 也安装MCP服务器侧的依存关系。
    cd ../neko-mcp-server
pnpm install

小部件开发流程（neko-widget-dev/)

  • 构建： pnpm run build
    assets/ 的 cat-carousel.css、cat-carousel.js、cat-carousel.snippet.html 将生成，MCP服务器将分发此片段。
  • 开发服务器： pnpm run dev
    Vite带热重载 http://localhost:4444/cat-carousel.html 中描述的相应参数的值。
  • 追加数据： assets/cat-carousel.snippet.html 中描述的场景，使用以下步骤创建明细表，以便在概念设计中分析体量的体积。

服务器流（neko-mcp-server/)

  • 本地启动： pnpm start（Cloudflare Wrangler的 dev 使用模式）
  • 工具： cat-carousel 返回已构建的片段。请在启动前构建部件。
  • 部署：部署到云流工作人员 pnpm run deploy 来修改标记元素的显示属性。README.md 中描述的场景，使用下列步骤创建明细表，以便在概念设计中分析体量的周长。

相关 MCP