Agent UI para desarrolladores

Deja que la IA cree la app. Abre el código cuando quieras. Cada app incluye su propio servidor MCP, y la CLI te permite descargarla a tu editor, trabajar con tu asistente de código y publicarla de vuelta.

npm install -g @agentuiai/cli

Requiere Node.js 22 o superior.

$ 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
Funciona con
  • Claude Code
  • Cursor
  • Codex
  • VS Code Copilot
  • ChatGPT
  • Windsurf
Integrado

Cada app trae su propio servidor MCP.

Actívalo y Claude, ChatGPT, Cursor o cualquier cliente MCP podrá consultar y modificar los datos de tu app en nombre de una persona, viendo solo lo que esa persona tiene permitido ver. Sin servidor que alojar ni código que escribir.

  • Herramientas de datos generadas para cada tabla: list, get, count, create, update y delete
  • Una dirección por entorno, desactivada hasta que la actives
  • Conexiones de solo lectura o de lectura y escritura, y puedes revocar cualquiera
  • Las reglas de Data Security se verifican en cada llamada
  • Guías y herramientas personalizadas que enseñan tus procedimientos a los asistentes
Cómo activar MCP
  • data_orders_list
  • data_orders_get
  • data_orders_count
  • data_orders_create
  • data_orders_update
  • data_orders_delete
  • tool_summarize_overdue_invoices

Tu app es solo una carpeta

Sincroniza una app y obtienes su código real: tablas de datos en JSON, páginas, componentes, funciones de backend y herramientas de IA personalizadas. AGENTS.md y CLAUDE.md le enseñan a tu asistente de código cómo se construyen las apps de Agent UI.

  • Edita en cualquier editor
  • Verifícala con el mismo validador que usa la plataforma
  • Publica y recompila con un solo comando
acme-stock/
entities/ tablas de datos en JSON
pages/
components/
functions/ → /api/<name>
mcp/ herramientas de IA personalizadas
Layout.jsx
AGENTS.md
.claude/CLAUDE.md

El ciclo de edición

Cambia los archivos tú mismo o pídeselo a tu asistente. Verifica, compara y publica en el entorno que elijas. Cada entorno tiene su propia base de datos.

  • 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

Conecta tu asistente con MCP

El servidor MCP de Agent UI permite que Claude, ChatGPT, Cursor o VS Code creen apps y tablas, lean y actualicen registros y ejecuten los procedimientos de tu app, siempre con los permisos de la persona que inició sesión. Nada que instalar ni API key que copiar.

Agent UI Apps

Crea apps solo de datos, define sus tablas y mantén los registros al día.

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

Tu app

Una dirección por entorno, que copias del panel de asistentes de IA de la app. Solo ve lo que el usuario que inició sesión tiene permitido ver.

Cómo activarlo →
$ claude mcp add --transport http agentui-apps https://api.agentui.ai/mcp/apps

Cosas que puedes pedir

  • Crea una app de datos llamada Visitas de Campo con una tabla Visitas
  • Agrega un campo de estado que solo pueda ser planificada, hecha o cancelada
  • Importa estas 40 filas de la hoja de cálculo que pegué
  • Muestra todos los pedidos abiertos de más de 500
  • Marca como atrasados los pedidos abiertos del mes pasado
  • Resume las facturas vencidas de este cliente

Herramientas MCP personalizadas

Enséñale a un asistente un procedimiento de tu app, como resumir facturas vencidas o cerrar un ticket y avisarle al responsable. Pídelo en el chat de la app y Agent UI escribe la herramienta como un archivo en la carpeta mcp de tu app.

  • Se ejecuta como el usuario de la app que inició sesión
  • Las reglas de Data Security siguen aplicando
  • Activa o desactiva cada herramienta
  • Agent UI escribe el archivo por ti
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 };
  },
});

Funciones de backend, APIs y señales de la app

Cada archivo en functions/ queda disponible en /api/<name>. Conecta APIs que Agent UI todavía no soporta, guarda las claves en secretos y envía mensajes desde tu app en ejecución directo al chat de construcción con console.human.

  • Prueba funciones y lee sus logs desde la CLI
  • Los valores secretos se quedan en el servidor
  • Entornos de desarrollo, staging y producción separados
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 };
}

Herramientas para desarrolladores

Instala la CLI y descarga tu primera app.

npm install -g @agentuiai/cliGratis y con licencia MIT. Requiere Node.js 22 o superior.

Leer la documentación de la CLIEmpieza gratis

Explora según lo que necesitas crear

Cada herramienta funciona con los datos que ya tienes, con acceso por roles, historial completo de cambios y una persona real detrás.

Ver todos los casos de uso →