{"id":44363237,"url":"https://github.com/elbruno/mcpapp-colorpicker","last_synced_at":"2026-05-31T00:03:41.082Z","repository":{"id":334956413,"uuid":"1143522455","full_name":"elbruno/mcpapp-colorpicker","owner":"elbruno","description":"A Model Context Protocol (MCP) App built with .NET that provides an interactive color picker with a rich UI","archived":false,"fork":false,"pushed_at":"2026-03-25T13:52:34.000Z","size":6242,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-26T16:46:28.817Z","etag":null,"topics":["color-picker","csharp","dotnet","mcp","mcp-app","model-context-protocol","sample"],"latest_commit_sha":null,"homepage":null,"language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elbruno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-27T17:24:33.000Z","updated_at":"2026-03-26T04:32:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/elbruno/mcpapp-colorpicker","commit_stats":null,"previous_names":["elbruno/mcpapp-colorpicker"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/elbruno/mcpapp-colorpicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbruno%2Fmcpapp-colorpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbruno%2Fmcpapp-colorpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbruno%2Fmcpapp-colorpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbruno%2Fmcpapp-colorpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elbruno","download_url":"https://codeload.github.com/elbruno/mcpapp-colorpicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elbruno%2Fmcpapp-colorpicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33714036,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-30T02:00:06.278Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color-picker","csharp","dotnet","mcp","mcp-app","model-context-protocol","sample"],"created_at":"2026-02-11T18:00:23.383Z","updated_at":"2026-05-31T00:03:41.077Z","avatar_url":"https://github.com/elbruno.png","language":"C#","funding_links":[],"categories":["MCP apps"],"sub_categories":["Community"],"readme":"# 🎨 Color Picker MCP App\n\n[![Build](https://github.com/elbruno/mcpapp-colorpicker/actions/workflows/build.yml/badge.svg)](https://github.com/elbruno/mcpapp-colorpicker/actions/workflows/build.yml)\n[![.NET 10](https://img.shields.io/badge/.NET-10.0-512BD4)](https://dotnet.microsoft.com/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![MCP](https://img.shields.io/badge/MCP-Apps-blue)](https://modelcontextprotocol.github.io/ext-apps/api/)\n\nA **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.\n\n\u003e **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#.\n\n## 📸 Screenshots\n\n### Initial View\n\n![Color Picker UI - Initial State](screenshot.png)\n\n### After Selecting a Color\n\n![15-second demo of the app in VS Code](images/mcpapp-cs-colorpicker-demo.gif)\n\nThe simplified interface allows you to:\n\n1. **Use the Color Slider** to select your base hue from the full color spectrum\n2. **Pick from the Gradient Selector** to choose the exact shade, tint, or tone\n3. **See your selection** instantly in the large preview box with the HEX code\n\n## ✨ Features\n\n- **Simple \u0026 Intuitive Interface** - Clean, focused design for easy color selection\n- **Color Slider** - Visual hue selector with full spectrum of colors\n- **Gradient Selector** - 200-color gradient grid showing different shades and tints\n- **Real-time Preview** - See your selected color instantly with HEX code display\n- **VS Code Theme Integration** - Automatically adapts to your VS Code theme\n- **HTTP Transport** - Easy integration with MCP clients\n\n## 🛠️ MCP Tool\n\n### `ColorPicker`\n\nOpens an interactive color picker UI to visually select a color.\n\n**Parameters:**\n\n| Parameter | Type | Description |\n|-----------|------|-------------|\n| `initialColor` | string (optional) | Initial color in hex format (e.g., `#FF5733`). Default: `#3498DB` |\n\n**Returns:** A `ColorPickerResult` with the UI resource URI for rendering the interactive picker.\n\n## 📋 Prerequisites\n\n- [.NET 10 SDK](https://dotnet.microsoft.com/download/dotnet/10.0) or later\n- [Visual Studio Code](https://code.visualstudio.com/) with MCP extension\n\n## 🚀 Getting Started\n\n### 1. Clone the repository\n\n```bash\ngit clone https://github.com/elbruno/mcpapp-colorpicker.git\ncd mcpapp-colorpicker\n```\n\n### 2. Build and run\n\n```bash\ndotnet restore\ndotnet run\n```\n\nThe server will start on `http://localhost:3001/mcp`.\n\n### 3. Configure VS Code\n\nAdd the following to your VS Code MCP configuration (`.vscode/mcp.json`):\n\n```json\n{\n  \"servers\": {\n    \"color-picker\": {\n      \"type\": \"http\",\n      \"url\": \"http://localhost:3001/mcp\"\n    }\n  }\n}\n```\n\n### 4. Use it\n\nIn VS Code with the MCP extension, invoke the `ColorPicker` tool to open the interactive color picker UI.\n\nSample prompt:\n\n\u003e \"I want to select a color to use it later in my webdesign application\"\n\n### 5. (Optional) Expose with ngrok\n\nTo access the MCP app from a remote location or share it with others, you can use ngrok to expose your local server:\n\n#### Download ngrok\n\n1. Visit [ngrok.com](https://ngrok.com/)\n2. Sign up for a free account\n3. Download the ngrok executable for your operating system\n4. Extract it to a folder and add it to your PATH, or use it directly\n\n#### Run ngrok\n\nIn a new terminal, expose your local server:\n\n```bash\nngrok http 3001\n```\n\nngrok will display a public URL like `https://abc123def456.ngrok.io` that forwards to your local `http://localhost:3001`.\n\n#### Update VS Code Configuration\n\nReplace your local URL with the ngrok URL in `.vscode/mcp.json`:\n\n```json\n{\n  \"servers\": {\n    \"color-picker\": {\n      \"type\": \"http\",\n      \"url\": \"https://abc123def456.ngrok.io/mcp\"\n    }\n  }\n}\n```\n\nNow you can use the `ColorPicker` tool from any location!\n\n## 🏗️ Project Structure\n\n```\nmcpapp-colorpicker/\n├── ColorPickerMcp.csproj   # Project file with MCP SDK reference\n├── Program.cs              # MCP server implementation with embedded UI\n├── README.md               # This file\n├── LICENSE                 # MIT License\n└── .github/\n    └── workflows/\n        └── build.yml       # GitHub Actions CI\n```\n\n## 🔧 Technical Details\n\nThis MCP App uses:\n\n- **[ModelContextProtocol.AspNetCore](https://www.nuget.org/packages/ModelContextProtocol.AspNetCore)** (`1.1.0`) - Official .NET SDK for MCP\n- **HTTP Transport** - Exposes MCP endpoint at `/mcp`\n- **Embedded HTML UI** - Color picker interface served at `/ui/color-picker`\n- **Attribute-based Tool Definition** - Uses `[McpServerToolType]` and `[McpServerTool]` attributes\n\n### Endpoints\n\n| Endpoint | Description |\n|----------|-------------|\n| `/mcp` | MCP protocol endpoint for client connections |\n| `/ui/color-picker` | Interactive color picker HTML UI |\n| `/mcp/resources/ui/color-picker` | UI as MCP resource |\n\n## 📚 Resources\n\nLearn more about MCP Apps:\n\n- 📺 [VS Code MCP Apps Video](https://www.youtube.com/watch?v=HWmC3T5Wwqw)\n- 📖 [MCP Apps - Bringing UI](https://modelcontextprotocol.github.io/ext-apps/api/)\n- 📝 [MCP Apps Announcement Blog](https://blog.modelcontextprotocol.io/posts/2026-01-26-mcp-apps/)\n- 🚀 [MCP Apps QuickStart](https://modelcontextprotocol.io/docs/extensions/apps)\n- 💻 [Official Samples Repository](https://github.com/modelcontextprotocol/ext-apps)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to open issues or submit pull requests.\n\n## 👤 Author\n\n**El Bruno** - [@elbruno](https://github.com/elbruno)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felbruno%2Fmcpapp-colorpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felbruno%2Fmcpapp-colorpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felbruno%2Fmcpapp-colorpicker/lists"}