Use Framebrick with a coding agent

Framebrick has its own MCP server, https://framebrick.co/api/mcp (free, no account), and its animated components are a shadcn registry. The shadcn CLI and its MCP server already know how to search a registry, read an item and install it, so a coding agent can use Framebrick without anything of ours installed on your computer.

This was tested on 2026-10-05 with shadcn 4.21: the CLI’s search, view and add, and the MCP server’s search, view and add-command tools, all against the live registry.

The Framebrick MCP server

It searches our templates, components and page blocks with scored matching, reads the real props, returns the install command and plans a page from blocks. It is read-only: nothing is written to your project. Tested on 2026-10-05 with the official MCP TypeScript client (initialize, tool list and every tool).

claude mcp add --transport http framebrick https://framebrick.co/api/mcp

Other clients take the same URL in their MCP settings. The tools: search, get_template, get_component, get_block, install_command, plan_page and get_plans. The source of a page block is not returned: it comes from the blocks registry with a Pro or Ultimate token.

Set up the registry

1. In a Next.js or React project with Tailwind CSS 4 and shadcn/ui set up, add the registry to components.json:

   {
     "registries": {
       "@framebrick": "https://framebrick.co/r/{name}.json"
     }
   }

2. Connect shadcn’s MCP server. This writes the configuration for your client; restart the client afterwards.

   npx shadcn@latest mcp init --client claude

   The presets are claude, cursor, vscode, codex and opencode. For any other MCP client, add npx shadcn@latest mcp as a stdio server.

3. Add the Framebrick Agent Skills if you want the agent to follow our conventions (optional): curl -fsSL https://framebrick.co/install | node -.

Check that it works

Without the agent, the CLI shows what it will see:

npx shadcn@latest search @framebrick -q accordion
npx shadcn@latest view @framebrick/text-appear

With the agent, ask for something the registry has: “Add a headline whose words rise out of a blur to my hero, from @framebrick.” The agent should search, read the component and install it with npx shadcn@latest add @framebrick/text-appear.

What the agent can do

Tool (shadcn MCP)	What it does for Framebrick
search_items_in_registries	Finds components by what you describe, with a one-line summary of each
view_items_in_registries	Opens an item: its files and the packages it needs
get_item_examples_from_registries	Shows examples of the item in use
get_add_command_for_items	Returns the exact npx shadcn@latest add … command
get_audit_checklist	Gives the agent shadcn’s checklist to run after an install

Good to know

• Page blocks need a plan. The component registry is public. The page blocks come with a Pro or Ultimate plan: add @framebrick-blocks to components.json with an Authorization: Bearer ${FRAMEBRICK_TOKEN} header (your token is on your account page at framebrick.co/account), and the same CLI and MCP tools work on them. Without the token the registry answers 401 with a message saying what is needed.
• No account or key is needed for the components.
• Your code stays on your computer. The MCP server runs locally and asks framebrick.co for registry files, the same request shadcn add makes.
• [object Promise] in search results. shadcn 4.21’s search prints that where the add command should be. Use get_add_command_for_items, or write the command yourself: npx shadcn@latest add @framebrick/<name>.
• Plain text for agents. framebrick.co/llms.txt lists the store and framebrick.co/docs/llms.txt the documentation, in the format AI tools read.
• A Framebrick MCP server that also knows our templates and blocks is planned, without a date. The setup above keeps working when it arrives.