Usage with AI

Marigold can feed its documentation directly to AI coding assistants, so agents like Claude Code or GitHub Copilot can look up component APIs, usage guidelines, and code examples instead of guessing. There are three ways to give a model access to the docs: the MCP server, the public manifest and markdown endpoints, and the CLI. On top of that, a set of Reservix AI helpers wrap Marigold-specific workflows. This page also covers prompting tips and the limitations of the integration.

Setup

Pick whichever access path fits your tool. The MCP server gives an agent semantic search. The manifest and markdown endpoints work in any tool with no setup or auth. The CLI is handy from the terminal and in agent workflows.

MCP server

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.

{
  "mcpServers": {
    "marigold-docs": {
      "type": "http",
      "url": "https://www.marigold-ui.io/mcp",
      "oauth": {
        "clientId": "dst-marigold-docs-mcp",
        "callbackPort": 6749
      }
    }
  }
}

claude mcp add marigold-docs \
  --transport http \
  --client-id dst-marigold-docs-mcp \
  --callback-port 6749 \
  https://www.marigold-ui.io/mcp

{
  "servers": {
    "marigold-docs": {
      "type": "http",
      "url": "https://www.marigold-ui.io/mcp"
    }
  }
}

Once connected, the agent searches the docs on its own when you ask a question or instruct it while coding. You can ask direct questions like "What props does Select accept?" or steer it, for example: "Use the marigold-docs MCP to check how I should implement this DatePicker."

Manifest and direct ingestion

The docs are also published as plain, public assets that work in any AI agent (Cursor, ChatGPT on the web, and so on). No setup, no authentication.

• Manifest: https://www.marigold-ui.io/manifest.json is a machine-readable index of every component and guide page, with each entry's name, slug, category, description, and markdown url. Drop the manifest URL into a chat to give a model the full doc index in one shot, then let it pull the pages it needs.
• Single page as markdown: append .md to any docs URL to get the raw markdown for that page. For example, https://www.marigold-ui.io/components/actions/button.md returns the full Button documentation as plain text. Each manifest entry's url already points at the .md path, relative to the manifest's baseUrl.

CLI

The @marigold/cli package pulls the same documentation into your terminal. It is useful on its own and inside AI agent workflows. Install it globally, add it as a dev dependency, or run it one-off with npx:

npm install -g @marigold/cli   # global
pnpm add -D @marigold/cli       # dev dep
npx @marigold/cli docs Button   # one-off

Requires Node 22 or newer.

# Structured prop data (recommended for AI agents)
marigold docs Select --section props --format json

# Discover components
marigold list --category form
marigold list --search date

marigold docs <Component>, marigold list, and marigold init (set up Marigold in an existing project) are the core commands. For AI use, prefer --format json with --section props, which returns a structured payload instead of formatted markdown. The CLI caches responses for 24h and works offline with --offline. See the CLI page for the full command reference, or jump straight to usage with AI agents.

Prompting tips

A few habits get noticeably better results when working with Marigold specifically:

1. Say "Marigold". Mention "Marigold" or @marigold/components by name. Without it, models default to MUI, Chakra, or shadcn patterns that don't apply here.
2. Nudge the MCP when it's quiet. If the agent isn't searching the docs on its own, tell it to: "use the marigold-docs MCP to look this up." Most agents auto-invoke it, but an explicit hint reliably triggers a lookup.
3. Name the component. Reference components directly (Select, TextField, DatePicker) rather than describing them. Exact names produce sharper documentation hits.
4. Don't trust default prop names. Marigold renames several react-aria props: isDisabled becomes disabled, isPending becomes loading, and className / style are intentionally not exposed (theming goes through variant and size). This is the single thing AI gets wrong most often, so verify props against the docs.

Reservix AI helpers

rx-ai-suite is the internal Claude Code plugin marketplace. Once installed, it adds agents and skills that already know about Marigold, so you don't have to spell out the conventions each time. The design-system-relevant helpers live in the rx-frontend plugin:

• frontend-dev agent: builds React/TypeScript UI and keeps it compliant with Marigold (and RUI) conventions. Example: "Verify this component matches Marigold conventions."
• design-system skill: Marigold and RUI guidance for migrating and modernizing UI. Examples: "Migrate this legacy CSS / inline-styled component to Marigold." or "Apply RUI styling and spacing conventions to this TWIG page."
• create-marigold-app skill: scaffolds a fresh Marigold app from the starter template. Example: "Scaffold a new prototype app."

The rx-baseline plugin offers adjacent general-purpose helpers (planning, refactoring) that pair well with the design-system ones.

Limitations

A few things the integration can't do:

1. It searches docs, not source code. The MCP indexes the documentation site, not the component source. Implementation details that aren't documented won't surface.
2. The index is a build-time snapshot. Both the MCP index and the manifest / .md assets are generated when the docs are built and refresh on each docs deploy. Edits to the docs won't show up until the site redeploys.
3. It's search, not generation. The MCP returns relevant documentation chunks, and the agent writes the code from them. Treat its output like any AI-generated code and review it.

If something looks wrong or you have suggestions, ping #design-system or #cop_ai_coding in Slack.