MCP Server

Coral ships a hosted Model Context Protocol server that gives AI coding assistants live, structured access to the Coral Design System — its components, props, design tokens, and installation steps — directly from the documentation site.

It’s built with mcp-handler on top of a Next.js Route Handler and speaks the Streamable HTTP transport, so any MCP-compatible client can connect straight to it over the network with no local install required.

Setup

Claude Code

Run the following in your project (or add --scope project to check the config into version control and share it with your team):


claude mcp add --transport http coral https://coral.octopus.energy/api/mcp

This writes an entry to your Claude Code config:

.mcp.json


{
    "mcpServers": {
        "coral": {
            "type": "http",
            "url": "https://coral.octopus.energy/api/mcp"
        }
    }
}

Claude Desktop

Open Settings → Developer → Edit Config and add the server to claude_desktop_config.json:

claude_desktop_config.json


{
    "mcpServers": {
        "coral": {
            "type": "http",
            "url": "https://coral.octopus.energy/api/mcp"
        }
    }
}

Restart Claude Desktop for the change to take effect.

Cursor

Open Settings → MCP and add a new server, or add it directly to .cursor/mcp.json at the root of your project:

.cursor/mcp.json


{
    "mcpServers": {
        "coral": {
            "url": "https://coral.octopus.energy/api/mcp"
        }
    }
}

VS Code

Add the server to .vscode/mcp.json at the root of your project, or run MCP: Add Server from the Command Palette and choose “HTTP”:

.vscode/mcp.json


{
    "servers": {
        "coral": {
            "type": "http",
            "url": "https://coral.octopus.energy/api/mcp"
        }
    }
}

GitHub Copilot Chat picks up the same file when MCP support is enabled.

Windsurf

Open Settings → MCP Servers → Add Server and add the following to mcp_config.json:

mcp_config.json


{
    "mcpServers": {
        "coral": {
            "serverUrl": "https://coral.octopus.energy/api/mcp"
        }
    }
}

Zed

Open your settings file (zed: open settings file) and add:


{
    "context_servers": {
        "coral": {
            "url": "https://coral.octopus.energy/api/mcp"
        }
    }
}

If you already have context_servers, just add the coral entry inside it.

Other (JSON)

For any other MCP client that supports the Streamable HTTP transport, point it at the URL directly:


{
    "mcpServers": {
        "coral": {
            "url": "https://coral.octopus.energy/api/mcp"
        }
    }
}

For stdio-only clients that can’t speak Streamable HTTP directly, proxy the connection with mcp-remote:


{
    "mcpServers": {
        "coral": {
            "command": "npx",
            "args": ["-y", "mcp-remote", "https://coral.octopus.energy/api/mcp"]
        }
    }
}

Tools

The Coral MCP exposes the following tools to AI agents

Component tools

list_components — Lists every component in Coral, grouped by the package it ships from (atoms, molecules, organisms, charts, media, etc.), including sub-components

get_component_details — Returns the full prop API, sub-components, and types for a single named component, sourced directly from Coral’s generated type definitions

Installation tools

get_installation_instructions — Returns Coral’s installation and setup documentation as plain text

Design System tools

get_tokens — Returns every Design Token in Coral — colours, spacing, typography, borders, animation, and breakpoints

Template tools

Well-designed, fully responsive, and accessible component templates showing an LLM how to use Coral components together in a real-world layout.

get_statistics_dashboard_template — Returns a template for a statistics dashboard, this includes:

A title and subtitle
A paragraph describing the dashboard
A grid of statistics cards, each with a title and caption in various layouts (horizontal, vertical, and stacked)
An example of chart usage (CoralBarChart)
Smallprint text at the bottom of the dashboard

Prompts

build_with_coral — A prompt that instructs the LLM to:

Install Next.js
Install Coral (using the get_installation_instructions tool)
Give the LLM some basic instructions on how to continue: only use Coral and its components, do not use Tailwind, do not use custom CSS, etc

Feedback

Having issues with the MCP server or have suggestions for improvement? Report feedback to #coral-feedback .