systra-tools

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

Related MCP server: ui-mcp

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

Largest categories: heroes (75), elements (77), features (37), interaktiv (28), gallery (24), gsap (22), stats (22), dashboard (18), trust (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.