Das Model Context Protocol, kurz MCP, verbindet KI-Editoren mit externen Quellen. Für eine Komponenten-Library bedeutet das: Dein Assistent kann Bausteine durchsuchen und einfügen, ohne dass du zwischen Browser und Editor wechselst.
- MCP ist eine offene Schnittstelle, über die dein Editor selbst auf eine Quelle zugreift, statt dass du kopierst.
- Der Umweg über die Zwischenablage entfällt, und mit ihm die halb eingefügten Komponenten.
- Eingerichtet ist das in wenigen Minuten: Server eintragen, Editor neu starten, nach einer Komponente fragen.
- Der Editor bekommt Quelltext und Beschreibung, nicht nur einen Namen. Deshalb landet die Komponente vollständig im Projekt.
Was MCP ist
MCP ist ein offener Standard, über den ein KI-Editor mit Servern spricht, die zusätzliche Fähigkeiten und Daten bereitstellen. Der Editor bleibt gleich, gewinnt aber Zugriff auf neue Quellen.
Für eine Library stellt der Server einen lesenden Zugriff bereit: Der Assistent kann Komponenten suchen und den Quellcode abrufen.
Der Vorteil im Alltag
Ohne MCP kopierst du Code aus dem Browser und fügst ihn im Editor ein. Mit MCP beschreibst du, was du brauchst, und der Assistent fügt den passenden Baustein direkt an der richtigen Stelle ein.
Das spart Kontextwechsel und Fehler. Gerade bei vielen kleinen Bausteinen summiert sich der Zeitgewinn.
- Browser öffnen, Komponente suchen, Quelltext kopieren.
- Zurück in den Editor, Datei anlegen, einfügen.
- Importe von Hand nachziehen, Bildpfade anpassen.
- Beim nächsten Baustein von vorn.
- Im Chat beschreiben, was du brauchst.
- Der Assistent sucht und holt den Quelltext.
- Er legt die Datei an und setzt die Importe.
- Der nächste Baustein ist ein Satz.
Einrichtung in wenigen Schritten
Du hinterlegst die Server-Adresse einmal in der Konfiguration deines Editors und startest ihn neu. Danach stehen Suche und Abruf im Chat zur Verfügung. Unterstützt werden MCP-fähige Umgebungen wie Claude Code, Cursor und VS Code.
Es werden keine Inhalte aus deinem Projekt an die Library gesendet. Der Zugriff ist rein lesend.
{ "mcpServers": { "systra-tools": { "url": "https://systra.tools/api/mcp", "headers": { "Authorization": "Bearer DEIN_SCHLUESSEL" } } }}
Wo MCP nichts bringt
Der Zugang lohnt sich nicht überall. Diese Fälle hören wir regelmäßig, und in den meisten raten wir ab.
- Du kopierst zweimal im Jahr. Dann ist die Zwischenablage schneller als jede Einrichtung. MCP lohnt sich ab dem Punkt, an dem es täglich passiert.
- Du arbeitest ohne KI-Editor. Ohne Editor, der das Protokoll spricht, gibt es keinen Weg für die Anfrage. Der Katalog bleibt über die Seite erreichbar.
- Du willst nur sehen, wie etwas aussieht. Dafür ist die Übersicht da. Jede Section läuft dort live und in voller Größe, ohne Konto.
MCP spart keine Entscheidung, es spart den Weg dorthin.
In vier Schritten eingerichtet
Die Einrichtung dauert einmal ein paar Minuten und gilt danach für alle Projekte auf diesem Rechner.
- Zugang holen. Die Adresse des Servers und dein Schlüssel stehen im Konto unter MCP.
- Eintrag anlegen. In der Konfiguration deines Editors einen Server mit Name, Adresse und Schlüssel ergänzen.
- Editor neu starten. Erst danach liest er die Konfiguration neu ein. Das ist die häufigste Ursache, wenn nichts passiert.
- Nach einer Komponente fragen. Zum Beispiel nach einem Hero mit Bild. Der Editor sucht, holt den Quelltext und setzt ihn an der richtigen Stelle ein.
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
