# Systra Tools [Verified owner] [Health: Active]

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/roesmannamelie-alt/systra-tools-plugin  
**GitHub Stars:** 0  
**Views:** 3  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/systra-tools

## Description
Search and pull production-ready React and Tailwind sections and elements into your project over MCP. Free components work without a key.

## Tools
Capabilities this server exposes over MCP:

- **list_categories** — Lists every component category of the Systra Tools library with its slug, its title and how many components it holds. Start here when the user names a kind of page part (hero, pricing, footer) instead of a component, then pass the slug to list_components. No parameters, works without a key.
- **list_components** — Lists component names, optionally limited to one category, one line each with the name and the category slug. Use it to browse a category before choosing; use search_components instead when you already have a keyword. Returns names only, no source: fetch the code with get_component. Works without a key; without one, the components whose source is free are marked "free".
- **search_components** — Finds components whose name or category contains the search term (one term, case-insensitive substring match) and returns their names with the category slug. Use it when you know roughly what you need, such as 'pricing', 'marquee', 'testimonial' or 'countdown'; use list_components to see a whole category. Names are English PascalCase, so short English words match best. Follow up with get_component for the source.
- **get_component** — Returns the complete, copy-ready React/TSX source of one component as designed, plus notes on its images and any extra files it needs. Components use Tailwind CSS classes and import react, framer-motion and lucide-react; a few also need gsap or three, which the response names with the install command. Use it once you know the exact name; use get_component_styled instead when the component should take on an extracted brand style. Without a premium key, source comes back for the free components, the first six of every category, which list_components and search_components mark as "free"; other names return a notice on how to get a key.
- **list_styles** — Lists the brand styles extracted from real websites with the Systra style extractor: slug, site name, primary and accent colour and heading font. Pass query to search by site name, domain, colour or font, for example 'bakery' or 'Inter'. Use it to find a slug for get_style, get_component_styled or get_recipe. Works without a key.
- **get_style** — Returns every design token of one extracted brand style: colours, font families and sizes, spacing, radii, CSS variables and the generated DESIGN.md (up to 4000 characters). Use it to theme your own code or set up a design system; use get_component_styled when you want one specific component already paired with the style.
- **get_component_styled** — Returns one component's source together with the tokens of a brand style, step-by-step instructions for mapping the component's colours, fonts and radii onto that style, and the colour values the component uses today. Use it instead of get_component when the result should match a specific brand. The server does not rewrite the code; you apply the mapping. Same premium rule as get_component.
- **list_images** — Lists images and a few videos from the Systra Tools media library (all AI-generated), each with a permanent URL to use directly as src, plus title, album and format. Filter by album and format, 100 per page. Use it to browse an album; use search_images to find a motif by keyword. Without a premium key only the free images are returned, three per album.
- **search_images** — Finds images in the media library (all AI-generated) whose title, tags, file name or album contain every word of the query, and returns their permanent URLs, 100 per page. Use it for a motif, such as 'red dress', 'laptop desk' or 'misty forest'; use list_images to browse a whole album. Titles and tags are English, album keys German. Without a premium key only the free images are included.
- **list_posts** — Lists the Instagram post templates (1080 x 1350) with slug, name, family and whether they need your own imagery. Each template is a single HTML file that can be rebuilt and exported as an image or a video. Pass query to search by name or purpose, for example 'quote' or 'statistic'. Use it to pick a slug for get_post.
- **get_post** — Returns one post template as working instructions: the full HTML file, an export script to render it locally as PNG or video, and the rules on what may be changed. The server renders nothing; you edit and export the file. Use it after list_posts.
- **list_recipes** — Lists curated page recipes: proven section sequences for complete landing pages (for example SaaS, coaching or a hotel), each with its number of sections and a short purpose. Pass query to search by industry, purpose or section, for example 'hotel' or 'pricing'. Use it when the user wants a whole page rather than one section, then call get_recipe.
- **get_recipe** — Returns one page recipe: the ordered sections with the purpose of each, a composition file where available, and the full source of every section. Pass style to add brand tokens and adaptation instructions. Without a premium key, sections that are not free are named but their source is held back. The answer is long because it contains several complete components.

