mcpField
R
ReactFrame

ReactFrame

Local
reactframe.comDeveloper Tools1Updated 5w ago
RepositoryVisit website

About ReactFrame

ReactFrame's MCP server lets coding agents search a catalog of React, Tailwind CSS, and Motion components, blocks, and pages. It retrieves free source and provides pricing quotes for premium selections.

Key features

  1. 01Search by keyword with category and type filters
  2. 02Fetch full source for free components
  3. 03Retrieve component rebuild prompts
  4. 04Browse categories and item counts
  5. 05Quote free and premium selections

Use cases

  1. 01Find components for a site design
  2. 02Install free component source into a project
  3. 03Check premium component prices for a build
  4. 04Compare a premium total with All-Access

MCP support

The MCP server exposes catalog search, free component source retrieval, rebuild prompts, category listings, and pricing quotes to MCP clients.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "ahmetloca-reactframe": {
      "command": "npx",
      "args": [
        "-y",
        "reactframe-mcp"
      ]
    }
  }
}
Run commandnpx -y reactframe-mcp

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmreactframe-mcp0.2.1

Tools

5

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
typeenumNoRestrict to one kind of entry.element | block | component | page
limitintegerNoMax results to return (default 25).
querystringNoFree-text search term, e.g. "carousel" or "pricing table". Omit to list broadly, filtered by the other params.
categorystringNoRestrict to an exact category name, e.g. "Charts" or "Navigation".
freeOnlybooleanNoIf true, only return free components (the ones with a fetchable r/<slug>.json).

Details

From the project README

reactframe-mcp

An MCP (Model Context Protocol) server for ReactFrame — search and pull the full source of free React + Tailwind CSS + Motion components, blocks and pages directly into a coding agent, with no browser round-trip.

It wraps the same public data as reactframe.com/llms.txt and the r/<slug>.json registry mirror shadcn's CLI already uses. Free components install straight into your project. Premium components show up in search with their price; their source isn't fetchable from here, so the agent leaves a placeholder and prices them with get_quote instead.

Build a site with it

Ask your agent something like "Build me a landing page for my coffee shop with ReactFrame components." It picks components from the catalog, installs the free ones, marks where premium ones go, and ends with a quote: which premium components the design uses, what they cost, and whether All-Access is the better deal.

Tools

  • search_components — keyword search across name/description/category/slug, with category, type (element / block / component / page) and freeOnly filters. Premium results include their price.
  • get_component — fetch a free component's full source (files, npm deps, install command) in shadcn registry format, by slug.
  • get_rebuild_prompt — fetch the ready-made "rebuild this from scratch" AI prompt for the free components that ship one.
  • list_categories — list every category with component/page counts, useful before a targeted search.
  • get_quote — price every component and page a build uses in one call: free items with their install command, premium ones with their price, the premium total, and whether All-Access is cheaper.

Add it to Claude Code

claude mcp add reactframe -- npx -y reactframe-mcp

Add it to Cursor / other MCP clients

Add to your MCP config (e.g. ~/.cursor/mcp.json):

{
  "mcpServers": {
    "reactframe": {
      "command": "npx",
      "args": ["-y", "reactframe-mcp"]
    }
  }
}

Local development

npm install
npm run build
REACTFRAME_BASE_URL=http://localhost:3000 npm run test:tools

REACTFRAME_BASE_URL overrides the default https://reactframe.com — point it at a local npm run dev of the main app while iterating. npm run test:tools spawns the built server over stdio with the real MCP SDK client and calls every tool, the same way a real client would.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.