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.