## Claude Desktop Quick Installation
No generated config for this server: it installs through its own setup steps.

The project's own setup steps (from https://systra.tools/mcp), copied verbatim. Run them in order; they are not an mcpServers config.

1. Add to Claude Code:

```sh
claude mcp add --transport http systra https://systra.tools/api/mcp \
  --header "Authorization: Bearer systra_YOUR_KEY"
```

## Documentation

## What Systra Tools does

Systra Tools gives MCP-compatible coding agents access to a library of more than 620 React and Tailwind sections and elements, including heroes, pricing sections, dashboards, galleries, footers, and other page building blocks. It also exposes extracted brand styles, an AI-generated media library, Instagram post templates, and curated recipes for complete landing pages.

The component output is intended for direct use in a project. Components are supplied as React or TSX source and use Tailwind CSS classes, with imports limited to `react`, `framer-motion`, and `lucide-react`. Components respect reduced-motion preferences. Brand styling is returned as tokens and implementation guidance rather than being applied by the server automatically.

## How it works

The hosted MCP endpoint is available at `https://systra.tools/api/mcp`. An MCP client sends tool calls over HTTP, and the agent can follow a browse-then-fetch workflow:

- Call `list_categories` to inspect available section types.
- Use `list_components` for a category-wide name list or `search_components` for a keyword match.
- Call `get_component` after selecting an exact component name.
- Use `list_styles` and `get_style` to inspect extracted brand tokens, or `get_component_styled` to receive a component alongside mapping instructions.

The same pattern applies to media, posts, and page recipes. Search or list first, then retrieve the selected asset with `get_post` or `get_recipe`. A recipe can include ordered sections, optional composition data, and the source of each section. The post tool returns an HTML template and local export instructions; the server does not render the post itself.

## Setup and configuration

Configure an MCP client with the hosted URL and, when needed, an authorization header containing `SYSTRA_MCP_KEY`. In Cursor, the configuration uses an HTTP MCP entry with `https://systra.tools/api/mcp` and a bearer token sourced from the environment. Claude Code can install the plugin through its marketplace commands, while VS Code, Windsurf, and other MCP-capable clients can point an HTTP MCP connection at the same endpoint.

The key is optional for the free sample content. A Premium key from `systra.tools/mcp` unlocks the broader component library, image library, and page recipes. Store the key in the environment rather than committing it to a project. The repository's plugin configuration is MIT licensed; assets retrieved through the service have separate terms.

## Tools and capabilities

- `list_categories` reports category slugs, titles, and component counts.
- `list_components` lists component names, optionally within one category.
- `search_components` performs a case-insensitive substring search across component names and category slugs.
- `get_component` returns complete React/TSX source plus image and extra-file notes.
- `list_styles`, `get_style`, and `get_component_styled` expose extracted colors, fonts, spacing, radii, CSS variables, and adaptation instructions.
- `list_images` and `search_images` return permanent media URLs with metadata; filters include album and format.
- `list_posts` and `get_post` provide 1080 × 1350 HTML social templates and export guidance.
- `list_recipes` and `get_recipe` support complete page compositions, including section order and purpose.

Free access limits returned content. Component source is available for free components, including the first six in each category, while other component names can return a notice explaining how to obtain a key. Image browsing without a key returns free images, with three per album.

## Limitations and notes

`search_components` accepts one search term and matches English names and category text by substring, so short English terms are the most useful queries. Component discovery returns names; source retrieval requires a later `get_component` call. Styled components are not rewritten by the service: the caller applies the returned color, font, and radius mapping.

Page recipes may identify sections whose source is restricted when no Premium key is supplied. Image results are AI-generated, and post templates must be edited and exported locally. The media tool returns up to 100 items per page, and `get_style` limits the generated `DESIGN.md` content to 4,000 characters.

_Full upstream README: https://allmcps.com/mcp/systra-tools/readme_