mcpapp-colorpicker

This MCP server implements a Color Picker tool inside a small .NET-based MCP app. It exposes an interactive UI at /mcp/ui/color-picker and serves the MCP protocol endpoint at /mcp so MCP clients (for example, the VS Code MCP extension) can connect and load the ColorPicker tool. The ColorPicker tool lets users visually pick a color using a hue slider, a 200-color gradient grid, and a real-time HEX preview. The result is an object containing the selected color, which can be consumed by MCP clients to apply styling or generate color values in workflows. To use it, start the server and connect via an MCP client, then invoke the ColorPicker tool named ColorPicker in the MCP extension or client UI. The server adapts to the client’s context and theme, and the embedded UI serves at /ui/color-picker for direct access if needed.

Prerequisites:

• .NET 10 SDK or later
• A supported IDE or editor (e.g., Visual Studio Code)

Step-by-step:

1. Clone the repository

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

2. Restore and build

dotnet restore
dotnet build

3. Run the MCP server

dotnet run

4. Verify the server

• The MCP endpoint should be available at http://localhost:3001/mcp
• The embedded UI is served at http://localhost:3001/ui/color-picker

Optional: configure a reverse proxy or expose via ngrok if you need remote access.

• The server runs on port 3001 by default and serves MCP protocol traffic at /mcp. If you already have something on port 3001, adjust ASPNETCORE_URLS or use a reverse proxy.
• Access the UI directly at /ui/color-picker to view the interactive color picker.
• If exposing to the internet, you can use ngrok or similar tools and update your MCP client configuration to point to the public URL plus /mcp, e.g. https://xyz.ngrok.io/mcp.
• The ColorPicker tool accepts an optional initialColor parameter when invoked from the MCP client (hex format, e.g., #FF5733).