Systra Tools

Systra Tools

620+ 个可用于生产环境的 React + Tailwind 区块和元素，
可供编码 Agent 通过 MCP 搜索。

---

Systra Tools 是一个包含 620+ 个 React 和 Tailwind 区块及元素的库： 主视觉区、定价表、便当网格、仪表板、页脚等。本仓库通过 MCP 将它连接到你的编码 Agent，让 Claude、Cursor 或 VS Code 可以搜索 该库，并将一个区块作为单个 TSX 文件添加到你的项目中。

每个组件仅导入 react、framer-motion 和 lucide-react，并支持减少动态效果。 无需密钥即可获取 6 个组件。使用 https://systra.tools/mcp 上的 Premium 密钥即可解锁整个库、图片库和页面配方。

安装

Cursor

点击上方按钮，或从 cursor.directory 添加插件，或在 ~/.cursor/mcp.json 中手动配置：

{
  "mcpServers": {
    "systra-tools": {
      "url": "https://systra.tools/api/mcp",
      "headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" }
    }
  }
}

Claude Code

/plugin marketplace add systra-tools/systra-tools-plugin
/plugin install systra-tools@systra

VS Code、Windsurf 及其他支持 MCP 的工具

将 HTTP MCP 服务指向 https://systra.tools/api/mcp，并将密钥作为 Authorization: Bearer <key> 发送。

你的密钥

在 systra.tools/mcp 创建密钥，并将其设置为 环境变量 SYSTRA_MCP_KEY。免费账户可使用有限的一组组件，完整访问权限 需要 Premium。请勿提交密钥。

Agent 可用的功能

工具	功能
list_categories	25 个类别及其数量
list_components、search_components	按用途查找区块
get_component	完整源代码
list_recipes、get_recipe	按顺序排列的页面，共 23 个配方
list_styles、get_style、get_component_styled	查看应用真实品牌配色和字体的同一组件
list_images、search_images	带永久 URL 的图片
list_posts、get_post	社交帖子模板

最大的类别：元素（78）、主视觉区（76）、功能（38）、交互 （29）、图库（25）、GSAP（22）、统计（22）、信任（19）、仪表板（18）。

本仓库包含什么

一条规则、两个技能和 MCP 配置。插件仅此而已。组件库本身托管在 MCP 服务后端。

许可证

本仓库中的配置采用 MIT 许可证。通过 MCP 服务获取的组件采用单独的 许可证，详见 https://systra.tools/terms。