快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

详细介绍

🎨 颜色选择器MCP应用程序

![Build](https://github.com/elbruno/mcpapp-colorpicker/actions/workflows/build.yml) ![.NET 10](https://dotnet.microsoft.com/) ![License: MIT](LICENSE) ![MCP](https://modelcontextprotocol.github.io/ext-apps/api/)

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

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

📸 截图

初始视图

Color Picker UI - Initial State

选择颜色后

15-second demo of the app in VS Code

简化的界面允许您：

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

✨ 特性

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

🛠️ MCP工具

`ColorPicker`

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

参数：

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

退货： 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

访问 ngrok.com
注册一个免费帐户
下载适用于您操作系统的ngrok可执行文件
将其解压缩到文件夹中并将其添加到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请求。

👤 作者

布鲁诺 - @埃尔布鲁诺

目录标签

C#VS Code云端部署交互式UI本地部署颜色选择.NET应用MCP应用

支持客户端

VS Code

接入字段

传输方式（transport，传输协议）

未说明

鉴权方式（authType，认证方式）

none

工具数量（toolCount，工具数）

1

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

未说明none部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

仍需确认：installCommand

来源信息

MCP World

mcpworld.com

/detail/c429d74a23aaf6f7c590c51775b93a3d

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

继续浏览同类 MCP

更多运维云端 MCP（13,854）返回 MCP 目录

上一个 MCP

MCP App Adaee68d

用于构建和运行MCP服务器作为HTTP服务的框架，提供身份验证、用户管理、工具注册和部署支持。

下一个 MCP

MCP App D27bbcb3

一个提供HTTP流式传输功能的MCP服务器，支持分块传输、完整HTTP请求和服务器发送事件(SSE)。

Mcpapp Colorpicker