ReactFrame

本地服务

reactframe.com开发工具15 周前更新

代码仓库访问官网

关于 ReactFrame

ReactFrame 的 MCP 服务让编码 Agent 搜索 React、Tailwind CSS 和 Motion 组件、区块及页面目录。它可获取免费项目源码，并为高级项目提供报价。

主要功能

01按关键词搜索并筛选类别和类型
02获取免费组件的完整源码
03获取组件重建提示词
04查看类别及项目数量
05为免费和高级项目生成报价

适用场景

01为网站设计查找组件
02将免费组件源码安装到项目
03核算构建所用高级组件的价格
04比较高级项目总价与 All-Access

MCP 相关

该 MCP 服务向 MCP 客户端提供目录搜索、免费组件源码获取、重建提示词、类别列表和价格报价工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

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

启动命令npx -y reactframe-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmreactframe-mcp0.2.1stdio

工具

收录的工具列表 · 更新于 3 周前

参数	类型	必填	说明
type	enum	否	将结果限制为一种条目类型。element \| block \| component \| page
limit	integer	否	要返回的最大结果数（默认值为 25）。
query	string	否	自由文本搜索词，例如 "carousel" 或 "pricing table"。省略则广泛列出，并按其他参数筛选。
category	string	否	将结果限制为完全匹配的类别名称，例如 "Charts" 或 "Navigation"。
freeOnly	boolean	否	若为 true，则仅返回免费组件（具有可获取的 r/<slug>.json 的组件）。

详细介绍

reactframe-mcp

适用于 ReactFrame 的 MCP（模型上下文协议）服务，可将免费 React + Tailwind CSS + Motion 组件、区块和页面的完整源代码直接搜索并拉取到编码 Agent 中，无需往返浏览器。

它封装了与 reactframe.com/llms.txt 相同的公开数据，以及 r/<slug>.json 注册表镜像（shadcn 的 CLI 已在使用）。免费组件可直接安装到项目中。高级组件会在搜索结果中显示价格；此处无法获取其源代码，因此 Agent 会留下占位内容，并使用 get_quote 查询价格。

使用它构建网站

可以向 Agent 提出类似这样的要求：“用 ReactFrame 组件为我的咖啡店搭建一个落地页。” 它会从目录中挑选组件，安装免费组件，标记高级组件的位置，最后提供报价：设计中使用了哪些高级组件、它们的价格，以及 All-Access 是否更划算。

工具

search_components — 按名称／描述／类别／slug 搜索关键词，并支持 category、type（element／block／component／page）和 freeOnly 筛选。高级组件结果会包含价格。
get_component — 按 slug 获取免费组件的完整源代码（文件、npm 依赖项、安装命令），格式为 shadcn 注册表格式。
get_rebuild_prompt — 获取随免费组件提供的现成 AI 提示词，用于“从头开始重建此组件”。
list_categories — 列出所有类别及组件／页面数量，便于在定向搜索前查看。
get_quote — 一次性为构建中使用的所有组件和页面估价：免费项目及其安装命令、高级项目及其价格、高级项目总价，以及 All-Access 是否更划算。

添加到 Claude Code

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

添加到 Cursor／其他 MCP 客户端

将其添加到 MCP 配置中（例如 ~/.cursor/mcp.json）：

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

本地开发

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

REACTFRAME_BASE_URL 可覆盖默认值 https://reactframe.com；迭代开发时，可将其指向主应用运行 npm run dev 的本地地址。npm run test:tools 会通过 stdio 启动构建好的服务，使用真实的 MCP SDK 客户端调用每个工具，方式与真实客户端相同。

支持 Markdown

登录后评论