AI导哈

MCP应用示例集

一组MCP应用示例，展示如何在支持MCP的主机（如VS Code/GitHub Copilot和Claude Desktop）中构建交互式用户界面。

  • by liamchampton
  • TypeScript
  • 本地部署
  • 5 星标
  • 更新于
在 GitHub 查看 liamchampton/mcp-apps

使用说明

MCP应用程序演示

一组示例MCP应用程序，演示如何构建在启用MCP的主机（如VS Code/GitHub Copilot和Claude Desktop）内运行的交互式UI。

什么是MCP应用程序？

MCP Apps将MCP工具与HTML资源相结合，以显示丰富的交互式内容。当主机调用MCP工具时，服务器返回数据和呈现结果的UI。

Host calls tool → Server returns result → Host renders resource UI → UI receives result

示例应用程序

应用程序 描述 默认端口
取色笔 支持十六进制/RGB/HSL的交互式颜色选择器 3001
天气应用程序 使用Open-Meteo API的天气预报 3002
航班状态 实时航班状态查询 3003
火焰分析仪 使用交互式火焰图进行应用程序CPU/内存分析 3003

每个应用程序都有自己的README，其中包含详细的文档。

先决条件

  • Node.js v18或更高版本 （包括 npm)
  • 走 1.19+ --仅Flamegraph Profiler应用程序需要
  • Git --克隆存储库

验证您的设置：

node -v   # should print v18.x or higher
npm -v    # should print 9.x or higher
git --version

本地安装

1.克隆存储库

git clone https://github.com/liamchampton/mcp-apps.git
cd mcp-apps

2.安装、构建和运行应用程序

此仓库中的每个应用程序都遵循相同的模式。选择一个（或多个）并运行：

# Navigate to the app directory
cd colour-picker-mcp   # or mcp-weather-app, flight-status-mcp, flamegraph-profiler-mcp

# Install dependencies
npm install

# Build and start the server
npm start

终端将确认服务器正在运行并打印本地URL（例如。 http://localhost:3001/mcp).

提示： 要同时运行多个应用程序，请为每个应用程序打开一个单独的终端。Flight Status和Flamegraph Profiler应用程序都默认为端口3003，因此如果您需要同时运行这两个应用程序，请为其中一个设置自定义端口：

PORT=3004 npm start

3.将MCP服务器连接到您的主机

VS代码/GitHub副本

将服务器添加到您的工作区MCP配置中。创建或编辑 .vscode/mcp.json 在您的项目中：

{
  "servers": {
    "colour-picker-mcp": {
      "type": "http",
      "url": "http://localhost:3001/mcp"
    },
    "weather-mcp": {
      "type": "http",
      "url": "http://localhost:3002/mcp"
    },
    "flight-status": {
      "type": "http",
      "url": "http://localhost:3003/mcp"
    },
    "flamegraph-mcp": {
      "type": "http",
      "url": "http://localhost:3003/mcp"
    }
  }
}

然后在中打开Copilot聊天 代理模式 工具将自动可用。

克劳德桌面

将服务器添加到Claude Desktop配置文件中：

  • macOS： ~/Library/Application Support/Claude/claude_desktop_config.json
  • 窗户： %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "colour-picker-mcp": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

保存配置后重新启动Claude Desktop。

4.使用工具

连接后，请您的AI主机使用该工具。例如：

  • “选择一种颜色” → 触发 pick-colour 工具
  • “伦敦的天气怎么样？” → 触发 get-weather 工具
  • “检查BA123航班状态” → 触发 get-flight-status 工具
  • “在./sample-app/main.go上分析应用程序” → 触发 profile-app 工具

远程连接

应用程序也可以在互联网上公开：

Cloudflare 隧道

使用以下方式将本地服务器暴露到互联网 Cloudflare 隧道:

# Start your app
npm start

# In another terminal, create a tunnel
cloudflared tunnel --url http://localhost:<port>

然后在MCP配置中使用生成的URL：

{
  "servers": {
    "<app-name>": {
      "type": "http",
      "url": "https://<your-tunnel>.trycloudflare.com/mcp"
    }
  }
}

这对于与他人共享应用程序或从不同机器访问非常有用。

Azure开发隧道

使用以下命令暴露您的本地服务器 Azure开发隧道:

# Install dev tunnel CLI (macOS)
brew install --cask microsoft-developer-tunnel

# Or on Windows using winget
winget install Microsoft.devtunnel

# Login (use Microsoft or GitHub account)
devtunnel user login

# Start your app
npm start

# In another terminal, create a tunnel
devtunnel host -p <port>

# For public access (optional)
devtunnel host -p <port> --allow-anonymous

您将收到一个公共URL，如下所示 https://<tunnel-id>.<region>.devtunnels.ms.在MCP配置中使用它：

{
  "servers": {
    "<app-name>": {
      "type": "http",
      "url": "https://<tunnel-id>.<region>.devtunnels.ms/mcp"
    }
  }
}

看 Azure开发者隧道文档 更多选择。

部署到Azure

将您的MCP应用程序部署到 Azure容器应用 对于完全托管的解决方案：

# Login to Azure
az login

# Create a resource group
az group create --name mcp-apps-rg --location eastus

# Deploy using Azure Container Apps
az containerapp up \
  --name <app-name> \
  --resource-group mcp-apps-rg \
  --source .

然后使用您的Azure URL：

{
  "servers": {
    "<app-name>": {
      "type": "http",
      "url": "https://<app-name>.<region>.azurecontainerapps.io/mcp"
    }
  }
}

看 Azure容器应用文档 更多部署选项。

使用基本主机进行测试

使用MCP基本主机在本地测试应用程序：

# Clone the ext-apps repo
git clone --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps

# Run basic-host
cd /tmp/mcp-ext-apps/examples/basic-host
npm install --ignore-scripts
SERVERS='["<your-app-url>"]' npm run start

打开http://localhost:8080测试工具。

应用结构

每个应用程序都遵循一致的结构：

<app-name>/
├── server.ts          # MCP server with tool/resource registration
├── main.ts            # Entry point
├── mcp-app.html       # HTML template
├── src/               # UI components
├── package.json
├── tsconfig.json
└── vite.config.ts

快速开始创建新的MCP应用程序

构建自己的MCP应用程序

看 技能.md 获取以下方面的全面指导：

  • 工具+资源模式
  • 框架选择（React、Vanilla JS、Vue等）
  • 主机样式集成
  • 流式传输部分输入
  • 全屏幕模式
  • 要避免的常见模式和错误

注： SKILL.md来源于官方 MCP扩展应用程序存储库.

使用Copilot CLI

# Install Copilot CLI if you haven't already
npm install -g @githubnext/copilot-cli

# Navigate to the root of this project repository
cd mcp-apps

# Create a new MCP App
copilot create a new MCP App for <your-app-name>

安装后，按照上述快速启动说明运行和测试新应用程序（您还应该在终端中看到输出，了解如何在完成项目创建后执行此操作）。

许可证

麻省理工学院

相关 MCP