Usage with AI
How to connect AI coding assistants to the Marigold documentation using MCP.
Internal use only
This MCP server is intended for internal Reservix usage only.
Marigold offers an MCP (Model Context Protocol) server that lets AI coding assistants search the design system documentation on their own. When you build something with Marigold and use an AI coding agent like Claude Code or GitHub Copilot, the agent can automatically look up component APIs, usage guidelines, and code examples from the Marigold docs to give you accurate answers.
Setup
The marigold-docs MCP server provides semantic search over the full Marigold documentation. To connect it to your AI coding assistant, follow the instructions for your editor.
Reservix only
The marigold-docs MCP server is intended for internal Reservix usage only and requires authentication. On first use, you'll be asked to sign in with your Reservix account through OAuth.
Add a .mcp.json file in the root of your project. See the Claude Code MCP guide for more details.
{
"mcpServers": {
"marigold-docs": {
"type": "http",
"url": "https://www.marigold-ui.io/mcp",
"oauth": {
"clientId": "dst-marigold-docs-mcp",
"callbackPort": 6749
}
}
}
}Claude Code picks up this file automatically. Alternatively, you can add the server via the CLI:
claude mcp add marigold-docs \
--transport http \
--client-id dst-marigold-docs-mcp \
--callback-port 6749 \
https://www.marigold-ui.io/mcpOn first use, the server will ask you to authenticate through your browser.
Add a .vscode/mcp.json file in the root of your project. See the VS Code MCP guide for more details.
{
"servers": {
"marigold-docs": {
"type": "http",
"url": "https://www.marigold-ui.io/mcp"
}
}
}If you have GitHub Copilot or another MCP-compatible extension installed, the server will be available in agent mode automatically. VS Code handles the OAuth authentication flow for you.
How to use it
Once the server is connected, your AI agent can query the Marigold documentation automatically. When you ask a question, the agent searches the docs via the MCP server and uses the results to answer you. You can ask direct questions like "What props does Select accept?" or instruct the agent while coding, for example: "Use the marigold-docs MCP to check how I should implement this DatePicker."
This is especially useful during development. Instead of switching to the docs, you can tell your agent to look up the right way to use a component, check which props are available, or find code examples.
Best results
Be specific in your questions. "How do I add validation to a TextField?" will return better results than just "TextField".