MCP

Camelot MCP

A Model Context Protocol server that hands an AI coding assistant the real catalogue, tokens and rules of @puckoops/camelot, so it builds with the system instead of guessing at it.

Connecting

What it gives an assistant

The design system, as tools

Everything the server says is generated from the package's sources when this site builds, so it cannot drift from what ships.

Components, and which one

The catalogue with every export's props, allowed values and defaults, plus the use-this-over-that guidance between lookalikes.

get_componentssearch_componentsget_component_detailscompare_components

Colour and type

Role tokens with their light and dark values, the neutral ramp, the hue ramps only a Chip may use, and every type class.

get_color_tokensget_typographyget_icons_guide

Rules, with a validator

The hard rules and why they exist, which component replaces each raw element, and a checker that flags violations by line.

get_hard_rulesget_element_mappingvalidate_code

Also get_app_setup for bootstrapping an app, get_docs for links to these pages and get_full_guide for everything in one document. The Tool reference lists them live.

Connect

Add it to your assistant

This site serves the server at one Streamable HTTP endpoint, so there is nothing to install. Editors that launch local processes can run it over stdio from a checkout instead.

Endpoint

The same deployment serves these pages and the endpoint.

Run it once. --scope user makes the server available in every project on this machine.

Terminal

claude mcp add camelot --scope user --transport http /mcp

Or run it locally over stdio

claude mcp add camelot --scope user -- node /path/to/camelot/packages/camelot-mcp/dist/server.js --stdio

Where to start

Two calls that prevent most mistakes

Call get_hard_rules before writing any UI. The list is short, and most review comments on a screen trace back to one of these rules.
Call compare_components when two components look alike, such as Select and SegmentedControl or Chip and PriorityMark. It answers from both components' use-instead guidance.

In between, search_components finds a component by purpose, get_component_details gives its props before it is used, and validate_code checks the result before the work is called done.

The server sends the same order to the assistant as its instructions when it connects. Try any call on Try it out.

This server

Connecting to the endpoint.

Status: Connecting
Server: —
Protocol: —
Tools: —
Transport: HTTP, stateless · stdio

Run it

Run it locally

From the repo root. The site serves these pages and the endpoint; the standalone server serves the same tools to editors and self-hosted setups.

Docs site and endpoint

npm install
npm run dev

Standalone server

npm run catalog -w @puckoops/camelot-mcp
npm run build -w @puckoops/camelot-mcp
npm start -w @puckoops/camelot-mcp

npm run dev serves the endpoint at http://localhost:3030/mcp. The standalone server serves HTTP on port 8787 with GET /health beside it, and node packages/camelot-mcp/dist/server.js --stdio runs it for an editor that starts the server itself.

Variable	Default	What it does
PORT	8787	HTTP port.
HOST	all interfaces	Interface to bind, such as 127.0.0.1.
DOCS_URL	http://localhost:3030	Base of the docs links in responses.
CORS_ORIGIN	*	Allowed browser origin.
CATALOG_PATH	packages/camelot-mcp/data/catalog.json	The generated catalogue the server reads.
MCP_TRANSPORT	http	stdio does the same as --stdio.

6 environment variables of the standalone server