Through the Model Context Protocol you connect your AI editor directly to the library. Your assistant can search components and insert the source code without manual copying.

Which editors are supported?

Access works with all MCP-capable environments, including Claude Code, Cursor and VS Code. You add the server address once in the configuration.

How do I set up the MCP server?

You copy the provided configuration into your editor's settings and restart it. After that, searching and fetching components is available right in the chat.

Is my project data transmitted?

The server offers read-only access to the components. No content from your project is sent to the library.

MCP Server

The library in your editor.

No searching, no copy-paste. The assistant writes the perfect Tailwind components straight into your project.

Get the configuration Free or premium

In three steps

How to set it up

Connect

Add the MCP URL to your editor once. No login, no SDK.

Someone working at a computer, the light drawing trails.

Ask

Describe what you need in the chat. The assistant finds the right component.

Several interfaces layering up above the screen.

Drop in

The finished code lands in your project, animations included.

Access

Without an account and with premium

Try it for free

Add the URL and start. No login, no SDK, no key.

Every free section and element
Catalog search, previews and metadata
No account, no key, no install

https://systra.tools/api/mcp

Activate premium

With your personal key the server returns the complete code.

The full source of every component
All templates and the resource images
A personal key you can renew any time

1Create an account or sign in. Use the same email address as for the purchase.
2Buy Lifetime or a subscription. Payment runs through Lemon Squeezy.
3Access is granted automatically and you get an email with a sign-in link.
4Generate your personal key here on this page.
5Add the key as an Authorization header in your editor's configuration.

Setup

For your editor

The key travels as an Authorization header, never as part of the URL. The same configuration works without a key, the server then returns the free content only. It speaks the open MCP protocol over HTTP, so any editor with MCP support can connect.

Claude Code

Terminal

Run inside your project folder. The key travels as a header.

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

The assistant

What the assistant can do

The assistant knows every section and element in the library, with its category.

Returns the full, copy-ready source code including every variant.

Recommends the fitting component straight from your description.

Connects the Style Extractor with the library: components arrive in your brand's colors and fonts.

Delivers curated section sequences for whole landing pages, from SaaS to hotel, with source code.

Finds shots in the media library and puts ready URLs into the code. The addresses stay valid, there is nothing to download.

Hero with full-bleed photo

GiantWordmarkHeroHero

ContactSplitPanelContact

PricingScaleCardsPricing

Premium access

Your key to the whole library

To use the MCP Server in full for every component in the library, you need a personal API key from your premium account.

When something breaks

Error messages in your editor

Usually it is the key.

If it persists, drop us a line. Name your editor and the exact message, that speeds things up.

Report a problem

The library in your editor.