Systra Tools

npx add-mcp 'https://systra.tools/api/mcp'

Skip to content

We respect your privacy

We always use necessary storage. Only with your consent do we add analytics (Google Analytics) and marketing (Meta pixel), both with cookies. More in the privacy policy.

Accept allOnly necessaryCustomize

Systra Tools. To home

Search⌘K

Home All sections Website templates Navigation GSAP sections

Hero & Intro

Hero Intro About Coming Soon

Features & Content

Features Bento Process Stats Dashboard AI

Conversion

CTAs Pricing Comparison Forms

Trust & Media

Trust Team & Careers Gallery Blog

Closing

FAQ Footer Error page

Elements

Typography Buttons Interactions Scroll effects Page Transition

Tools

Style Extractor Resources MCP

Sign in

© 2026 Systra Tools

Systra Tools. To homepage

Sections Elements

Templates

Tools

Pricing FAQ

Sign in Browse free sections

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

1

Connect

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

2

Ask

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

3

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

Copy

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

1. 1Create an account or sign in. Use the same email address as for the purchase.
2. 2Buy Lifetime or a subscription. Payment runs through Lemon Squeezy.
3. 3Access is granted automatically and you get an email with a sign-in link.
4. 4Generate your personal key here on this page.
5. 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 CodeClaudeCursorVS CodeAGENTS.mdWindsurf

Claude Code

Terminal

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

As a plugin, with skills and rules included. Both lines go into Claude Code.

/plugin marketplace add systra-tools/systra-tools-plugin
/plugin install systra-tools@systra

Copy

Or just the server, without the plugin:

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

Copy

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.

Search

The assistant knows every section and element in the library, with its category. ### Fetch code ### Suggest

Brand look ### Page recipes ### Images

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.

Sign in

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

Invalid API key

The key is mistyped or was replaced by a newer one. Generate it again here and paste it once more.

Premium access required

The key belongs to an account without active premium. Check in your account whether the purchase arrived.

Account not connected

No key was sent. The server then answers with the free content only.

MCP server unreachable

Your editor cannot reach the URL. Usual causes: a typo in the URL, a proxy or a firewall.

Rate limit reached

Too many requests in a short time. Wait a minute and it continues.

FAQ

Frequently asked questions

What is MCP access?

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 connect Systra Tools to Claude on the web, in the desktop app or in Cowork?

Under Settings, Connectors, add a custom connector with the address https://systra.tools/api/mcp and click Connect. Then sign in with your Systra account and allow access. You do not need a key there; Premium is recognised through the account.

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.

Didn't find your question? We're happy to help.

Get in touch

Ready to
keep building?

Get full access to the library and use every component in your projects right away.

Unlock premium

Sections

Elements

Tools

Studio

Newsletter

New components and sections as soon as they launch. No spam.

Email address for the newsletter

You will get a confirmation email. Privacy

© 2026 Systra Tools. All rights reserved.

Legal notice Privacy Terms Cancel contracts WithdrawalCookie settings Instagram

deen

Sections

• All sections
• Templates
• Free components
• Hero
• Features
• Pricing
• Trust
• FAQ

Elements

• Typography
• Buttons
• Interactions
• Scroll effects
• Navigation

Tools

• Style Extractor
• Resources
• Post templates
• Easings
• MCP access

Studio

• About us
• Guides
• Comparison
• Showcase
• FAQ
• Submit a component
• Systra Studios

Newsletter

New components and sections as soon as they launch. No spam.

Email address for the newsletter

You will get a confirmation email. Privacy

© 2026 Systra Tools. All rights reserved.

Legal notice Privacy Terms Cancel contracts WithdrawalCookie settings Instagram

deen