About Systra Tools
Systra Tools is a React and Tailwind component library for coding agents, searchable and retrievable through MCP. It also provides page recipes, brand styles, and image assets.
Key features
- 01Search 620+ components
- 02Retrieve TSX source
- 03Browse page recipes
- 04Get components in brand styles
- 05Search images and social posts
Use cases
- 01Add a hero or pricing section to a project
- 02Find dashboard components by intent
- 03Create components in a brand palette
- 04Locate image assets for a page
MCP support
The MCP server exposes tools for querying components, styles, recipes, images, and social posts. Some content is available without a key; full library access requires a Premium key.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://systra.tools/api/mcpclaude mcp add --transport http tools-systra-systra-tools https://systra.tools/api/mcp{"mcpServers":{"tools-systra-systra-tools":{"type":"http","url":"https://systra.tools/api/mcp"}}}Open in Cursor{"servers":{"tools-systra-systra-tools":{"type":"http","url":"https://systra.tools/api/mcp"}}}Open in VS Code{"mcpServers":{"tools-systra-systra-tools":{"type":"http","url":"https://systra.tools/api/mcp"}}}{"mcpServers":{"tools-systra-systra-tools":{"serverUrl":"https://systra.tools/api/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
https://systra.tools/api/mcpAuth requiredTools
13This tool takes no parameters.
Details
From the project README
Systra Tools
620+ production-ready React + Tailwind sections and elements,
searchable by your coding agent over MCP.
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:
{
"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
Create one at systra.tools/mcp and put it in the
environment as SYSTRA_MCP_KEY. A free account reaches a limited set of
components, full access needs Premium. Do not commit the key.
What the agent gets
| Tool | What it does |
|---|---|
list_categories | 25 categories with counts |
list_components, search_components | find a section by intent |
get_component | the full source |
list_recipes, get_recipe | an ordered page, 23 recipes |
list_styles, get_style, get_component_styled | the same component in a real brand's colours and fonts |
list_images, search_images | imagery with permanent URLs |
list_posts, get_post | social 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.
Comments
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.