AIGUI

AIGUI

Renderize uma resposta de LLM em streaming como UI ao vivo — markdown, gráficos, diagramas, matemática, 3D, topologias e cartões definidos pelo aplicativo — em React, Vue ou DOM puro.

Demos ao vivo · Use com Claude Code ou Codex — o agente desenha gráficos, diagramas, 3D e topologias para você, como imagens ou uma página ao vivo: instale o plugin.

Cada imagem acima foi desenhada pelo AIGUI a partir de um bloco cercado que um modelo escreveu; os dados são dados de exemplo.

Instalação

pnpm add @ai-gui/core @ai-gui/react      # or @ai-gui/vue, @ai-gui/vanilla
pnpm add @ai-gui/plugin-chart @ai-gui/plugin-mermaid @ai-gui/plugin-katex   # any plugins

Pacote
@ai-gui/core	Parser de streaming headless, registro de cartões, mecanismo de plugins, sanitizador
@ai-gui/react · @ai-gui/vue · @ai-gui/vanilla	Adaptadores de framework
@ai-gui/plugin-chart · @ai-gui/plugin-bigscreen · @ai-gui/plugin-dashboard	Gráficos ECharts, paredes de dados animadas, painéis de tabela + gráfico
@ai-gui/plugin-mermaid · @ai-gui/plugin-katex · @ai-gui/plugin-highlight	Diagramas, matemática, código
@ai-gui/plugin-topology · @ai-gui/plugin-graph	Topologias de infraestrutura com etapas reproduzíveis, grafos de conhecimento
@ai-gui/plugin-scene · @ai-gui/plugin-molecule · @ai-gui/plugin-map	Cenas 3D, moléculas, mapas
@ai-gui/plugin-gravity · @ai-gui/plugin-motion · @ai-gui/plugin-optics · @ai-gui/plugin-physics	Figuras de física calculadas a partir das condições
@ai-gui/plugin-solid · @ai-gui/plugin-function · @ai-gui/plugin-figure · @ai-gui/plugin-quote	Geometria, funções, figuras rotuladas, candlesticks
@ai-gui/plugin-ui · @ai-gui/plugin-form · @ai-gui/plugin-primitives · @ai-gui/plugin-progress · @ai-gui/plugin-flashcard	UI gerada, formulários, listas e tabelas, progresso, flashcards
@ai-gui/plugin-citation · @ai-gui/plugin-artifact · @ai-gui/plugin-evidence · @ai-gui/plugin-resultset	Fontes, documentos revisados, proveniência escrita pelo host e tabelas de resultados
@ai-gui/plugin-sdk	Auxiliares de criação de plugins
@ai-gui/openai · @ai-gui/anthropic · @ai-gui/vercel-ai	Adaptadores de stream de modelo
@ai-gui/image · @ai-gui/openclaw	Blocos para PNG em navegador headless; para canais de chat somente com imagens
@ai-gui/mcp · @ai-gui/cli · @ai-gui/live · @ai-gui/devtools	Servidor MCP para agentes, o prompt do sistema como arquivo, cartões dirigidos por servidor, uma linha do tempo de stream

Início rápido

import { useRef } from "react"
import { buildSystemPrompt } from "@ai-gui/core"
import { AIRenderer } from "@ai-gui/react"
import { chart } from "@ai-gui/plugin-chart"
import { mermaid } from "@ai-gui/plugin-mermaid"

const plugins = [chart(), mermaid()]
const system = buildSystemPrompt({ base: "You are a helpful assistant.", plugins })

export function Answer() {
  const ref = useRef(null)
  async function ask(question: string) {
    const res = await fetch("/api/chat", { method: "POST", body: JSON.stringify({ system, question }) })
    ref.current.reset()
    await ref.current.feed(res.body) // renders as the tokens arrive
  }
  return <AIRenderer ref={ref} plugins={plugins} />
}

buildSystemPrompt informa ao modelo quais blocos ele pode escrever; passe locale: "zh-CN" para as regras em chinês. O backend apenas transmite texto — qualquer idioma funciona.

No Claude Code e Codex

# Claude Code
/plugin marketplace add liliang-cn/aigui
/plugin install aigui@aigui

# Codex
codex plugin marketplace add liliang-cn/aigui
codex plugin add aigui@aigui

O agente pode então desenhar: aigui_render retorna PNGs, aigui_open abre uma página ao vivo no seu navegador, aigui_edit altera uma página no lugar, aigui_export salva como PNG, PDF, um arquivo HTML autocontido ou um GIF/WebM dela em execução, e aigui_topology desenha um sistema diretamente dos seus arquivos docker-compose ou Kubernetes. O texto da página está em inglês, a menos que você peça outro idioma. Veja @ai-gui/mcp.

Para ver as imagens dentro do Claude Code em vez de um visualizador de imagens, adicione o mod img-view: /plugin install img-view@aigui. Ele mostra cada desenho em um painel ao lado da conversa, como pixels reais em kitty, Ghostty, iTerm2 e WezTerm e como arte de blocos coloridos em qualquer outro terminal.

Documentação

• Todos os pacotes no npm: npmjs.com/org/ai-gui
• Guia completo — cartões, ações, canais, plugins em profundidade
• AGENTS.md — integração do SDK, o que o modelo pode escrever, lançamento
• O README de cada pacote, em packages/

Licença

MIT