Zum Inhalt springen
UI Kit
Accent
MCP-Server für ChatGPTOpenAI · Web und Desktop, Entwicklermodus, Responses API

Websites mit ChatGPT bauen, über MCP

Eine App im Entwicklermodus oder ein Werkzeug-Eintrag in der Responses API. Danach baut dein Assistent mit 350 Components des UI Kit.

Adresse des Servers

https://ai-website.com/mcp
  • Streamable HTTP, ohne Anmeldung
  • 14 Werkzeuge, alle nur lesend
  • Kostenlos, Components unter MIT

Was ChatGPT mit dem UI Kit kann

ChatGPT verbindet sich mit MCP-Servern im Internet, und das UI Kit hat einen unter einer festen Adresse. Im Entwicklermodus legst du mit dieser Adresse eine App an, und ChatGPT sucht in jedem Chat unter 350 Components, liest ihren Code, plant eine Website und prüft eine Seite.

Der Server bietet auch die beiden Standardwerkzeuge search und fetch, in der Form, die ChatGPT für Connectors und Deep Research nutzt. Das Kit arbeitet also im normalen Chat ebenso wie in längeren Recherchen, die Components und Muster vergleichen.

Jedes Werkzeug ist als nur lesend markiert, und der Server braucht keine Anmeldung. Für dein eigenes Produkt funktioniert dieselbe Adresse in der Responses API von OpenAI, mit einem Eintrag in den tools einer Anfrage.

  • Nutzt search und fetch, die Standardwerkzeuge für Connectors und Deep Research
  • Schreibt mit get_variant kompletten Seitencode mit realistischen Props
  • Plant und prüft Seiten im normalen Gespräch, ganz ohne Editor

Einrichtung

ChatGPT in 3 Schritten verbinden

Die Bilder zeigen, wo du klickst. Namen von Menüs können sich mit neuen Versionen leicht ändern, der Weg bleibt derselbe.

  1. Schritt 1, Schalte den Entwicklermodus ein

    Öffne Einstellungen, Apps und dann Erweiterte Einstellungen. Schalte den Entwicklermodus ein, damit kannst du Apps von eigenen MCP-Servern hinzufügen.

  2. Schritt 2, Erstelle die App

    Wähle App erstellen. Gib ihr den Namen UI Kit by ai-website.com, füge die Adresse als MCP-Server-URL ein, wähle Keine Authentifizierung und setze das Häkchen bei I trust this application.

  3. Schritt 3, Wähle sie im Chat

    Wähle die App in einem neuen Chat über den Plus-Knopf neben dem Eingabefeld. ChatGPT ruft die Werkzeuge des Kits dann beim Antworten auf.

Konfiguration

Fertig zum Kopieren

Die App erscheint unter dem Plus-Knopf, und eine Antwort zeigt die Werkzeugaufrufe, etwa search_components.

OpenAI Responses API
{  "model": "<model>",  "tools": [    {      "type": "mcp",      "server_label": "ai_website_ui_kit",      "server_description": "Components, docs and website build knowledge of the UI Kit by ai-website.com",      "server_url": "https://ai-website.com/mcp",      "require_approval": "never"    }  ],  "input": "Plan a website for a bakery in Hamburg with the UI Kit"}

require_approval never ist hier unbedenklich, jedes Werkzeug liest nur.

Beispiel-Prompts

Probier es in ChatGPT aus

Kopier einen Prompt, setz deine eigenen Fakten ein und schick ihn ab. Gute Prompts nennen Ziel, Inhalte und Sprache.

Eine Landingpage mit KI bauen

Nutze das UI Kit von ai-website.com. Bau eine Landingpage für Nordlicht Yoga, ein kleines Studio in Bremen, das im Januar einen Anfängerkurs startet. Ziel sind Anmeldungen für eine kostenlose Probestunde. Plane zuerst die Sections, nimm dann Components und Varianten aus dem Kit, schreib alle Texte auf Deutsch und prüf die Seite am Ende mit review_page.

In ChatGPT öffnenAblauf

Eine ganze Website mit KI neu aufsetzen

Nutze das UI Kit von ai-website.com. Plane einen Relaunch der Website der Tischlerei Hansen, einer Tischlerei in Kiel mit acht Leuten. Seiten für Start, Leistungen, Projekte, Über uns und Kontakt. Nutze plan_website mit dem Bauplan für Handwerk, gib jeder Seite Titel und Beschreibung, wähle für jede Section Component und Variante und nenn mir den Installationsbefehl. Texte auf Deutsch.

