Koskamo

Systra Tools MCP

An MCP server providing access to a library of 645 production-ready React, TypeScript, and Tailwind CSS UI components, styles, images, and social media templates. It allows agents to list categories, search for components, retrieve source code (TSX), extract styles, and access media assets via tools like list_components, get_component, and search_images.

Endpoint and access

No sign-in to connect and list tools. Individual tools may still need a vendor account, credentials, or permissions; check the documented prerequisites.

Systra Tools MCP logo, by Systra StudiosVendor evidenceStreamable HTTPNo sign-inEndpoint checked 2026-11-06Operated by Systra Studios
You need:Der MCP-Server liegt unter https://systra.tools/api/mcp und spricht MCP über HTTP. Ohne Key liefert er die freien Inhalte, mit Key den vollen Bestand.
MCP endpoint (Streamable HTTP)
https://systra.tools/api/mcp
Vendor documentation

What its tools do

13 tools, grouped by the hints the server advertises. Hints are self-declared, not verified behavior.

Read-only (13)

13 of 13 have a description · 13 of 13 declare behavior hints · 12 of 12 with parameters document them all

Checks and signals

Each line is separate evidence, not a trust score.

  • Passed Endpoint answered the live check ·
  • Passed Official MCP Registry namespace is tied to systra.tools ·
  • Passed Endpoint is on the registry namespace domain ·
  • Availability 1 of 1 checks passed in 30 days

What you can do with it

  • List available UI component categories and counts
  • Search for specific React components by purpose
  • Retrieve TSX source code for UI elements
  • Extract design tokens and styles from websites

Source and maintenance

Vendor evidenceRegistry 1.0.0
mcp-registry: tools.systra/systra-tools@1.0.0Source repositoryProject website
Maintenance checked

Protocol and capabilities

Server
systra-tools 1.0.0
MCP protocol negotiated in check
2025-11-25
Tools
13 advertised
Resources
Not advertised
Resource templates
Not advertised
Prompts
Not advertised
Server-advertised capabilities
{
  "tools": {
    "listChanged": false
  }
}

Server-provided instructions

Untrusted server output shown for inspection. It is not Koskamo guidance and is excluded from knowledge search.

Component library by Systra Tools. Find components with list_components and search_components, fetch the source with get_component. list_styles and get_component_styled return components directly in the look of an extracted brand, list_recipes and get_recipe complete page sequences. Without a premium key the source is open for the free components, the first six of every category; list_components marks them "free".

Tools

13 advertised

