App-Builder wie Lovable, Bolt, v0 und Replit schreiben den Code selbst, und genau das ist bei der Oberfläche ihr Schwachpunkt: Der Agent erfindet jede Hero-Section neu, und nach drei Projekten sehen alle gleich aus. Der Ausweg ist, dem Agenten fertige Komponenten zu geben, statt sie beschreiben zu lassen. Seit 2025 nehmen alle vier eigene MCP-Server auf, also Werkzeuge, die der Agent während des Chats aufruft. Ein Server für eine Komponenten-Bibliothek lässt den Agenten dort suchen und den vollständigen Quelltext holen, statt zu raten. Dieser Beitrag zeigt, wo der Eintrag in jedem der vier Werkzeuge sitzt, wie ein API-Key mitkommt, wie man danach promptet und wann es schneller ist, eine Komponente einfach zu kopieren.
- Alle vier nehmen einen MCP-Server über seine Adresse auf: Lovable unter Connectors mit der Karte Custom MCP, Bolt unter Connectors (MCP) mit Custom MCP server, v0 über Add MCP, Replit unter Integrations oder per Installationslink.
- Ein Key reist als Header mit. Bolt, v0 und Replit haben dafür ein eigenes Feld, Lovable setzt auf eine Anmeldung per OAuth. Freie Server brauchen weder das eine noch das andere.
- Gute Prompts nennen Art, Ort und Inhalt: welche Section, wo auf der Seite und mit welchen Texten. Der Name aus dem Katalog ist der sicherste Weg zur richtigen Komponente.
- Für eine einzelne, bekannte Komponente ist Kopieren schneller. MCP lohnt sich, wenn der Agent suchen soll oder eine ganze Seite aus mehreren Teilen entsteht.
Wie kommen fertige UI-Komponenten in Lovable, Bolt, v0 oder Replit?
Über einen MCP-Server, den man einmal als eigenen Connector einträgt. Danach kann der Agent im Chat in der Bibliothek suchen und den vollständigen Quelltext einer Komponente holen, statt sie aus einer Beschreibung neu zu erfinden.
MCP, das Model Context Protocol, ist ein offener Standard für Werkzeuge, die ein Sprachmodell aufrufen kann. Ein entfernter MCP-Server ist eine Adresse im Netz, die auf solche Aufrufe antwortet. Alle vier Builder sprechen dieses Protokoll über HTTP, deshalb ist der Eintrag überall gleich aufgebaut: ein Name, die Adresse und, wenn der Server es verlangt, eine Anmeldung oder ein Key.
Der Unterschied zum Kopieren aus der Bibliothek ist, wer sucht. Beim Kopieren sucht man selbst und fügt den Code in den Chat ein. Mit MCP sagt man, was man braucht, und der Agent sucht, vergleicht und holt den Code selbst.
Wie verbinde ich einen MCP-Server mit Lovable?
Unter Connectors ganz unten in der Ansicht All die Karte Custom MCP wählen, die Adresse einfügen und Add server klicken. Verlangt der Server eine Anmeldung, heißt der Knopf Add & authorize, und Lovable öffnet die Anmeldung des Anbieters.
Lovable nennt das einen Chat-Connector: Der Server steht dem Agenten im Chat zur Verfügung, nicht der fertigen App. Das ist für eine Komponenten-Bibliothek genau richtig, denn sie wird beim Bauen gebraucht und nicht im Betrieb.
Zwei Stellen führen in die Irre. Custom connector ist für eigene API-Anbindungen gedacht, nicht für bestehende MCP-Server. Und ist die Option ausgegraut, hat ein Admin eigene Server für den Workspace abgeschaltet. Lovable kann außerdem ganze Verzeichnisse von MCP-Servern einbinden, sogenannte Registries, die ein Admin einmal hinterlegt.
Wie verbinde ich einen MCP-Server mit Bolt?
Auf der Seite Connectors (MCP) auf Custom MCP server klicken und drei Dinge angeben: die Adresse, den Transport und die Authentifizierung. Der Transport ist bei entfernten Servern meist HTTP, die Authentifizierung None für Server ohne Anmeldung, API key für einen Key oder OAuth für eine Anmeldung.
Bolt lässt den Server für alle Projekte oder nur für eines freischalten und Connectors je Projekt an- und ausschalten. Für eine Bibliothek, die man überall braucht, ist der Weg über alle Projekte bequemer. Neue Werkzeuge, die der Anbieter später ergänzt, erkennt Bolt selbst.
Wie verbinde ich einen MCP-Server mit v0?
Auf Add MCP klicken, entweder in den Einstellungen unter MCP Connections oder direkt im Eingabefeld des Prompts, dann einen eigenen Server anlegen und die Adresse einfügen. Für die Authentifizierung bietet v0 No Auth, Custom Headers und Bearer Token an.
Wer v0 über die API nutzt, legt den Server dort mit Name und Adresse an und gibt seine ID im Feld mcpServerIds eines Chats mit. Damit lässt sich dieselbe Bibliothek auch in eigenen Werkzeugen verwenden, die auf v0 aufbauen.
Wie verbinde ich einen MCP-Server mit Replit?
Am schnellsten über einen Installationslink: ein Klick, und Replit legt den Server mit Name, Adresse und, falls nötig, Header an. Von Hand geht es unter Integrations mit Add MCP server, dort gibt es Felder für eigene Header wie Authorization.
Der Link ist nichts anderes als ein JSON-Objekt, base64-kodiert und an https://replit.com/integrations?mcp= angehängt. Anbieter bauen ihn in ihre Dokumentation, man kann ihn aber auch selbst erzeugen, etwa um einen Server mit dem eigenen Key im Team zu teilen.
Eine Besonderheit: Replit schickt jeden MCP-Aufruf durch einen eigenen Sicherheitsscanner, der Werkzeugbeschreibungen und geplante Aufrufe prüft und verdächtige blockiert. Lehnt er ein Werkzeug ab, sagt der Agent das im Chat.
{ "displayName": "Component library", "baseUrl": "https://example.com/api/mcp", "headers": [{ "key": "Authorization", "value": "Bearer YOUR_KEY" }]} // https://replit.com/integrations?mcp= + base64(JSON above)
Wie sage ich dem Agenten, welche Komponente er nehmen soll?
Mit drei Angaben: was für eine Section, wo sie hinkommt und welche Inhalte hineingehören. Der Agent ruft dann von selbst die Suche auf, vergleicht die Treffer und holt den Code. Wer im Katalog schon eine bestimmte Komponente gesehen hat, nennt ihren Namen, das ist der sicherste Weg.
Der wichtigste Satz steht am Ende: Der Agent soll die Komponente so übernehmen, wie sie kommt, und nur Texte und Bilder tauschen. App-Builder passen Code gern an ihr Projekt an und schreiben dabei genau die Teile neu, die eine Komponente besonders machen, etwa eine Animation oder einen Zeilenumbruch, der bewusst so gesetzt ist.
Use the component library MCP server.Search for a hero section with a large photo and a single call to action.Put it at the top of the home page, above the pricing section.Headline: Book a table in two taps. Button: Reserve now.Use the component exactly as returned, only change the copy and the image.
Wann ist Kopieren besser als ein MCP-Server?
Wenn man die Komponente schon kennt und es nur um eine geht. Dann ist der Weg über Kopieren und Einfügen kürzer: kein Eintrag, keine Suche, und man sieht vorher genau, was ankommt. Viele Bibliotheken bieten dafür einen fertigen Prompt mit dem Code an, der direkt in den Chat des Builders passt.
MCP lohnt sich, sobald gesucht werden muss oder eine Seite aus mehreren Teilen entsteht: Hero, Features, Preise, Fußzeile, alle aus einer Quelle und im selben Stil. Dann spart der Agent die Wege zwischen Browser und Chat, und die Teile passen zueinander.
Und es gibt Fälle, in denen keins von beidem hilft. Eine Komponente, die Pakete braucht, die der Builder nicht installieren kann, oder eine, die auf ein anderes Framework zugeschnitten ist, kommt auf keinem Weg sauber an. Vor dem Einbau lohnt deshalb ein Blick auf die Abhängigkeiten.
