Immobilien-Website mit ChatGPT, Claude, Gemini oder Cursor: anbinden oder neu programmieren

PLUS Die Coding-Werkzeuge von ChatGPT (Codex), Claude (Claude Code), Gemini (Gemini CLI) und der Editor Cursor schreiben eine Website als Quellcode in einem Projekt auf Ihrem Rechner oder in einem Git-Repository. Anders als die KI-Website-Builder wie Lovable oder Base44 bestimmen Sie dabei selbst, mit welchem Framework die Website gebaut wird und wo sie läuft. WP-ImmoMakler liefert die Immobilien aus Ihrer Maklersoftware, etwa aus Propstack, onOffice, FlowFact, JustImmo oder ImmobilienScout24 (ImmoScout24), über seine REST API an diese Website und nimmt deren Kontaktanfragen entgegen.

Bestehendes Projekt anbinden

Haben Sie Ihre Website mit Codex, Claude Code, Gemini CLI oder Cursor bereits erstellt, fehlt meist nur noch die Verbindung zu Ihren Immobilien. Geben Sie dem Coding-Werkzeug in Ihrem Projekt den folgenden Prompt. Er ersetzt die Beispieldaten durch die Immobilien aus WP-ImmoMakler, schließt das Kontaktformular an und lässt Framework, Gestaltung und Aufbau unverändert. Ersetzen Sie https://ihre-wordpress-adresse.de durch die Adresse Ihrer WordPress-Website.

Meine Website zeigt bereits Immobilien, aber noch mit Beispieldaten. Verbinde sie mit der Immobilien-API von WP-ImmoMakler, die hier beschrieben ist:
https://ihre-wordpress-adresse.de/wp-json/immomakler-headless/v1/llms-full.txt
Lies diese Beschreibung zuerst vollständig.

Gestaltung, Layout und Komponenten meiner Website bleiben unverändert. Ersetze nur die Datenquelle. Fehlt eine Immobilienliste oder Detailseite, lege sie im Stil der vorhandenen Seiten an.

Immobilienliste:
- Lade die Immobilien über GET /search mit fields=summary statt aus den Beispieldaten.
- Blättere über page und total_pages aus der Antwort, statt alle Immobilien auf einmal zu laden.
- Hat meine Website Filter (Objektart, Vermarktungsart, Ort, Preis, Zimmer, Fläche), baue sie aus GET /site (search.taxonomies, search.ranges, search.orders) und übergib sie als Suchparameter an /search. Stelle den Zustand der Filter aus "applied" in der Antwort her und halte ihn in der URL, damit eine gefilterte Liste verlinkbar bleibt.
- Zeige Ladezustand, Fehlermeldung und einen Hinweis, wenn keine Immobilie passt.

Detailseite:
- Verwende in der URL der Detailseite die normalisierte Objektnummer (object_number_normalized) und lade die Immobilie damit über GET /properties/{object_number_normalized}. Verwende nie post_id als Kennung, sie ändert sich bei jedem Import.
- Verlinke aus der Liste auf den Pfad aus links.frontend_url und richte die Route der Detailseite danach aus.
- Antwortet die API mit 404, zeige eine eigene "Immobilie nicht gefunden"-Seite.

Kontaktformular:
- Hat meine Website ein Kontaktformular, schließe es an POST /enquiries an: mit den Feldern und Zustimmungen aus site.forms.enquiry, einem Token, das das Formular beim Anzeigen über GET /spam/token holt, und der Objektnummer (object_number) der Immobilie unter "properties".
- Zeige die Fehler aus data.errors der Antwort an den betroffenen Feldern.

Daten darstellen:
- Ersetze jedes Feld der Beispieldaten durch das passende Feld der API. Zeige Zahlen, Preise und Flächen mit "label" und "value" aus der API, formatiere "raw" nicht selbst.
- Zeige die Datenfelder in der Reihenfolge, in der die API sie liefert (fields.property, fields.areas, fields.prices, fields.epass, in der Liste archive und archive_prices), und lasse Felder weg, die eine Immobilie nicht hat. Erfinde keine Werte und behalte keine Beispieldaten als Ersatz.
- Bilder aus media.featured und media.images, jeweils in der passenden Größe aus "sizes", mit dem Alternativtext aus "alt".
- Beschreibungstexte aus descriptions als HTML.
- Adresse aus address. Ist geo.exact false, zeige auf der Karte einen Umkreis statt eines Punkts.
- Ansprechpartner aus contact.
- Seitentitel und Meta-Beschreibung aus seo, die strukturierten Daten aus json_ld als <script type="application/ld+json">.

Entferne die Beispieldaten anschließend aus dem Projekt.

Erzeugt Ihr Projekt seine Seiten beim Bauen, richten Sie danach den Webhook ein, damit es nach jeder Übertragung Ihrer Maklersoftware neu baut. Passen Sie außerdem “Pfad einer Immobilie” und “Pfad der Immobilienliste” in den Headless-Einstellungen an die Adressen Ihrer Website an.

Freie Wahl des Frameworks

Die REST API von WP-ImmoMakler setzt kein bestimmtes Framework voraus. Lassen Sie Ihre Website mit dem Framework bauen, das Sie oder Ihre Agentur kennen, zum Beispiel:

• Astro, auf dem auch unser Astro-Starter aufbaut
• Next.js (React)
• Nuxt (Vue)
• SvelteKit (Svelte)
• Eleventy oder Hugo als reine Generatoren für statische Seiten
• ganz ohne Framework, mit HTML, CSS und JavaScript

