AIGUI

AIGUI

Renderiza una respuesta de LLM en streaming como UI en vivo — markdown, gráficos, diagramas, matemáticas, 3D, topologías y tarjetas definidas por la aplicación — en React, Vue o DOM plano.

Demostraciones en vivo · Úsalo desde Claude Code o Codex — el agente dibuja gráficos, diagramas, 3D y topologías por ti, como imágenes o una página en vivo: instala el plugin.

Cada imagen de arriba fue dibujada por AIGUI a partir de un bloque delimitado que escribió un modelo; los datos son datos de muestra.

Instalación

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

Paquete
@ai-gui/core	Parser de streaming sin interfaz, registro de tarjetas, motor de plugins, sanitizador
@ai-gui/react · @ai-gui/vue · @ai-gui/vanilla	Adaptadores de frameworks
@ai-gui/plugin-chart · @ai-gui/plugin-bigscreen · @ai-gui/plugin-dashboard	Gráficos ECharts, muros de datos animados, paneles de tabla + gráfico
@ai-gui/plugin-mermaid · @ai-gui/plugin-katex · @ai-gui/plugin-highlight	Diagramas, matemáticas, código
@ai-gui/plugin-topology · @ai-gui/plugin-graph	Topologías de infraestructura con pasos reproducibles, grafos de conocimiento
@ai-gui/plugin-scene · @ai-gui/plugin-molecule · @ai-gui/plugin-map	Escenas 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 de las condiciones
@ai-gui/plugin-solid · @ai-gui/plugin-function · @ai-gui/plugin-figure · @ai-gui/plugin-quote	Geometría, funciones, figuras etiquetadas, velas
@ai-gui/plugin-ui · @ai-gui/plugin-form · @ai-gui/plugin-primitives · @ai-gui/plugin-progress · @ai-gui/plugin-flashcard	UI generada, formularios, listas y tablas, progreso, tarjetas didácticas
@ai-gui/plugin-citation · @ai-gui/plugin-artifact · @ai-gui/plugin-evidence · @ai-gui/plugin-resultset	Fuentes, documentos con revisión, procedencia escrita por el host y tablas de resultados
@ai-gui/plugin-sdk	Ayudantes para la creación de plugins
@ai-gui/openai · @ai-gui/anthropic · @ai-gui/vercel-ai	Adaptadores de flujo de modelos
@ai-gui/image · @ai-gui/openclaw	Bloques a PNG en un navegador sin interfaz; para canales de chat solo de imágenes
@ai-gui/mcp · @ai-gui/cli · @ai-gui/live · @ai-gui/devtools	Servidor MCP para agentes, el prompt del sistema como archivo, tarjetas controladas por servidor, una línea de tiempo de flujo

Inicio 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 le dice al modelo qué bloques puede escribir; pasa locale: "zh-CN" para las reglas en chino. El backend solo transmite texto — cualquier idioma funciona.

En Claude Code y 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

El agente puede entonces dibujar: aigui_render devuelve PNGs, aigui_open abre una página en vivo en tu navegador, aigui_edit cambia una página en su lugar, aigui_export la guarda como PNG, PDF, un archivo HTML autocontenido o un GIF/WebM de su reproducción, y aigui_topology dibuja un sistema directamente desde sus archivos docker-compose o Kubernetes. El texto de la página está en inglés a menos que pidas otro idioma. Consulta @ai-gui/mcp.

Para ver las imágenes dentro de Claude Code en lugar de un visor de imágenes, añade el mod img-view: /plugin install img-view@aigui. Muestra cada dibujo en un panel junto a la conversación, como píxeles reales en kitty, Ghostty, iTerm2 y WezTerm y como arte de bloques de color en cualquier otra terminal.

Documentación

• Todos los paquetes en npm: npmjs.com/org/ai-gui
• Guía completa — tarjetas, acciones, canales, plugins en profundidad
• AGENTS.md — integración del SDK, qué puede escribir el modelo, publicación
• El README de cada paquete, bajo packages/

Licencia

MIT