AI导哈

颜色选择器应用

一个基于.NET构建的交互式颜色选择器应用，提供简单直观的界面，用于选择和预览颜色。

  • by elbruno
  • C#
  • 本地部署
  • 13 星标
  • 更新于
在 GitHub 查看 elbruno/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以直观地选择颜色。

参数：

参数 类型 说明
initialColor string（可选） 十六进制格式的初始颜色（例如。， #FF5733).违约： #3498DB

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

📋 先决条件

🚀 入门指南

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 客户端连接的MCP协议端点
/ui/color-picker 交互式颜色选择器HTML UI
/mcp/resources/ui/color-picker UI作为MCP资源

📚 资源

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

📄 许可证

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

🤝 贡献

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

👤 作者

布鲁诺 - @埃尔布鲁诺

相关 MCP