list_categories — List categories
Advertised by the server during the last successful anonymous check.
Advertised read-only

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_categories input schema
{
  "type": "object",
  "properties": {},
  "additionalProperties": false
}
list_categories annotations
{
  "title": "List categories",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
list_components — List components
Advertised by the server during the last successful anonymous check.
Advertised read-only

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

list_components input schema
{
  "type": "object",
  "properties": {
    "category": {
      "type": "string",
      "description": "Category slug from list_categories, e.g. 'heroes', 'cta', 'pricing', 'forms', 'footer'. Omit it to list every component (more than 600)."
    }
  },
  "additionalProperties": false
}
list_components annotations
{
  "title": "List components",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
search_components — Search components
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

search_components input schema
{
  "type": "object",
  "required": [
    "query"
  ],
  "properties": {
    "query": {
      "type": "string",
      "description": "One keyword or name fragment, e.g. 'hero', 'gallery', 'bento'. Matched against component names and category slugs and titles."
    }
  },
  "additionalProperties": false
}
search_components annotations
{
  "title": "Search components",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
get_component — Get component source
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

get_component input schema
{
  "type": "object",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "Component name as listed by list_components or search_components, e.g. 'OrbitGalleryHero'. Matching ignores case."
    }
  },
  "additionalProperties": false
}
get_component annotations
{
  "title": "Get component source",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
list_styles — List brand styles
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

list_styles input schema
{
  "type": "object",
  "properties": {
    "query": {
      "type": "string",
      "description": "Search term (optional). Every word must appear in the slug, site name, domain, colours or fonts. Without it, the 30 newest styles are listed."
    }
  },
  "additionalProperties": false
}
list_styles annotations
{
  "title": "List brand styles",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
get_style — Get brand style
Advertised by the server during the last successful anonymous check.
Advertised read-only

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_style input schema
{
  "type": "object",
  "required": [
    "slug"
  ],
  "properties": {
    "slug": {
      "type": "string",
      "description": "Style slug exactly as listed by list_styles."
    }
  },
  "additionalProperties": false
}
get_style annotations
{
  "title": "Get brand style",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
get_component_styled — Get component in a brand style
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

get_component_styled input schema
{
  "type": "object",
  "required": [
    "name",
    "style"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "Component name as listed by list_components, e.g. 'GradientHeroSection'."
    },
    "style": {
      "type": "string",
      "description": "Style slug exactly as listed by list_styles."
    }
  },
  "additionalProperties": false
}
get_component_styled annotations
{
  "title": "Get component in a brand style",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
list_images — List images
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

list_images input schema
{
  "type": "object",
  "properties": {
    "page": {
      "type": "integer",
      "minimum": 1,
      "description": "Page of the result, 100 images per page (optional, default 1)."
    },
    "album": {
      "type": "string",
      "description": "Album key (optional, German): verlaeufe, abstrakt, surreal, objekte, freisteller, natur, interior, essen, portraet, beauty, hochzeit, menschen, arbeitsplatz, business, industrie, gesundheit, sport, autos, luftfahrt, nachtleben. Without one, every album is returned."
    },
    "format": {
      "enum": [
        "landscape",
        "portrait",
        "square"
      ],
      "type": "string",
      "description": "Image format to filter by (optional)."
    }
  },
  "additionalProperties": false
}
list_images annotations
{
  "title": "List images",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
search_images — Search images
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

search_images input schema
{
  "type": "object",
  "required": [
    "query"
  ],
  "properties": {
    "page": {
      "type": "integer",
      "minimum": 1,
      "description": "Page of the result, 100 images per page (optional, default 1)."
    },
    "query": {
      "type": "string",
      "description": "One or more words; every word must match. E.g. 'gradient', 'laptop', 'red dress'."
    }
  },
  "additionalProperties": false
}
search_images annotations
{
  "title": "Search images",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
list_posts — List post templates
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

list_posts input schema
{
  "type": "object",
  "properties": {
    "query": {
      "type": "string",
      "description": "Search term (optional). Every word must appear in the slug, name, purpose or family. Can be combined with family."
    },
    "family": {
      "enum": [
        "klar",
        "editorial"
      ],
      "type": "string",
      "description": "Family to filter by (optional): 'klar' are calm informational posts, 'editorial' lives on the image and a serif face."
    }
  },
  "additionalProperties": false
}
list_posts annotations
{
  "title": "List post templates",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
get_post — Get post template
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

get_post input schema
{
  "type": "object",
  "required": [
    "slug"
  ],
  "properties": {
    "lang": {
      "enum": [
        "de",
        "en"
      ],
      "type": "string",
      "description": "Language of the instructions (optional, English by default)."
    },
    "slug": {
      "type": "string",
      "description": "Template slug as listed by list_posts."
    }
  },
  "additionalProperties": false
}
get_post annotations
{
  "title": "Get post template",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
list_recipes — List page recipes
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

list_recipes input schema
{
  "type": "object",
  "properties": {
    "query": {
      "type": "string",
      "description": "Search term (optional). Every word must appear in the slug, title, description or section names. Without it, every recipe is listed."
    }
  },
  "additionalProperties": false
}
list_recipes annotations
{
  "title": "List page recipes",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}
get_recipe — Get page recipe
Advertised by the server during the last successful anonymous check.
Advertised read-only

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.

get_recipe input schema
{
  "type": "object",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "Recipe slug as listed by list_recipes, e.g. 'saas-produkt' or 'hotel-stay'."
    },
    "style": {
      "type": "string",
      "description": "Style slug from list_styles (optional), to adapt the page to a brand."
    }
  },
  "additionalProperties": false
}
get_recipe annotations
{
  "title": "Get page recipe",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}

Prompts

Not advertised

No prompt definitions available.

Resources

Not advertised

No resource definitions available.

90-day uptime

A lightweight connection check about every six hours, sampled on hosts with many listings. It shows the server answered, not that its tools work.

Too few checks for a percentage yet (1 of 1 answered).

  1. 2026-11-07: 1 of 1 checks answered

30-day availability

Aggregated from read-only remote checks; this is not a tool-execution or security guarantee.

Successful checks
1 of 1 (100%)
Average latency
2320 ms
95th percentile latency
2320 ms

Maintenance history

Public check and source-refresh events. Editorial and ownership records remain private.

  • · probe · passed · 2320 ms · metadata changed · 13 tool(s)

Connect from your client

Each snippet registers the same endpoint; pick the client you use.

This server is operated by the named third party. Listing and endpoint checks are not an endorsement or a security audit. Review the operator's permissions, terms, and data handling before connecting. How listings are checked and corrected.

Claude Code

Run this once in a terminal. It registers the remote server. Use --scope project to write .mcp.json for the repo.
Claude Code configuration
claude mcp add --transport http systra-tools-mcp https://systra.tools/api/mcp

Codex

Run this once. Codex stores MCP servers in ~/.codex/config.toml (or .codex/config.toml in a trusted project).
Codex configuration
codex mcp add systra-tools-mcp --url https://systra.tools/api/mcp

Cursor

Merge this server into .cursor/mcp.json in your project, then enable systra-tools-mcp in your MCP settings.
Cursor configuration
{
  "mcpServers": {
    "systra-tools-mcp": {
      "url": "https://systra.tools/api/mcp"
    }
  }
}

Cline

Merge this into cline_mcp_settings.json (Cline → MCP Servers → Configure).
Cline configuration
{
  "mcpServers": {
    "systra-tools-mcp": {
      "type": "streamableHttp",
      "url": "https://systra.tools/api/mcp",
      "disabled": false
    }
  }
}

VS Code

Merge this server into .vscode/mcp.json. Use MCP: List Servers to start systra-tools-mcp and inspect its tools.
VS Code configuration
{
  "servers": {
    "systra-tools-mcp": {
      "type": "http",
      "url": "https://systra.tools/api/mcp"
    }
  }
}

Gemini CLI

Run this once. It writes .gemini/settings.json in the current project; pass --scope user for ~/.gemini/settings.json.
Gemini CLI configuration
gemini mcp add --transport http systra-tools-mcp https://systra.tools/api/mcp

Claude Desktop

Open Claude Settings > Connectors > Add custom connector, enter this server URL and enable it for the conversation. This is a manual remote-connector handoff, not a desktop JSON configuration.
Claude Desktop configuration
https://systra.tools/api/mcp

Windsurf

Merge this into ~/.codeium/windsurf/mcp_config.json, then refresh MCP in Cascade. Windsurf remote servers use serverUrl, not url.
Windsurf configuration
{
  "mcpServers": {
    "systra-tools-mcp": {
      "serverUrl": "https://systra.tools/api/mcp"
    }
  }
}

Let your agent find its tools

Find servers like Systra Tools MCP from your agent. Add Koskamo once to search the index for endpoints, access requirements, and client setup. Public discovery needs no key.

Connect Koskamo Explore workflows
See all 8,317

Do you run Systra Tools MCP?

Prove ownership with a DNS record, a well-known file, or your Official MCP Registry entry, and your edits publish immediately. Proofs are re-checked weekly; admins can still hide or remove a listing.

Claim this listing