In ChatGPT öffnenAblauf

Eine Section mit KI neu gestalten

Nutze das UI Kit von ai-website.com. Unsere Pricing-Section zeigt drei Pläne in schlichten Kästen, und kaum jemand klickt. Vergleiche die Varianten der Pricing-Component, wähle die, die am besten zu Monats- und Jahrespreisen passt, behalte unsere Preise und Texte und gib mir den neuen Code. Sag mir, warum du sie gewählt hast.

In ChatGPT öffnenAblauf

Werkzeuge

Was ChatGPT aufrufen kann

ChatGPT wählt die Werkzeuge selbst. Alle vierzehn lesen nur.

Finden

  • search_componentsFindet Components nach englischen oder deutschen Wörtern, gefiltert nach Kategorie und Gruppe.
  • list_categoriesGruppen und Kategorien mit Namen der Components und Zahl der Varianten.
  • searchDurchsucht Components, Baupläne, Leitfäden und Doku in der Form, die ChatGPT erwartet.
  • fetchHolt ein Ergebnis von search vollständig.

Bauen

  • get_componentBeschreibung, Varianten, Props, Barrierefreiheit, Abhängigkeiten und der Installationsbefehl.
  • get_component_codeDie Quelldatei mit Lizenzkopf, bei langen Dateien in Teilen.
  • get_variantFertiger Code einer Variante mit realistischen Props auf Deutsch oder Englisch.
  • get_themeTokens für hell und dunkel, sieben Akzente, Radius und Schriftskala.
  • get_install_stepsSchritte für Astro, Next.js oder Vite mit npm, pnpm oder bun, bis zur ersten Seite.
  • get_docsEine Seite der Doku als Markdown oder die Liste der Seiten.

Planen

  • plan_websiteEin kompletter Plan aus einem Briefing, Seiten, SEO-Felder, Sections mit Component, Variante und Texthinweisen.
  • get_blueprintBaupläne für 23 Arten von Websites, von der Bäckerei bis SaaS.

Prüfen

  • review_pageEine Prüfliste für eine fertige Seite nach Seitentyp und Bereich.
  • get_guidelinesLeitfäden zu Aufbau, Conversion, Text, Design, Barrierefreiheit, SEO, Tempo, Formularen und Recht.

Tipps

  • Nenn das Kit im Prompt, etwa „mit dem UI Kit von ai-website.com“, dann greift ChatGPT sofort zur App.
  • Bitte bei einem langen Plan um eine Seite nach der anderen, so bleiben die Antworten vollständig.
  • Übernimm den Code in Codex oder deinen Editor, um das echte Projekt zu bauen.

Wenn es hakt

Ich sehe den Entwicklermodus nicht
Der Entwicklermodus hängt von deinem Plan ab und in einem Workspace von den Admin-Einstellungen. Frag deinen Admin, oder nimm Codex, das sich mit einem Command verbindet.
ChatGPT antwortet ohne die Werkzeuge
Wähle die App für diesen Chat unter dem Plus-Knopf und nenn das UI Kit im Prompt.
Die Responses API meldet einen Fehler beim Werkzeug
Prüf, ob server_url genau die Adresse oben ist und type mcp lautet. Der Server beantwortet nur POST-Anfragen.

FAQ

Fragen zu ChatGPT

Zur Übersicht des MCP-Servers
Kann ChatGPT die ganze Website bauen?

ChatGPT plant die Website, wählt Components und schreibt den Code jeder Seite. Um die Dateien in ein Projekt zu bringen, kopierst du sie oder lässt es Codex machen, das denselben Server nutzt.

Wozu öffnet ein Link ChatGPT mit einem Prompt?

Er spart das Tippen. Der Link füllt den Prompt ein, du prüfst ihn und schickst ihn ab. Mit eingeschalteter App nutzt ChatGPT das Kit für die Antwort.

Sieht der Server meinen Code oder meine Chats?

Nein. Dein Assistent schickt nur die Frage, die er dem Kit stellt, etwa die Suche nach einer Pricing-Section. Der Server antwortet und speichert nichts aus der Anfrage.

Was kostet der MCP-Server?

Nichts. Server, Components und CLI sind kostenlos, der Code steht unter der MIT-Lizenz. Du zahlst nur den KI-Assistenten, den du ohnehin nutzt.

Bau deine nächste Website mit ChatGPT

Einmal verbinden, dann reicht ein Satz über dein Geschäft.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert