- Implementa tal cual la función de generación de materiales visuales interactivos lanzada por Claude
- Una UI generativa que crea automáticamente gráficos, diagramas, visualizaciones y otros recursos, en lugar de limitarse a respuestas de texto simples
- Visualización de algoritmos: búsqueda binaria, BFS/DFS, ordenamiento, etc.
- Animaciones 3D: escenas interactivas basadas en WebGL/CSS3D
- Gráficos y diagramas: gráfico circular, gráfico de barras, diagrama de red, etc.
- Widgets y simulaciones: formularios, gráficos matemáticos, herramientas interactivas, etc.
- Todos los elementos visuales se renderizan dentro de un iframe sandbox, lo que garantiza seguridad e independencia
- Soporta tema claro/oscuro automático, animaciones progresivas y ajuste de tamaño responsivo
- Genera contenido visual conversacional en tiempo real basado en CopilotKit y LangGraph
- Organizado con una estructura monorepo basada en Turborepo
apps/app: frontend basado en Next.js 16, React 19 y Tailwind 4apps/agent: agente en Python que usa LangGraph y middleware de CopilotKit
- Cómo funciona
- El usuario ingresa un prompt mediante la UI de chat de CopilotKit
- El agente decide la forma de respuesta adecuada entre texto, llamada de herramienta o componente visual
- El hook
widgetRenderer del frontend recibe el HTML y lo renderiza en un iframe
- Después de una carga Skeleton, aplica un fundido de entrada suave y ajuste automático de altura
- Incluye una matriz de decisión de visualización
- Según el tipo de solicitud, selecciona automáticamente la tecnología más adecuada, como SVG, HTML, Chart.js, Three.js o D3.js
- Ejemplo: para explicar un proceso usa Flowchart; para comparar datos, Bar chart; para representaciones 3D, Three.js
- Licencia MIT
3 comentarios
Así que renderiza el HTML generado dentro de un
iframe.No hace mucho que Claude lanzó esta función, y ya la implementaron como open source.
También es curioso que Claude aparezca entre los contributors jaja
Claude ayudando a implementar tal cual la función que lanzó Claude..
Dicen que si haces commit usando Claude Code, con la configuración predeterminada apareces automáticamente agregado como contributor.