Systra Tools
用于动画 React 和 Tailwind CSS 区块库的远程 MCP 服务器。编码代理可以按类别或关键词搜索、获取单文件组件源码、应用提取的品牌样式，并拉取完整的页面方案。免费示例组件无需密钥即可使用；完整组件库需要 Premium 密钥。
托管 MCP 服务器
npx add-mcp 'https://systra.tools/api/mcp'可安装到 Claude Code、Codex、Cursor 等客户端
文档
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
Search⌘K
Home All sections Website templates Navigation GSAP sections
Hero & Intro
Features & Content
Features Bento Process Stats Dashboard AI
Conversion
Trust & Media
Trust Team & Careers Gallery Blog
Closing
Elements
Typography Buttons Interactions Scroll effects Page Transition
Tools
© 2026 Systra Tools
Tools
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
- 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 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.
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.
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.
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
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