Agent-Native Slides

Agent-Native

Agent-Native es un framework de TypeScript de código abierto para construir agentes que combinan trabajo autónomo con una interfaz de usuario diseñada para ese propósito. Define cada capacidad una sola vez como una acción: el agente la usa como herramienta y la interfaz de usuario la invoca desde el código.

Inicio rápido

npx --yes @agent-native/core@latest create my-agent --standalone --template chat

Sigue la guía de inicio para una introducción completa al framework.

¿Por qué construir agentes con interfaces de usuario?

Los agentes de programación trabajan con más que una caja de texto. Su entorno proporciona contexto, herramientas, archivos, pruebas y vistas previas que hacen visibles sus capacidades y resultados.

El trabajo de conocimiento necesita ese mismo tipo de entorno. Una interfaz de usuario muestra lo que un agente puede hacer y brinda a las personas formas familiares de inspeccionar, editar, aprobar y compartir su trabajo.

Cómo funciona Agent-Native

• Acciones compartidas. El agente invoca cada capacidad como herramienta y la interfaz de usuario la invoca desde el código. Ambas rutas usan la misma validación, permisos e implementación.
• Datos compartidos. El trabajo realizado por el agente aparece en la interfaz de usuario, y el trabajo realizado en la interfaz está disponible para el agente.
• Estado de aplicación compartido. El agente recibe el estado relevante de la interfaz, como la página actual, el registro seleccionado o la vista activa.

El agente no navega haciendo clic en la interfaz. Trabaja a través de la misma capa de acciones que la interfaz.

Ejemplo: una acción compartida

Crea actions/hello.ts:

import { defineAction } from "@agent-native/core/action";
import { z } from "zod";

// One action powers every app surface: UI, agent, HTTP, MCP, A2A, and CLI.
export default defineAction({
  description: "Return a friendly greeting.",
  schema: z.object({
    name: z.string().default("world").describe("Name to greet"),
  }),
  http: { method: "GET" },
  run: async ({ name }) => {
    return { message: `Hello, ${name}!` };
  },
});

El agente recibe hello como herramienta. React invoca la misma función con useActionQuery("hello", { name: "Alex" }). Agent-Native también la expone a través de HTTP, MCP, A2A y la CLI.

Incluido

• Chat con agente: Permite que las personas deleguen trabajo, hagan preguntas y revisen resultados en la misma interfaz.
• Autenticación y permisos: Controla quién puede acceder y modificar el trabajo compartido.
• Habilidades y memoria: Brinda a los agentes experiencia reutilizable y contexto persistente.
• Automatizaciones: Ejecuta el trabajo del agente según horarios o eventos.
• Equipos de agentes: Delega trabajo a agentes especializados en el mismo espacio de trabajo o entre agentes conectados.
• Backend de PostgreSQL: Usa PostgreSQL en producción y PGlite para desarrollo local en cualquier host compatible con Nitro.

Ejemplo: editar una aplicación en ejecución visualmente

Usa /visual-edit en Claude Code para editar una aplicación en ejecución en un lienzo en lugar de solicitar cada pequeño ajuste de interfaz. Compara páginas en vivo juntas y luego pide a Claude que aplique los cambios elegidos a tu código fuente. Por ejemplo:

/visual-edit the onboarding flow, plus home at every breakpoint

Revisa las pantallas de incorporación junto con Home en tamaños de escritorio, tableta y móvil, ajusta el color o el espaciado de un botón directamente y luego pide a Claude que aplique los cambios pendientes a tu código fuente. Consulta la guía de edición visual para el recorrido completo y los detalles de uso compartido.

Trae tu LLM, base de datos SQL, herramientas e infraestructura. Todo lo que construyas sigue siendo tuyo.

Mira Agent-Native en acción:

https://github.com/user-attachments/assets/ef51644b-6506-46d8-8083-0af7b7e5b65c

Agentes de código abierto

Comienza con uno de estos agentes o úsalo como ejemplo para el tuyo propio.

Clips Graba y comprende reuniones, pantallas y notas de voz.	Diseño Genera y refina diseños interactivos.	Diapositivas Crea y edita presentaciones alineadas con la marca.
Analítica Haz preguntas sobre tus datos y crea paneles de control.	Calendario Encuentra tiempo, programa eventos y gestiona reservas.	Correo Prioriza el correo electrónico, redacta respuestas y haz seguimiento.
Recursos Crea y organiza medios alineados con la marca.	Contenido Redacta, organiza y publica contenido.	Planes Crea y revisa planes visuales con diagramas, wireframes y prototipos.

Explora la galería completa de aplicaciones o comienza con la guía del framework.

Documentación y comunidad

• Lee la documentación.
• Únete a Discord para hacer preguntas, compartir lo que estás construyendo y obtener ayuda.

Contribuciones

¿Trabajas en este repositorio? Consulta DEVELOPMENT.md para la configuración local, la estructura del espacio de trabajo y los scripts de verificación.

Licencia

MIT