Systra Tools

Remote MCP server for a library of animated React and Tailwind CSS sections. Coding agents can search by category or keyword, fetch a component's source as a single file, apply an extracted brand style and pull complete page recipes. Free sample components work without a key; the full library needs a Premium key.

systra.tools에서 보기

호스팅형 MCP 서버

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

Claude Code, Codex, Cursor 등에 설치됩니다

문서

How to set it up

Without an account and with premium

Try it for free

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

https://systra.tools/api/mcp

Activate premium

With your personal key the server returns the complete code.

  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.

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.

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

Or just the server, without the plugin:

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

What the assistant can do

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.