Agent UI für Entwickler

Lassen Sie die KI die App bauen. Öffnen Sie den Code, wann immer Sie wollen. Jede App kommt mit ihrem eigenen MCP-Server, und mit der CLI holen Sie sie in Ihren Editor, arbeiten mit Ihrem Coding-Assistenten daran und veröffentlichen sie wieder.

npm install -g @agentuiai/cli

Erfordert Node.js 22 oder neuer.

$ agentui auth login
✓ Signed in as you@acme.com
$ agentui project sync <workflow-id>
✓ entities/ pages/ components/ functions/ mcp/
$ claude "add a reorder button to the stock page"
$ agentui validate --all
✓ No problems found
$ agentui project push --build
✓ Build finished · development
Funktioniert mit
  • Claude Code
  • Cursor
  • Codex
  • VS Code Copilot
  • ChatGPT
  • Windsurf
Integriert

Jede App kommt mit ihrem eigenen MCP-Server.

Schalten Sie ihn ein, und Claude, ChatGPT, Cursor oder jeder andere MCP-Client kann im Auftrag einer Person die Daten Ihrer App abfragen und ändern – und sieht dabei nur, was diese Person sehen darf. Kein Server zu hosten, kein Code zu schreiben.

  • Daten-Tools für jede Tabelle generiert: list, get, count, create, update und delete
  • Eine Adresse pro Umgebung, ausgeschaltet, bis Sie sie aktivieren
  • Verbindungen nur zum Lesen oder zum Lesen und Schreiben – jede jederzeit widerrufbar
  • Data-Security-Regeln bei jedem Aufruf geprüft
  • Guides und eigene Tools, die Assistenten Ihre Abläufe beibringen
So aktivieren Sie MCP
  • data_orders_list
  • data_orders_get
  • data_orders_count
  • data_orders_create
  • data_orders_update
  • data_orders_delete
  • tool_summarize_overdue_invoices

Ihre App ist einfach ein Ordner

Synchronisieren Sie eine App, und Sie erhalten ihren echten Code: Datentabellen als JSON, Seiten, Komponenten, Backend-Funktionen und eigene KI-Tools. AGENTS.md und CLAUDE.md erklären Ihrem Coding-Assistenten, wie Agent UI Apps aufgebaut sind.

  • In jedem Editor bearbeiten
  • Mit demselben Validator prüfen, den die Plattform nutzt
  • Mit einem Befehl veröffentlichen und neu bauen
acme-stock/
entities/ Datentabellen als JSON
pages/
components/
functions/ → /api/<name>
mcp/ eigene KI-Tools
Layout.jsx
AGENTS.md
.claude/CLAUDE.md

Der Bearbeitungszyklus

Ändern Sie Dateien selbst oder lassen Sie Ihren Assistenten das übernehmen. Prüfen, vergleichen und in die Umgebung Ihrer Wahl veröffentlichen. Jede Umgebung hat ihre eigene Datenbank.

  • agentui validate --all
  • agentui project diff
  • agentui project push --build
$ agentui project diff
  M pages/Stock.jsx
  A functions/reorder.js
$ agentui project push --build
✓ Uploaded 2 files
✓ Build finished · development

Verbinden Sie Ihren Assistenten per MCP

Mit dem MCP-Server von Agent UI können Claude, ChatGPT, Cursor oder VS Code Apps und Tabellen anlegen, Datensätze lesen und aktualisieren und die Abläufe Ihrer App ausführen – immer mit den Berechtigungen der angemeldeten Person. Nichts zu installieren, kein API-Schlüssel zu kopieren.

Agent UI Apps

Reine Daten-Apps anlegen, ihre Tabellen gestalten und Datensätze aktuell halten.

https://api.agentui.ai/mcp/apps

Ihre App

Eine Adresse pro Umgebung, kopiert aus dem Bereich „KI-Assistenten“ der App. Sie sieht nur, was die angemeldete Person sehen darf.

So aktivieren Sie ihn →
$ claude mcp add --transport http agentui-apps https://api.agentui.ai/mcp/apps

Was Sie fragen können

  • Lege eine Daten-App namens Field Visits mit einer Tabelle Visits an
  • Füge ein Statusfeld hinzu, das nur planned, done oder cancelled sein kann
  • Importiere diese 40 Zeilen aus der Tabelle, die ich eingefügt habe
  • Zeige alle offenen Bestellungen über 500
  • Markiere die offenen Bestellungen vom letzten Monat als verspätet
  • Fasse die überfälligen Rechnungen dieses Kunden zusammen

Eigene MCP-Tools

Bringen Sie einem Assistenten einen Ablauf aus Ihrer App bei, etwa überfällige Rechnungen zusammenzufassen oder ein Ticket zu schließen und den Verantwortlichen zu benachrichtigen. Fragen Sie im App-Chat danach, und Agent UI schreibt das Tool als Datei in den mcp-Ordner Ihrer App.

  • Läuft als angemeldeter App-Nutzer
  • Data-Security-Regeln gelten weiterhin
  • Jedes Tool einzeln ein- oder ausschalten
  • Agent UI schreibt die Datei für Sie
import { defineTool } from "@/mcp";
import { Invoice } from "@/entities/Invoice";

export default defineTool({
  description: "Summarize a customer's overdue invoices",
  input: { /* JSON Schema: customerId */ },
  annotations: { readOnlyHint: true },

  async run({ customerId }) {
    const rows = await Invoice.filter({
      customer_id: customerId,
      status: "overdue",
    });
    return { count: rows.length };
  },
});

Backend-Funktionen, APIs und App-Signale

Jede Datei in functions/ ist unter /api/<name> erreichbar. Binden Sie APIs an, die Agent UI noch nicht unterstützt, bewahren Sie Schlüssel in Secrets auf und senden Sie mit console.human Nachrichten aus Ihrer laufenden App direkt in den Build-Chat.

  • Funktionen testen und ihre Logs per CLI lesen
  • Secret-Werte bleiben auf dem Server
  • Getrennte Entwicklungs-, Staging- und Produktionsumgebungen
import { Stock } from "@/entities/Stock";

export default async function (ctx) {
  const item = await Stock.get(ctx.body.id);
  await Stock.update(item.key, { reorder: true });

  return { ok: true };
}

Entwickler-Tools

Installieren Sie die CLI und holen Sie sich Ihre erste App.

npm install -g @agentuiai/cliKostenlos und unter MIT-Lizenz. Erfordert Node.js 22 oder neuer.

CLI-Dokumentation lesenKostenlos starten

Was möchten Sie bauen?

Jedes dieser Tools läuft mit den Daten, die Sie bereits haben – mit rollenbasiertem Zugriff, vollständigem Audit-Trail und einem echten Menschen, der dahintersteht.

Alle Anwendungsfälle ansehen →