The Model Context Protocol, MCP for short, connects AI editors with external sources. For a component library that means: your assistant can search and insert building blocks without you switching between browser and editor.
- MCP is an open interface that lets your editor reach a source itself instead of you copying things over.
- The detour through the clipboard disappears, and with it the half pasted components.
- Setup takes a few minutes: add the server, restart the editor, ask for a component.
- The editor receives source code and description, not just a name. That is why the component lands complete.
What MCP is
MCP is an open standard through which an AI editor talks to servers that provide extra capabilities and data. The editor stays the same but gains access to new sources.
For a library the server provides read-only access: the assistant can search components and fetch the source code.
The everyday benefit
Without MCP you copy code from the browser and paste it into the editor. With MCP you describe what you need and the assistant inserts the right building block straight into the right spot.
That saves context switches and errors. Especially with many small building blocks the time saved adds up.
- Open the browser, find the component, copy the source.
- Back to the editor, create a file, paste.
- Fix the imports by hand, adjust image paths.
- Start over for the next building block.
- Describe what you need in the chat.
- The assistant searches and fetches the source.
- It creates the file and sets the imports.
- The next building block is one sentence.
Setup in a few steps
You add the server address once in your editor's configuration and restart it. After that, search and fetch are available in the chat. Supported are MCP-capable environments like Claude Code, Cursor and VS Code.
No content from your project is sent to the library. Access is read-only.
{ "mcpServers": { "systra-tools": { "url": "https://systra.tools/api/mcp", "headers": { "Authorization": "Bearer DEIN_SCHLUESSEL" } } }}
Where MCP does not help
The access is not worth it everywhere. We hear these cases regularly, and in most of them we advise against it.
- You copy twice a year. Then the clipboard beats any setup. MCP pays off from the point where it happens daily.
- You work without an AI editor. Without an editor speaking the protocol there is no path for the request. The catalog stays reachable through the site.
- You only want to see how something looks. That is what the overview is for. Every section runs there live and full size, without an account.
MCP saves no decision, it saves the way there.
Set up in four steps
Setup takes a few minutes once and then applies to every project on that machine.
- Get access. The server address and your key are in your account under MCP.
- Add the entry. In your editor's configuration add a server with name, address and key.
- Restart the editor. Only then does it read the configuration again. That is the most common reason when nothing happens.
- Ask for a component. For example for a hero with an image. The editor searches, fetches the source and inserts it in the right place.
Suche in Systra Tools nach einem Hero mit großem Bild und zwei Buttons, und setz ihn in src/components ein. Gefunden: ProcurementSplitHeroAngelegt: src/components/ProcurementSplitHero.tsx
