Systra Tools

tools.systra由 systra.tools 发布官方发布者v1.0.0更新于 Nov 2, 2026

Search and pull 500+ production-ready React + Tailwind sections and elements

已验证Streamable HTTP可网页运行开发者工具媒体与设计

概览

AI 生成的概览

远程 MCP 服务器，让编程助手搜索 React 与 Tailwind 区块库，并获取可直接复制的 TSX 源码、品牌样式、图片和页面配方。

可以做什么
  • 按分类或关键词浏览和搜索组件库，并获取区块的完整 React/TSX 源码
  • 列出已提取的品牌样式及其设计令牌、CSS 变量和 DESIGN.md，或获取按某样式适配的组件
  • 列出并搜索 AI 生成的图片库，返回永久有效的 URL
  • 列出 Instagram 帖子模板，并获取其 HTML 文件、导出脚本和修改规则
  • 列出精选页面配方，并获取区块顺序及每个区块的完整源码，可选套用品牌样式
适用场景
适合在用 React 和 Tailwind 搭建落地页或营销站点时，让助手直接插入现成区块、套用真实品牌的配色与字体，或按精选配方拼出完整页面。
运行要求
需要远程 HTTP MCP 端点，无需本地安装包。声明需要 Authorization bearer 令牌，但 README 称密钥可选，不带密钥只能获取免费示例组件。Premium 密钥需在提供方网站创建，并以环境变量 SYSTRA_MCP_KEY 提供。
安装前请注意
bearer 令牌属于凭据，README 也提醒不要提交到代码库。Premium 密钥为付费订阅，用于解锁完整组件库、图片和配方。获取的组件与配方源码属于第三方代码，加入项目前应先审查。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Systra Tools，将其添加到工作区。
  2. 连接 Authorization token 凭据。它们会被私密存储，绝不会在公开页面上展示。
  3. 为需要使用其工具的对话启用该服务。

Web executable，通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

交给智能体安装

把这段提示词粘贴到 Claude Code、Codex、Cursor 等智能体，或 SourceWeft 对话中。智能体会读取该服务器的安装指南，先向你展示发布者、端点和登录方式，经你同意后再把它添加到你的客户端。密钥不会写进任何命令。

阅读 https://sourceweft.com/mcp/tools.systra%2Fsystra-tools/install.md，并按其中说明把这个 MCP 服务器接入我的客户端。修改任何配置之前，先告诉我它的发布者、端点和登录方式，等我确认。不要把 API 密钥写进命令或我会提交的文件；问我密钥应从哪里获取。

查看智能体所依据的安装指南

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "mcpServers": {
    "systra-tools": {
      "type": "http",
      "url": "https://systra.tools/api/mcp",
      "headers": {
        "Authorization": "Bearer <YOUR_TOKEN>"
      }
    }
  }
}

README

[Systra Tools]

Systra Tools

620+ production-ready React + Tailwind sections and elements,
searchable by your coding agent over MCP.

[Add systra-tools to Cursor]

Systra Tools is a library of 620+ React and Tailwind sections and elements: heroes, pricing tables, bento grids, dashboards, footers and more. This repository connects it to your coding agent over MCP, so Claude, Cursor or VS Code can search the library and drop a section into your project as a single TSX file.

Every component imports only react, framer-motion and lucide-react and respects reduced motion. Six components can be pulled without a key. A Premium key from https://systra.tools/mcp opens the whole library, the image library and the page recipes.

Install

Cursor

Click the button above, or add the plugin from cursor.directory, or configure it by hand in ~/.cursor/mcp.json:

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 and anything else that speaks MCP

Point an HTTP MCP server at https://systra.tools/api/mcp and send your key as Authorization: Bearer <key>.

Your key

The key is optional. Without one the agent gets the free sample components. For the full library, create a Premium key at systra.tools/mcp and put it in the environment as SYSTRA_MCP_KEY. Do not commit the key.

What the agent gets

ToolWhat it does
list_categories25 categories with counts
list_components, search_componentsfind a section by intent
get_componentthe full source
list_recipes, get_recipean ordered page, 23 recipes
list_styles, get_style, get_component_styledthe same component in a real brand's colours and fonts
list_images, search_imagesimagery with permanent URLs
list_posts, get_postsocial post templates

Largest categories: elements (78), heroes (76), features (38), interaktiv (29), gallery (25), gsap (22), stats (22), trust (19), dashboard (18).

What is in this repository

A rule, two skills and the MCP configuration. That is all a plugin is. The component library itself lives behind the MCP server.

License

The configuration in this repository is MIT licensed. The components you pull through the MCP server are licensed separately, see https://systra.tools/terms.

来源：README.md，提交 32b7db7

工具

13

list_categories

Lists every category of Systra Tools with the number of components in it.

无需输入参数。

list_components

Lists components of the library. Optionally filtered by category slug ('heros', 'forms', 'cta').

输入参数category

search_components

Searches components by a keyword in the name or the category and returns the matches.

输入参数query必填

get_component

Returns the complete, copy-ready React/TSX source of a component by its name.

输入参数name必填

list_styles

Lists the brand styles extracted with the style extractor (colours and fonts of real websites) that can be applied to components.

无需输入参数。

get_style

Returns every design token of an extracted brand style: colours, typography, CSS variables and the generated DESIGN.md.

输入参数slug必填

get_component_styled

Returns a component together with the design tokens of a brand style and precise instructions for adapting it, so the component lands directly in your own brand look.

输入参数name必填style必填

list_images

Lists the images of the Systra Tools media library (all AI-generated) with ready, permanently valid URLs to drop straight in. Optionally filtered by album and format, 100 per page.

输入参数pagealbumformat

search_images

Searches the media library (all images AI-generated) by keywords in the title, the tags, the file name or the album and returns ready URLs, 100 per page.

输入参数pagequery必填

list_posts

Lists the Instagram post templates of Systra Tools (1080 x 1350). Every template is a single HTML file that can be rebuilt and exported as an image or a video.

输入参数family

get_post

Returns a post template as a complete set of working instructions: the HTML file, the export script and the rules on what may be changed. With it the post can be rebuilt and rendered directly.

输入参数langslug必填

list_recipes

Lists curated page recipes: sensible sequences of sections for complete landing pages (SaaS, coaching, hotel and so on).

无需输入参数。

get_recipe

Returns a page recipe: the sequence of sections with the purpose of each one and the complete source of every section. Optionally in the look of a brand style.

输入参数name必填style

版本历史

1
  1. v1.0.0最新Sep 16, 2026

评分

已满足适用检查项的 100%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通必需25 分
  • 已声明认证方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分