MCP Server
The library in your editor.
No searching, no copy-paste. The assistant writes the perfect Tailwind components straight into your project.
claude mcp add --transport http systra https://systra.tools/api/mcpIn three steps
How to set it up
Step 01
01Connect
Add the MCP URL to your editor once. No login, no SDK.
Step 02
02Ask
Describe what you need in the chat. The assistant finds the right component.
Step 03
03Drop in
The finished code lands in your project, animations included.
Setup
For your editor
Claude Code
Run in your project's terminal.
claude mcp add --transport http systra https://systra.tools/api/mcpCursor
Add to ~/.cursor/mcp.json.
{
"mcpServers": {
"systra": {
"url": "https://systra.tools/api/mcp"
}
}
}VS Code
Add to .vscode/mcp.json in your workspace.
{
"servers": {
"systra": {
"type": "http",
"url": "https://systra.tools/api/mcp"
}
}
}The assistant
What the assistant can do
Hero with full-bleed photo
GiantWordmarkHeroHeroes
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.