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

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

systra-tools