https://github.com/elbruno/mcpapp-colorpicker
A Model Context Protocol (MCP) App built with .NET that provides an interactive color picker with a rich UI
https://github.com/elbruno/mcpapp-colorpicker
color-picker csharp dotnet mcp mcp-app model-context-protocol sample
Last synced: 30 days ago
JSON representation
A Model Context Protocol (MCP) App built with .NET that provides an interactive color picker with a rich UI
- Host: GitHub
- URL: https://github.com/elbruno/mcpapp-colorpicker
- Owner: elbruno
- License: mit
- Created: 2026-01-27T17:24:33.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2026-03-25T13:52:34.000Z (3 months ago)
- Last Synced: 2026-03-26T16:46:28.817Z (3 months ago)
- Topics: color-picker, csharp, dotnet, mcp, mcp-app, model-context-protocol, sample
- Language: C#
- Size: 5.95 MB
- Stars: 10
- Watchers: 0
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-dotnet-mcp - mcpapp-colorpicker - A Model Context Protocol (MCP) App built with .NET that provides an interactive color picker with a rich UI (MCP apps / Community)
README
# 🎨 Color Picker MCP App
[](https://github.com/elbruno/mcpapp-colorpicker/actions/workflows/build.yml)
[](https://dotnet.microsoft.com/)
[](LICENSE)
[](https://modelcontextprotocol.github.io/ext-apps/api/)
A **Model Context Protocol (MCP) App** built with .NET that provides an interactive color picker with a simplified UI. This is a sample implementation demonstrating how to build MCP Apps using C# and the `ModelContextProtocol.AspNetCore` package.
> **Note:** MCP Apps are a new extension to MCP that allows servers to provide interactive UI components. This sample demonstrates how to implement one in .NET/C#.
## 📸 Screenshots
### Initial View
### After Selecting a Color
The simplified interface allows you to:
1. **Use the Color Slider** to select your base hue from the full color spectrum
2. **Pick from the Gradient Selector** to choose the exact shade, tint, or tone
3. **See your selection** instantly in the large preview box with the HEX code
## ✨ Features
- **Simple & Intuitive Interface** - Clean, focused design for easy color selection
- **Color Slider** - Visual hue selector with full spectrum of colors
- **Gradient Selector** - 200-color gradient grid showing different shades and tints
- **Real-time Preview** - See your selected color instantly with HEX code display
- **VS Code Theme Integration** - Automatically adapts to your VS Code theme
- **HTTP Transport** - Easy integration with MCP clients
## 🛠️ MCP Tool
### `ColorPicker`
Opens an interactive color picker UI to visually select a color.
**Parameters:**
| Parameter | Type | Description |
|-----------|------|-------------|
| `initialColor` | string (optional) | Initial color in hex format (e.g., `#FF5733`). Default: `#3498DB` |
**Returns:** A `ColorPickerResult` with the UI resource URI for rendering the interactive picker.
## 📋 Prerequisites
- [.NET 10 SDK](https://dotnet.microsoft.com/download/dotnet/10.0) or later
- [Visual Studio Code](https://code.visualstudio.com/) with MCP extension
## 🚀 Getting Started
### 1. Clone the repository
```bash
git clone https://github.com/elbruno/mcpapp-colorpicker.git
cd mcpapp-colorpicker
```
### 2. Build and run
```bash
dotnet restore
dotnet run
```
The server will start on `http://localhost:3001/mcp`.
### 3. Configure VS Code
Add the following to your VS Code MCP configuration (`.vscode/mcp.json`):
```json
{
"servers": {
"color-picker": {
"type": "http",
"url": "http://localhost:3001/mcp"
}
}
}
```
### 4. Use it
In VS Code with the MCP extension, invoke the `ColorPicker` tool to open the interactive color picker UI.
Sample prompt:
> "I want to select a color to use it later in my webdesign application"
### 5. (Optional) Expose with ngrok
To access the MCP app from a remote location or share it with others, you can use ngrok to expose your local server:
#### Download ngrok
1. Visit [ngrok.com](https://ngrok.com/)
2. Sign up for a free account
3. Download the ngrok executable for your operating system
4. Extract it to a folder and add it to your PATH, or use it directly
#### Run ngrok
In a new terminal, expose your local server:
```bash
ngrok http 3001
```
ngrok will display a public URL like `https://abc123def456.ngrok.io` that forwards to your local `http://localhost:3001`.
#### Update VS Code Configuration
Replace your local URL with the ngrok URL in `.vscode/mcp.json`:
```json
{
"servers": {
"color-picker": {
"type": "http",
"url": "https://abc123def456.ngrok.io/mcp"
}
}
}
```
Now you can use the `ColorPicker` tool from any location!
## 🏗️ Project Structure
```
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
```
## 🔧 Technical Details
This MCP App uses:
- **[ModelContextProtocol.AspNetCore](https://www.nuget.org/packages/ModelContextProtocol.AspNetCore)** (`1.1.0`) - Official .NET SDK for MCP
- **HTTP Transport** - Exposes MCP endpoint at `/mcp`
- **Embedded HTML UI** - Color picker interface served at `/ui/color-picker`
- **Attribute-based Tool Definition** - Uses `[McpServerToolType]` and `[McpServerTool]` attributes
### Endpoints
| Endpoint | Description |
|----------|-------------|
| `/mcp` | MCP protocol endpoint for client connections |
| `/ui/color-picker` | Interactive color picker HTML UI |
| `/mcp/resources/ui/color-picker` | UI as MCP resource |
## 📚 Resources
Learn more about MCP Apps:
- 📺 [VS Code MCP Apps Video](https://www.youtube.com/watch?v=HWmC3T5Wwqw)
- 📖 [MCP Apps - Bringing UI](https://modelcontextprotocol.github.io/ext-apps/api/)
- 📝 [MCP Apps Announcement Blog](https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/)
- 🚀 [MCP Apps QuickStart](https://modelcontextprotocol.io/docs/extensions/apps)
- 💻 [Official Samples Repository](https://github.com/modelcontextprotocol/ext-apps)
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🤝 Contributing
Contributions are welcome! Feel free to open issues or submit pull requests.
## 👤 Author
**El Bruno** - [@elbruno](https://github.com/elbruno)