# Canvas UI MCP Server

> Deja que Cursor, Claude Code o VS Code busquen e instalen componentes canvas y WebGL del registro @canvas-ui desde el propio editor.

Fuente: https://skillsagentes.com/mcp/canvas-ui
Markdown: https://skillsagentes.com/mcp/canvas-ui.md

Repositorio: https://github.com/DavidHDev/canvas-ui
Web: https://canvasui.dev/
Autor: DavidHDev
Licencia: NOASSERTION
Estrellas: 4284
Último push: 19 ago 2026

## Qué es

Canvas UI es una biblioteca open source de componentes creativos dibujados en canvas: simulaciones de fluidos, efectos shader y escenas 3D que se ejecutan encima de tu interfaz real. La mayoría lee el DOM en vivo con la API experimental HTML-in-canvas, así que el texto sigue seleccionable y los enlaces clicables; donde esa API no está disponible, caen a un overlay WebGL para que la página no se rompa.

El registro es compatible con shadcn: no hay paquete que instalar, el código fuente aterriza en components/canvasui/ y queda tuyo para editar. El README lista 33 componentes (Liquid, Glass, Shatter, Force Field, Decrypt Reveal y más), cada uno para React, Solid, Preact, Vue, Svelte y vanilla. El asistente los recorre e instala a través del servidor MCP de shadcn apuntado al namespace @canvas-ui; un prompt como "add the Liquid component from Canvas UI" basta.

Para dejar listo el cliente, el README indica npx shadcn@latest mcp init --client claude (también Cursor, VS Code, Codex y OpenCode). Chrome con chrome://flags/#canvas-draw-element da el efecto HTML-in-canvas completo; en el resto de navegadores hay fallback. La licencia es MIT + Commons Clause: gratis en tus propios proyectos, con la única restricción de no vender la biblioteca en sí.

## Instalación

```bash
npx shadcn@latest mcp init --client claude
```

## Qué hace

- Expone el registro shadcn @canvas-ui para que el asistente liste e instale componentes canvas y WebGL
- Ofrece 33 componentes (Liquid, Glass, Shatter, Force Field, Decrypt Reveal…) en React, Solid, Preact, Vue, Svelte y vanilla
- Copia el código fuente al repo (components/canvasui/), sin paquete npm que pinnear
- Usa HTML-in-canvas cuando el navegador lo permite y cae a overlay WebGL en el resto
- Renderiza efectos 3D (ASCII Object, Glass Object) a partir de un modelo GLB/glTF, SVG o imagen

## Cuándo usarlo

- Cuando quieres que el asistente añada un efecto canvas (líquido, vidrio, glitch, partículas) a una página que ya tienes
- Cuando trabajas en React, Vue, Svelte, Solid, Preact o vanilla y necesitas el mismo componente en ese target
- Cuando prefieres copiar el código al repo vía shadcn en lugar de depender de un paquete npm

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/mcp/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- [Todos los servidores MCP](https://skillsagentes.com/mcp.md)
- [Agent Skills](https://skillsagentes.com/skills.md)

## Servidores relacionados

- [Penpot](https://skillsagentes.com/mcp/penpot.md): Conecta agentes de IA con Penpot, la plataforma de diseño open source, para que puedan leer y trabajar sobre archivos de diseño reales.
- [Blender Model Context Protocol](https://skillsagentes.com/mcp/blender-model-context-protocol.md): Conecta un LLM como Claude con Blender para crear, modificar e inspeccionar escenas 3D mediante un servidor de sockets y ejecución de código Python.
- [Figma Context](https://skillsagentes.com/mcp/figma-context.md): Conecta agentes de código como Cursor con archivos de Figma para que implementen diseños UI a partir de datos reales de layout, no capturas de pantalla.
- [Cursor Talk to Figma](https://skillsagentes.com/mcp/cursor-talk-to-figma.md): Conecta agentes de IA como Cursor con Figma vía WebSocket para leer y modificar diseños, textos, componentes y prototipos de forma programática.
- [Magic](https://skillsagentes.com/mcp/magic.md): Conecta tu editor (Cursor, Claude Code, Windsurf, VS Code) al 21st MCP para buscar componentes React/Tailwind y generar UI con IA desde el propio editor.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)