• Deutsch

      • Aufbau mit einem AI Agent

      Voraussetzung

      Bevor Sie diese Seite lesen, stellen Sie bitte sicher, dass Sie gemäß dem Schnellstart Aufbau mit AI Portal Ihr erstes Portal zum Laufen gebracht haben.

      Die tägliche Entwicklung an einem AI Portal ist ein Gespräch mit einem AI Agent – Sie beschreiben die gewünschte Seite, er schreibt den Code, und Sie prüfen das Ergebnis im Browser.

      Im Portal-Verzeichnis arbeiten

      Wechseln Sie vor dem Start in das Quellcode-Verzeichnis des Portals und öffnen Sie dort Ihren AI Agent. So startet der Agent gleich im richtigen Kontext und hat Zugriff auf AGENTS.md und den vorhandenen Code.

      Ermitteln Sie zunächst, wo das Verzeichnis liegt:

      nb portal info main

      Der Entwicklungspfad in der Ausgabe ist der Ort, an dem der Portal-Quellcode liegt. Wechseln Sie mit cd dorthin und öffnen Sie anschließend Ihren AI Agent:

      cd <Entwicklungs-Workspace-Verzeichnis>

      Danach beschreiben Sie einfach, was Sie brauchen:

      Füge dem main portal meiner nocobase-Anwendung eine Bestellübersichtsseite hinzu

      Die KI erst lesen, dann schreiben lassen

      Im Wurzelverzeichnis der Vorlage liegt eine AGENTS.md, in der die Konventionen dieses Projekts festgehalten sind: vorrangig wiederverwenden, was bereits in src/extensions vorhanden ist, UI-Komponenten über Komposition anpassen statt die Basiskomponenten direkt zu ändern, und kein Ant Design einbinden. AI Agents, die diese Datei lesen können, halten sich automatisch daran.

      Sie können der AGENTS.md auch die Konventionen Ihres eigenen Projekts hinzufügen – Namensgewohnheiten, Fachbegriffe, Verzeichnisse, die unangetastet bleiben sollen. Einmal eingetragen, gelten sie in jedem Gespräch, und Sie müssen sie nicht immer wieder erklären.

      Unter src/extensions liegen einige integrierte Erweiterungen. Darunter ist nocobase-users-example eine vollständige CRUD-Seite mit Liste, Anlegen, Bearbeiten und Detailansicht. Die KI darauf zu verweisen ist deutlich einfacher, als eine neue Seite von Grund auf zu beschreiben:

      Bau eine Produktverwaltungsseite nach dem Muster von nocobase-users-example

      Beispiel-Prompts

      Szenario A: Eine neue Geschäftsseite anlegen

      Drei Angaben genügen – was auf der Seite steht, woher die Daten kommen und wie sie sich verhält:

      Füge eine Kundenverwaltungsseite hinzu:
Die Tabelle zeigt Name, Telefon, E-Mail und Erstellungszeit, mit Suche nach Namen,
und ein Klick auf eine Zeile öffnet einen Detail-Drawer, in dem der Datensatz bearbeitet und gespeichert werden kann

      Szenario B: Eine bestehende Seite umbauen

      Bei Änderungswünschen benennen Sie genau, was sich ändern soll. Die gesamte Seite noch einmal zu beschreiben, ist nicht nötig:

      Ergänze die Kundenliste um einen Statusfilter
mit den Optionen „in Bearbeitung“, „gewonnen“ und „verloren“, standardmäßig ohne Filterung

      Szenario C: Eine neue Datentabelle anbinden

      Sobald eine Datentabelle existiert, lassen Sie die KI die passenden Seiten generieren. Sie liest die Felddefinitionen aus und wählt danach die Formularelemente und Listenspalten:

      Ich habe gerade eine contracts-Tabelle angelegt, bau mir dazu einen passenden Satz CRUD-Seiten

      Existiert die Tabelle noch nicht, lassen Sie die KI zunächst über Datenmodellierung die Datenstruktur entwerfen und kehren dann zu den Seiten zurück.

      Szenario D: Ein Design nachbauen

      Wenn Sie einen Entwurf oder ein fertiges HTML-Prototyp haben, geben Sie es der KI direkt:

      Bau die Startseite nach diesem Prototyp,
Farbgebung und Layout bleiben gleich, die Daten kommen aus der orders-Tabelle

      Szenario E: Ein Authentifizierungsverfahren ergänzen

      Sobald serverseitig ein Authentifizierungsverfahren aktiviert ist, braucht die Anmeldeseite die passende Frontend-Unterstützung:

      In NocoBase ist die DingTalk-Anmeldung aktiviert, ergänze die Anmeldeseite um einen DingTalk-Anmeldebutton

      Tipps zur Zusammenarbeit

      In kleinen Schritten iterieren. Lassen Sie die KI eine Seite oder eine Änderung nach der anderen erledigen und prüfen Sie das Ergebnis, bevor es weitergeht. Wenn Sie fünf Seiten auf einmal beschreiben, lässt sich bei einem Fehler kaum noch sagen, an welcher Stelle es aus dem Ruder gelaufen ist.

      Den Entwicklungsserver laufen lassen. nb portal dev main lädt Änderungen sofort nach, sodass Sie das Ergebnis unmittelbar nach jeder Änderung der KI sehen. Kürzer wird die Rückkopplungsschleife nicht.

      Die genaue Fehlermeldung liefern. Weiße Seite, fehlgeschlagener Build, 403 von einer Schnittstelle – geben Sie der KI die vollständige Fehlermeldung und einen Screenshot, statt sie raten zu lassen. Meist ist die Sache nach wenigen Runden erledigt. Sie müssen auch nicht selbst herausfinden, in welcher Schicht das Problem liegt.

      error

      Häufige Fragen

      Wie rolle ich zurück, wenn die KI etwas falsch macht?

      Liegt der Portal-Quellcode unter Git, genügt ein git checkout. Beim standardmäßigen source storage nocobase können Sie eine frische Kopie aus dem source storage über den lokalen Stand ziehen:

      nb portal pull main --force

      --force löscht den Entwicklungs-Workspace und zieht ihn neu. Vergewissern Sie sich vor der Ausführung, dass es nichts gibt, was Sie behalten möchten. Um diese Abwägung zu vermeiden, sollten Sie den Quellcode früh unter Git stellen – siehe Deployment und Quellcodeverwaltung.

      Wie gehe ich einem fehlgeschlagenen Build auf den Grund?

      Führen Sie zuerst lokal einen Build aus, um die vollständige Fehlermeldung zu sehen:

      nb portal deploy main

      TypeScript-Typfehler und fehlende Abhängigkeiten sind die beiden häufigsten Ursachen. Geben Sie die Fehlermeldung an die KI weiter und lassen Sie sie beheben.

      Kollidieren meine manuellen Änderungen mit denen der KI?

      Nein. Der Portal-Quellcode ist ein ganz normales Frontend-Projekt – Sie können jederzeit selbst Hand anlegen und die KI anschließend weitermachen lassen. Solange Sie nicht beide im selben Moment dieselbe Datei bearbeiten, gibt es keine Probleme.