Systra Tools
Search and pull 500+ production-ready React + Tailwind sections and elements
Installation
Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).
claude mcp add --transport http systra-tools 'https://systra.tools/api/mcp' --header 'Authorization: <Bearer token. Create a key at https://systra.tools/mcp>'{
"mcpServers": {
"systra-tools": {
"type": "http",
"url": "https://systra.tools/api/mcp",
"headers": {
"Authorization": "<Bearer token. Create a key at https://systra.tools/mcp>"
}
}
}
}Documentation
Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.
Systra Tools
620+ production-ready React + Tailwind sections and elements,
searchable by your coding agent over MCP.
Your AI can code. It just has no taste. This plugin gives it a source of finished UI instead of another purple gradient: 37 categories, 18 page recipes, and a style extractor that recolours any component to match a real brand. Everything is React, TypeScript and Tailwind with no runtime dependency, so once a component lands in your project it is your code.
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 roesmannamelie-alt/systra-tools-plugin
/plugin install systra-tools@systraVS 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 | 37 categories with counts |
list_components, search_components | find a section by intent |
get_component | the full source |
list_recipes, get_recipe | an ordered page, 18 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.
MIT for the configuration in this repository. The library is licensed separately, see systra.tools.
Questions fréquentes
Qu'est-ce que Systra Tools ?
Search and pull 500+ production-ready React + Tailwind sections and elements
Comment installer Systra Tools ?
Il fonctionne comme serveur distant. Dans Claude Code : claude mcp add --transport http systra-tools 'https://systra.tools/api/mcp' --header 'Authorization: <Bearer token. Create a key at https://systra.tools/mcp>'. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.
Faut-il une clé API pour Systra Tools ?
Oui. Il attend Authorization, à renseigner dans sa configuration.
Systra Tools est-il open source ?
Son code est public sur GitHub, mais le dépôt ne déclare pas de licence standard.
Qui maintient Systra Tools ?
Il est publié par roesmannamelie-alt. AI.tn le référence sans le maintenir ni le recommander.
Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.