Mcpapp Colorpicker

🎨 颜色选择器MCP应用程序

A. 模型上下文协议（MCP）应用程序 与建。NET，它提供了一个具有简化UI的交互式颜色选择器。这是一个示例实现，演示了如何使用C#和 ModelContextProtocol.AspNetCore 包裹。

注： MCP Apps是MCP的一个新扩展，允许服务器提供交互式UI组件。此示例演示了如何在中实现一个。NET/C#。

📸 截图

初始视图

选择颜色后

简化的界面允许您：

1. 使用颜色滑块 从全色谱中选择基本色调
2. 从渐变选择器中选择 选择确切的色调、色调或色调
3. 查看您的选择 立即显示在带有HEX代码的大预览框中

✨ 特性

• 简单直观的界面 -简洁、专注的设计，便于选择颜色
• 颜色滑块 -具有全光谱颜色的视觉色调选择器
• 渐变选择器 -200色渐变网格，显示不同的色调和色调
• 实时预览 -通过HEX代码显示立即查看您选择的颜色
• VS代码主题集成 -自动适应您的VS Code主题
• HTTP传输 -易于与MCP客户端集成

🛠️ MCP工具

ColorPicker

打开交互式颜色选择器UI以直观地选择颜色。

参数：

退货： A. ColorPickerResult 其中UI资源URI用于呈现交互式选择器。

📋 先决条件

• .NET 10 SDK 或更高版本
• Visual Studio Code 带MCP扩展

🚀 入门指南

1.克隆存储库

git clone https://github.com/elbruno/mcpapp-colorpicker.git
cd mcpapp-colorpicker

2.构建和运行

dotnet restore
dotnet run

服务器将于启动 http://localhost:3001/mcp.

3.配置VS代码

将以下内容添加到VS Code MCP配置中(.vscode/mcp.json):

{
  "servers": {
    "color-picker": {
      "type": "http",
      "url": "http://localhost:3001/mcp"
    }
  }
}

4.使用它

在带有MCP扩展的VS Code中，调用 ColorPicker 工具打开交互式颜色选择器UI。

示例提示：

“我想选择一种颜色，以便以后在我的网页设计应用程序中使用”

5.（可选）用ngrok曝光

要从远程位置访问MCP应用程序或与他人共享，您可以使用ngrok公开您的本地服务器：

下载ngrok

1. 访问 ngrok.com
2. 注册一个免费帐户
3. 下载适用于您操作系统的ngrok可执行文件
4. 将其解压缩到文件夹中并将其添加到PATH中，或直接使用它

Run-ngrok

在新终端中，暴露您的本地服务器：

ngrok http 3001

ngrok将显示一个公共URL，如 https://abc123def456.ngrok.io 转发给您当地的 http://localhost:3001.

更新VS代码配置

将您的本地URL替换为ngrok URL .vscode/mcp.json:

{
  "servers": {
    "color-picker": {
      "type": "http",
      "url": "https://abc123def456.ngrok.io/mcp"
    }
  }
}

现在，您可以使用 ColorPicker 任何位置的工具！

🏗️ 项目结构

mcpapp-colorpicker/
├── ColorPickerMcp.csproj   # Project file with MCP SDK reference
├── Program.cs              # MCP server implementation with embedded UI
├── README.md               # This file
├── LICENSE                 # MIT License
└── .github/
    └── workflows/
        └── build.yml       # GitHub Actions CI

🔧 技术细节

此MCP应用程序使用：

• 模型上下文协议。AspNetCore (1.1.0)-官方。NET SDK for MCP
• HTTP传输 -在以下位置显示MCP端点 /mcp
• 嵌入式HTML用户界面 -颜色选择器界面服务于 /ui/color-picker
• 基于属性的工具定义 -用途 [McpServerToolType] 和 [McpServerTool] 属性

端点

📚 资源

了解有关MCP应用程序的更多信息：

• 📺 VS代码MCP应用程序视频
• 📖 MCP应用程序-带来UI
• 📝 MCP应用程序公告博客
• 🚀 MCP应用快速入门
• 💻 官方样品库

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🤝 贡献

欢迎投稿！请随时打开问题或提交pull请求。

👤 作者

布鲁诺 - @埃尔布鲁诺