English Français العربية

Systra Tools

السجل الرسمي البحث والويب

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

الشيفرة المصدرية الموقع التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

Remote (streamable-http)
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>'
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "systra-tools": {
            "type": "http",
            "url": "https://systra.tools/api/mcp",
            "headers": {
                "Authorization": "<Bearer token. Create a key at https://systra.tools/mcp>"
            }
        }
    }
}

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. Systra Tools
  2. Install
  3. Your key
  4. What the agent gets
  5. What is in this repository

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@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

ToolWhat it does
list_categories37 categories with counts
list_components, search_componentsfind a section by intent
get_componentthe full source
list_recipes, get_recipean ordered page, 18 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.

MIT for the configuration in this repository. The library is licensed separately, see systra.tools.

الأسئلة الشائعة

ما هو Systra Tools؟

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

كيف أثبّت Systra Tools؟

يعمل كخادم بعيد. في 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>'. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج Systra Tools إلى مفتاح API؟

نعم. يتطلب Authorization، وتضبطها في إعداداته.

هل Systra Tools مفتوح المصدر؟

شيفرته علنية على GitHub، لكن المستودع لا يعلن ترخيصًا قياسيًا.

من يصون Systra Tools؟

ينشره roesmannamelie-alt. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.