AI导哈

产品展示服务器

一个MCP（Model Context Protocol）服务器，用于在水平可滚动的轮播中展示adidas产品，提供新品浏览和产品搜索功能。

  • by longas
  • TypeScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 longas/adidas-mcp-app

使用说明

阿迪达斯MCP应用程序

MCP（模型上下文协议）服务器，在水平可滚动的转盘中显示阿迪达斯产品。它提供了两个工具：

  • new-arrivals --浏览最新到货产品
  • search-products --按查询搜索产品（例如“红鞋”）

当从兼容MCP Apps的主机（如Claude.ai）调用时，这两个工具都会在共享相同资源的沙盒iframe内呈现交互式Preact UI。

产品数据从阿迪达斯API的客户端获取。外部图像和字体直接通过CSP声明加载(connectDomains 和 resourceDomains)在MCP资源元数据上。

客户端应用程序使用Bun的bundler和Tailwind CSS构建为一个自包含的HTML文件（JS+CSS内联），并作为MCP资源。

设置

bun install

构建

bun run build

跑

bun run start

MCP服务器的启动时间为 http://localhost:3001/mcp.

使用基本主机进行测试

  1. 克隆 ext应用程序 repo和安装依赖关系：
git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps
npm install
  1. 启动基本主机，指向正在运行的MCP服务器：
cd examples/basic-host
SERVERS='["http://localhost:3001/mcp"]' npm start
  1. 打开http://localhost:8080，选择服务器，选择 new-arrivals 或 search-products 工具，然后单击“调用工具”。

使用远程主机（例如Claude.ai）进行测试

  1. 启动cloudflared隧道以暴露您的本地服务器：
bun run tunnel
  1. 复制生成的URL并将其作为远程MCP服务器添加到主机中，附加 /mcp （例如。 https://random-name.trycloudflare.com/mcp).

相关 MCP