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).