Für Suchmaschinen kommt es nicht auf das Framework an, sondern darauf, wo die Immobilienseiten entstehen. Werden sie beim Bauen oder auf dem Server erzeugt, enthält jede Seite schon im ausgelieferten HTML Titel, Meta-Beschreibung und strukturierte Daten, und Suchmaschinen wie KI-Suchdienste lesen sie ohne JavaScript. Lädt eine Seite die Immobilie erst im Browser, sehen manche Crawler, darunter die mancher KI-Suchdienste, nur eine leere Seite. Ohne Framework erzeugen Sie die Seiten dafür mit einem kleinen Skript, das sie beim Bauen aus der Schnittstelle schreibt.

Erzeugt Ihre Website die Seiten beim Bauen, muss sie nach jeder Übertragung Ihrer Maklersoftware neu bauen, damit neue und geänderte Immobilien erscheinen. Der Webhook von WP-ImmoMakler meldet, welche Immobilien sich geändert haben, und kann den Build auslösen; wie das bei Cloudflare aussieht, steht unter Frontend bei Cloudflare betreiben. Eine Website, die ihre Seiten bei jedem Aufruf auf dem Server erzeugt, liest die aktuellen Daten ohnehin bei jeder Anfrage.

Astro-Starter auf Anfrage

Arbeiten Sie gern mit Astro, müssen Sie nicht bei null beginnen: Der Astro-Starter von WP-ImmoMakler ist eine fertige Astro-Website, die die REST API bereits vollständig nutzt und die Sie mit Ihrem Coding-Werkzeug weiter anpassen. Er ist ein Angebot, keine Voraussetzung: Mit jedem anderen Framework nutzen Sie dieselbe Schnittstelle. Wie er aussieht, zeigt die Demo des Astro-Starters.

Der Astro-Starter enthält:

• eine Immobilienliste mit den Filtern Ihres Suchformulars, Sortierung und einer Kartenansicht,
• eine Detailseite je Immobilie mit Bildergalerie, Datenfeldern, Beschreibungen, Ansprechpartner und Kontaktformular,
• eine Merkliste und das Anlegen von Suchaufträgen,
• die Sprachen Ihrer Website, in der Demo Deutsch, Englisch, Französisch und Spanisch,
• Ihr Branding aus den Headless-Einstellungen: Name, Logo, Farben, Gestaltungsvorlage, Schriften und Eckenrundung aus dem Abschnitt “Astro-Starter”.

Den Astro-Starter erhalten Sie auf Anfrage über unser Kontaktformular.

Neue Website erstellen

1. Schnittstelle einschalten

   Aktivieren Sie im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Integrationen → Headless die Schnittstelle, siehe Einrichtung.

2. Projekt anlegen

   Öffnen Sie in Ihrem Coding-Werkzeug ein leeres Projekt oder den Astro-Starter.

3. Den Prompt geben

   Ersetzen Sie https://ihre-wordpress-adresse.de durch die Adresse Ihrer WordPress-Website und Astro durch das Framework Ihrer Wahl, oder lassen Sie die Wahl dem Coding-Werkzeug:

   Erstelle mit Astro eine Website für mein Immobilienbüro: eine Immobilienliste, eine Detailseite je Immobilie und ein Kontaktformular. Die Immobilien kommen aus der Immobilien-API von WP-ImmoMakler, die hier beschrieben ist:
   https://ihre-wordpress-adresse.de/wp-json/immomakler-headless/v1/llms-full.txt
   Lies diese Beschreibung zuerst vollständig.
   
   - Übernimm Name, Logo, Farben und Menüs aus GET /site.
   - Erzeuge die Detailseiten beim Bauen oder auf dem Server, nicht erst im Browser: eine Seite je Immobilie aus GET /properties/manifest und GET /properties/{object_number_normalized}, unter dem Pfad aus links.frontend_url. Verwende nie post_id als Kennung.
   - Die Immobilienliste lädt GET /search mit fields=summary und den Filtern aus site.search, damit die Filter ohne neuen Build funktionieren.
   - Zeige die Datenfelder mit "label" und "value" in der Reihenfolge, in der die API sie liefert, Bilder aus media mit srcset aus "sizes" und dem Alternativtext aus "alt", Beschreibungstexte aus descriptions als HTML.
   - Ist geo.exact false, zeige auf der Karte einen Umkreis statt eines Punkts.
   - Seitentitel und Meta-Beschreibung aus seo, strukturierte Daten aus json_ld als <script type="application/ld+json">.
   - Das Kontaktformular hat die Felder aus site.forms.enquiry, holt beim Anzeigen ein Token über GET /spam/token und sendet an POST /enquiries.

4. Veröffentlichen

   Veröffentlichen Sie die Website bei einem Anbieter Ihrer Wahl, etwa Cloudflare, Netlify, Vercel oder Ihrem eigenen Webspace, und tragen Sie ihre Adresse in den Headless-Einstellungen unter “Adresse Ihres Frontends” ein. Erzeugt die Website ihre Seiten beim Bauen, richten Sie den Webhook für den Build ein.

5. Adressen abgleichen

   Passen Sie “Pfad einer Immobilie” und “Pfad der Immobilienliste” in den Headless-Einstellungen an die Adressen Ihrer Website an, zum Beispiel /{archive_slug}/{object_number_normalized}/.

API-Key nur auf dem Server

Verlangen Sie den API-Key für lesende Anfragen, lassen Sie ihn als Umgebungsvariable beim Build oder auf dem Server lesen und nie in Code schreiben, der im Browser läuft. Die Immobilienliste, die im Browser sucht, braucht dann eine Server-Funktion, die die Anfrage mit dem Key weiterreicht. Das Kontaktformular braucht keinen Key, solange es von der Adresse Ihres Frontends oder einem erlaubten Ursprung sendet.

Das könnte Sie auch interessieren

• KI-Website mit Ihrer Maklersoftware verbinden
• Frontend bei Cloudflare betreiben
• Webhook, Links und Weiterleitung
• REST-API-Referenz