Model Context Protocol

Your AI already knows every block.

Connect Claude Code, Cursor, Windsurf or Claude Desktop to the remote MCP server. It searches the registry, reads source, composes whole pages and returns the install command, so generated UIs use real, tested, animated blocks instead of hallucinated markup.

endpoint https://api.chocolateui.com/mcp

search_components

Find blocks and components by keyword, category, type or tier.

compose_page

Assemble navbar → sections → footer into a page.tsx from categories.

get_component

Full source, deps and install command for any item (Pro needs a key).

get_theme

The OKLCH theme CSS, so the AI styles the rest of your app to match.

get_install_command

Exact shadcn CLI command plus components.json config.

get_docs

Installation, theming, animation rules, CLI, licensing.

Connect in one minute

terminal

claude mcp add --transport http chocolate https://api.chocolateui.com/mcp \
  --header "Authorization: Bearer CHOC-XXXX-XXXX-XXXX-XXXX"

No key? Leave the header out: free items and all search tools still work, rate limited to 60 calls a minute. Pro keys and personal API tokens live in your dashboard.

Try this prompt

Build a landing page for an AI note-taking app using Chocolate UI.
1. list_categories
2. compose_page with navbar, hero, logos, feature, bento, testimonial, pricing, faq, cta, footer
3. get_component for each block and rewrite the copy props for my product
4. give me page.tsx and the install command