Agent-Native Slides

Construtor de apresentações de IA de código aberto cujas ações são ferramentas MCP — gere, edite, personalize a marca e compartilhe decks a partir de qualquer agente.

GitHub

7.4k

Documentação

Agent-Native

Agent-Native é um framework TypeScript de código aberto para construir agentes que combinam trabalho autônomo com uma interface de usuário (UI) projetada para esse fim. Defina cada capacidade uma única vez como uma ação: o agente a usa como ferramenta, e a UI a chama a partir do código.

Início rápido

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

Siga o guia de introdução para uma visão completa do framework.

Por que construir agentes com UIs?

Agentes de codificação trabalham com mais do que uma caixa de texto. Seu ambiente fornece contexto, ferramentas, arquivos, testes e pré-visualizações que tornam suas capacidades e resultados visíveis.

O trabalho do conhecimento precisa desse mesmo tipo de ambiente. Uma UI mostra o que um agente pode fazer e dá às pessoas formas familiares de inspecionar, editar, aprovar e compartilhar seu trabalho.

Como o Agent-Native funciona

Ações compartilhadas. O agente chama cada capacidade como uma ferramenta, e a UI a chama a partir do código. Ambos os caminhos usam a mesma validação, permissões e implementação.
Dados compartilhados. O trabalho feito pelo agente aparece na UI, e o trabalho feito na UI está disponível para o agente.
Estado de aplicação compartilhado. O agente recebe estado relevante da UI, como a página atual, o registro selecionado ou a visão ativa.

O agente não navega pela UI clicando. Ele trabalha pela mesma camada de ações que a UI.

Exemplo: uma ação compartilhada

Crie 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}!` };
  },
});

O agente recebe hello como uma ferramenta. O React chama a mesma função com useActionQuery("hello", { name: "Alex" }). O Agent-Native também a expõe via HTTP, MCP, A2A e CLI.

Incluído

Chat do agente: Permita que as pessoas deleguem trabalho, façam perguntas e revisem resultados na mesma UI.
Autenticação e permissões: Controle quem pode acessar e alterar o trabalho compartilhado.
Habilidades e memória: Dê aos agentes expertise reutilizável e contexto persistente.
Automações: Execute o trabalho do agente em agendamentos ou eventos.
Equipes de agentes: Delegue trabalho a agentes especialistas no mesmo espaço de trabalho ou entre agentes conectados.
Backend PostgreSQL: Use PostgreSQL em produção e PGlite para desenvolvimento local em qualquer host compatível com Nitro.

Exemplo: edite um aplicativo em execução visualmente

Use /visual-edit no Claude Code para editar um aplicativo em execução em uma tela em vez de solicitar cada pequeno ajuste de UI por prompt. Compare páginas ao vivo juntas e depois peça ao Claude para aplicar as edições escolhidas ao seu código-fonte. Por exemplo:

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

Revise as telas de integração ao lado da Home em tamanhos desktop, tablet e mobile, ajuste a cor ou o espaçamento de um botão diretamente e depois peça ao Claude para aplicar as edições pendentes ao seu código-fonte. Veja o guia de Edição Visual para o passo a passo completo e detalhes de compartilhamento.

Traga seu LLM, banco de dados SQL, ferramentas e infraestrutura. Tudo o que você construir permanece seu.

Veja o Agent-Native em ação:

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