From d1c0f62fc308315332941007024305387a9760fe Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Fri, 13 Feb 2026 04:33:55 -0600
Subject: [PATCH] refactor: Separate concerns and add components dropdown

- Add ComponentsDropdown.vue with save/load/delete functionality
- Create components store (Pinia) for state management
- Extract WebMCP initialization to services/webmcp.ts
- Extract MCP tools registration to services/canvasTools.ts
- Simplify Canvas.vue (~340 lines -> ~105 lines)
- Update App.vue header with components dropdown

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/App.vue                          |  12 +-
 frontend/src/components/Canvas.vue            | 360 ++----------------
 .../src/components/ComponentsDropdown.vue     | 357 +++++++++++++++++
 frontend/src/services/canvasTools.ts          | 257 +++++++++++++
 frontend/src/services/webmcp.ts               |  52 +++
 frontend/src/stores/components.ts             | 124 ++++++
 6 files changed, 836 insertions(+), 326 deletions(-)
 create mode 100644 frontend/src/components/ComponentsDropdown.vue
 create mode 100644 frontend/src/services/canvasTools.ts
 create mode 100644 frontend/src/services/webmcp.ts
 create mode 100644 frontend/src/stores/components.ts

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 4a8c304..cded8ec 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2,12 +2,16 @@
 import Canvas from './components/Canvas.vue'
 import StatusBar from './components/StatusBar.vue'
 import Toolbar from './components/Toolbar.vue'
+import ComponentsDropdown from './components/ComponentsDropdown.vue'
 </script>
 
 <template>
   <div class="app-container">
     <header class="app-header">
-      <h1>Agent UI</h1>
+      <div class="header-left">
+        <h1>Agent UI</h1>
+        <ComponentsDropdown />
+      </div>
       <StatusBar />
     </header>
     <main class="app-main">
@@ -34,6 +38,12 @@ import Toolbar from './components/Toolbar.vue'
   border-bottom: 1px solid var(--border-color);
 }
 
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
 .app-header h1 {
   font-size: 1.25rem;
   font-weight: 600;
diff --git a/frontend/src/components/Canvas.vue b/frontend/src/components/Canvas.vue
index dcc4d47..3c48d44 100644
--- a/frontend/src/components/Canvas.vue
+++ b/frontend/src/components/Canvas.vue
@@ -1,339 +1,49 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
+import { initWebMCP } from '../services/webmcp'
+import { registerCanvasTools } from '../services/canvasTools'
+import { renderInlineComponent, type VueComponentDefinition } from '../services/dynamicComponents'
 import { useCanvasStore } from '../stores/canvas'
-import {
-  renderInlineComponent,
-  componentsApi,
-  type VueComponentDefinition
-} from '../services/dynamicComponents'
 
 const canvasStore = useCanvasStore()
 
-onMounted(async () => {
-  // Importar webmcp - esto crea el widget automáticamente
-  const WebMCPModule = await import('@nucleoriofrio/webmcp/src/webmcp.js')
-  const WebMCP = WebMCPModule.default || WebMCPModule
+function handleLoadComponent(e: Event) {
+  const detail = (e as CustomEvent).detail
+  if (!detail) return
 
-  const webmcp = new WebMCP({
-    color: '#6366f1',
-    position: 'bottom-right',
-    inactivityTimeout: 60 * 60 * 1000 // 1 hora
-  })
+  const container = document.getElementById('canvas-content')
+  if (!container) return
 
-  // Escuchar eventos de conexión
-  webmcp.on?.('connected', () => {
-    canvasStore.setConnected(true)
-  })
-  webmcp.on?.('disconnected', () => {
-    canvasStore.setConnected(false)
-  })
+  const placeholder = container.querySelector('.canvas-placeholder')
+  if (placeholder) placeholder.remove()
 
-  // Registrar herramientas para el canvas
-  registerCanvasTools(webmcp)
-
-  // Exponer webmcp globalmente para debug
-  ;(window as any).webmcp = webmcp
-
-  // Verificar si ya está conectado
-  if (webmcp.isConnected) {
-    canvasStore.setConnected(true)
+  const definition: VueComponentDefinition = {
+    id: detail.id,
+    name: detail.name,
+    template: detail.template,
+    setup: detail.setup,
+    style: detail.style,
+    props: detail.props,
+    imports: detail.imports || ['ref', 'reactive', 'computed']
   }
+
+  const result = renderInlineComponent(definition, container, {}, false)
+  ;(window as any).__vueComponentUnmount = result.unmount
+
+  window.dispatchEvent(new CustomEvent('vue-component-rendered', { detail }))
+  canvasStore.addToHistory({ tool: 'load_vue_component', args: detail, timestamp: Date.now() })
+}
+
+onMounted(async () => {
+  window.addEventListener('load-vue-component', handleLoadComponent)
+
+  await initWebMCP()
+  registerCanvasTools()
 })
 
-function registerCanvasTools(mcp: any) {
-  // render_html: Renderiza HTML en el canvas con soporte para scripts inline
-  mcp.registerTool(
-    'render_html',
-    'Renderiza HTML en el canvas. Soporta <script> tags que se ejecutan automáticamente y <style> tags.',
-    {
-      type: 'object',
-      properties: {
-        html: {
-          type: 'string',
-          description: 'El código HTML a renderizar (puede incluir <script> y <style> tags)'
-        },
-        mode: {
-          type: 'string',
-          enum: ['replace', 'append', 'prepend'],
-          description: 'Modo: replace (reemplaza), append (agrega al final), prepend (al inicio)'
-        }
-      },
-      required: ['html']
-    },
-    (args: { html: string; mode?: string }) => {
-      const container = document.getElementById('canvas-content')
-      if (!container) return 'Error: canvas no encontrado'
-
-      // Quitar placeholder si existe
-      const placeholder = container.querySelector('.canvas-placeholder')
-      if (placeholder) placeholder.remove()
-
-      const mode = args.mode || 'replace'
-      if (mode === 'replace') {
-        container.innerHTML = args.html
-      } else if (mode === 'append') {
-        container.insertAdjacentHTML('beforeend', args.html)
-      } else if (mode === 'prepend') {
-        container.insertAdjacentHTML('afterbegin', args.html)
-      }
-
-      // Ejecutar scripts inline
-      const scripts = container.querySelectorAll('script')
-      scripts.forEach((oldScript) => {
-        const newScript = document.createElement('script')
-        Array.from(oldScript.attributes).forEach(attr => {
-          newScript.setAttribute(attr.name, attr.value)
-        })
-        newScript.textContent = oldScript.textContent
-        oldScript.parentNode?.replaceChild(newScript, oldScript)
-      })
-
-      canvasStore.addToHistory({ tool: 'render_html', args, timestamp: Date.now() })
-      return 'HTML renderizado'
-    }
-  )
-
-  // render_vue_component: Renderiza un componente Vue 3 dinámico
-  mcp.registerTool(
-    'render_vue_component',
-    'Renderiza un componente Vue 3 completo con acceso a ref, reactive, computed, watch, Pinia stores, etc.',
-    {
-      type: 'object',
-      properties: {
-        id: {
-          type: 'string',
-          description: 'ID único del componente'
-        },
-        name: {
-          type: 'string',
-          description: 'Nombre del componente (ej: MyCounter)'
-        },
-        template: {
-          type: 'string',
-          description: 'Template HTML del componente con sintaxis Vue'
-        },
-        setup: {
-          type: 'string',
-          description: 'Código de la función setup (debe retornar un objeto con las propiedades reactivas)'
-        },
-        style: {
-          type: 'string',
-          description: 'CSS del componente (opcional)'
-        },
-        props: {
-          type: 'array',
-          items: { type: 'string' },
-          description: 'Lista de props que acepta el componente'
-        },
-        imports: {
-          type: 'array',
-          items: { type: 'string' },
-          description: 'Funciones de Vue a importar: ref, reactive, computed, watch, watchEffect, onMounted, onUnmounted, nextTick, h'
-        },
-        componentProps: {
-          type: 'object',
-          description: 'Valores para las props del componente'
-        },
-        mode: {
-          type: 'string',
-          enum: ['replace', 'append'],
-          description: 'replace: limpia el canvas, append: agrega al final'
-        }
-      },
-      required: ['id', 'name', 'template']
-    },
-    (args: {
-      id: string
-      name: string
-      template: string
-      setup?: string
-      style?: string
-      props?: string[]
-      imports?: string[]
-      componentProps?: Record<string, any>
-      mode?: string
-    }) => {
-      const container = document.getElementById('canvas-content')
-      if (!container) return 'Error: canvas no encontrado'
-
-      // Quitar placeholder
-      const placeholder = container.querySelector('.canvas-placeholder')
-      if (placeholder) placeholder.remove()
-
-      const definition: VueComponentDefinition = {
-        id: args.id,
-        name: args.name,
-        template: args.template,
-        setup: args.setup,
-        style: args.style,
-        props: args.props,
-        imports: args.imports || ['ref', 'reactive', 'computed']
-      }
-
-      const isAppend = args.mode === 'append'
-      const result = renderInlineComponent(definition, container, args.componentProps || {}, isAppend)
-
-      // Guardar referencia para cleanup
-      ;(window as any).__vueComponentUnmount = result.unmount
-
-      canvasStore.addToHistory({ tool: 'render_vue_component', args, timestamp: Date.now() })
-      return `Componente Vue "${args.name}" renderizado correctamente`
-    }
-  )
-
-  // save_vue_component: Guarda un componente en la base de datos
-  mcp.registerTool(
-    'save_vue_component',
-    'Guarda un componente Vue en la base de datos para reutilizarlo después',
-    {
-      type: 'object',
-      properties: {
-        id: {
-          type: 'string',
-          description: 'ID único del componente (se genera automáticamente si no se proporciona)'
-        },
-        name: {
-          type: 'string',
-          description: 'Nombre del componente'
-        },
-        template: {
-          type: 'string',
-          description: 'Template HTML del componente'
-        },
-        setup: {
-          type: 'string',
-          description: 'Código de la función setup'
-        },
-        style: {
-          type: 'string',
-          description: 'CSS del componente'
-        },
-        props: {
-          type: 'array',
-          items: { type: 'string' },
-          description: 'Lista de props'
-        },
-        imports: {
-          type: 'array',
-          items: { type: 'string' },
-          description: 'Funciones de Vue necesarias'
-        }
-      },
-      required: ['name', 'template']
-    },
-    async (args: Omit<VueComponentDefinition, 'id'> & { id?: string }) => {
-      try {
-        const result = await componentsApi.save({
-          id: args.id || `comp-${Date.now()}`,
-          name: args.name,
-          template: args.template,
-          setup: args.setup,
-          style: args.style,
-          props: args.props,
-          imports: args.imports
-        })
-        canvasStore.addToHistory({ tool: 'save_vue_component', args, timestamp: Date.now() })
-        return `Componente "${args.name}" guardado con ID: ${result.id}`
-      } catch (e: any) {
-        return `Error al guardar: ${e.message}`
-      }
-    }
-  )
-
-  // load_vue_component: Carga y renderiza un componente guardado
-  mcp.registerTool(
-    'load_vue_component',
-    'Carga un componente Vue guardado desde la base de datos y lo renderiza',
-    {
-      type: 'object',
-      properties: {
-        id: {
-          type: 'string',
-          description: 'ID del componente a cargar'
-        },
-        componentProps: {
-          type: 'object',
-          description: 'Props para pasar al componente'
-        },
-        mode: {
-          type: 'string',
-          enum: ['replace', 'append'],
-          description: 'replace: limpia el canvas, append: agrega al final'
-        }
-      },
-      required: ['id']
-    },
-    async (args: { id: string; componentProps?: Record<string, any>; mode?: string }) => {
-      try {
-        const definition = await componentsApi.getById(args.id)
-        if (!definition) {
-          return `Error: Componente con ID "${args.id}" no encontrado`
-        }
-
-        const container = document.getElementById('canvas-content')
-        if (!container) return 'Error: canvas no encontrado'
-
-        const placeholder = container.querySelector('.canvas-placeholder')
-        if (placeholder) placeholder.remove()
-
-        const isAppend = args.mode === 'append'
-        const result = renderInlineComponent(definition, container, args.componentProps || {}, isAppend)
-        ;(window as any).__vueComponentUnmount = result.unmount
-
-        canvasStore.addToHistory({ tool: 'load_vue_component', args, timestamp: Date.now() })
-        return `Componente "${definition.name}" cargado y renderizado`
-      } catch (e: any) {
-        return `Error: ${e.message}`
-      }
-    }
-  )
-
-  // list_vue_components: Lista los componentes guardados
-  mcp.registerTool(
-    'list_vue_components',
-    'Lista todos los componentes Vue guardados en la base de datos',
-    {
-      type: 'object',
-      properties: {}
-    },
-    async () => {
-      try {
-        const components = await componentsApi.getAll()
-        if (components.length === 0) {
-          return 'No hay componentes guardados'
-        }
-        const list = components.map(c => `- ${c.id}: ${c.name}`).join('\n')
-        return `Componentes guardados:\n${list}`
-      } catch (e: any) {
-        return `Error: ${e.message}`
-      }
-    }
-  )
-
-  // delete_vue_component: Elimina un componente
-  mcp.registerTool(
-    'delete_vue_component',
-    'Elimina un componente Vue de la base de datos',
-    {
-      type: 'object',
-      properties: {
-        id: {
-          type: 'string',
-          description: 'ID del componente a eliminar'
-        }
-      },
-      required: ['id']
-    },
-    async (args: { id: string }) => {
-      try {
-        await componentsApi.delete(args.id)
-        return `Componente "${args.id}" eliminado`
-      } catch (e: any) {
-        return `Error: ${e.message}`
-      }
-    }
-  )
-}
+onUnmounted(() => {
+  window.removeEventListener('load-vue-component', handleLoadComponent)
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ComponentsDropdown.vue b/frontend/src/components/ComponentsDropdown.vue
new file mode 100644
index 0000000..0d2bc58
--- /dev/null
+++ b/frontend/src/components/ComponentsDropdown.vue
@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useComponentsStore } from '../stores/components'
+
+const store = useComponentsStore()
+const isOpen = ref(false)
+
+async function handleLoadComponent(comp: any) {
+  window.dispatchEvent(new CustomEvent('load-vue-component', {
+    detail: {
+      id: comp.id,
+      name: comp.name,
+      template: comp.template,
+      setup: comp.setup,
+      style: comp.style,
+      props: typeof comp.props === 'string' ? JSON.parse(comp.props) : comp.props || [],
+      imports: typeof comp.imports === 'string' ? JSON.parse(comp.imports) : comp.imports || []
+    }
+  }))
+  isOpen.value = false
+}
+
+async function handleDelete(id: string, e: Event) {
+  e.stopPropagation()
+  if (!confirm('¿Eliminar este componente?')) return
+  await store.deleteComponent(id)
+}
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    store.fetchComponents()
+  }
+}
+
+function closeDropdown(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.dropdown-container')) {
+    isOpen.value = false
+  }
+}
+
+function onComponentRendered(e: Event) {
+  store.handleComponentRendered((e as CustomEvent).detail)
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeDropdown)
+  window.addEventListener('vue-component-rendered', onComponentRendered)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeDropdown)
+  window.removeEventListener('vue-component-rendered', onComponentRendered)
+})
+</script>
+
+<template>
+  <div class="dropdown-container">
+    <button class="dropdown-trigger" @click.stop="toggleDropdown" title="Componentes guardados">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
+        <polyline points="3.29 7 12 12 20.71 7"/>
+        <line x1="12" y1="22" x2="12" y2="12"/>
+      </svg>
+      <span>Componentes</span>
+      <span v-if="store.hasCurrentComponent" class="badge">1</span>
+      <svg class="chevron" :class="{ open: isOpen }" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="6 9 12 15 18 9"/>
+      </svg>
+    </button>
+
+    <div v-if="isOpen" class="dropdown-menu" @click.stop>
+      <!-- Componente actual -->
+      <div v-if="store.currentComponent" class="section current-section">
+        <div class="section-header">
+          <span class="section-title">Componente actual</span>
+        </div>
+        <div class="current-component">
+          <div class="item-info">
+            <span class="item-name">{{ store.currentComponent.name }}</span>
+            <span class="item-id">{{ store.currentComponent.id }}</span>
+          </div>
+          <div class="item-actions">
+            <button
+              class="action-btn save-btn"
+              @click="store.saveCurrentComponent()"
+              :disabled="store.saving"
+              title="Guardar componente"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+                <polyline points="17 21 17 13 7 13 7 21"/>
+                <polyline points="7 3 7 8 15 8"/>
+              </svg>
+            </button>
+            <button
+              class="action-btn delete-btn"
+              @click="store.clearCurrentComponent()"
+              title="Descartar"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Separador -->
+      <div v-if="store.currentComponent && store.savedCount > 0" class="divider"></div>
+
+      <!-- Componentes guardados -->
+      <div class="section saved-section">
+        <div class="section-header">
+          <span class="section-title">Guardados</span>
+          <span class="section-count">{{ store.savedCount }}</span>
+        </div>
+
+        <div v-if="store.loading" class="dropdown-loading">
+          Cargando...
+        </div>
+        <div v-else-if="store.savedCount === 0" class="dropdown-empty">
+          No hay componentes guardados
+        </div>
+        <template v-else>
+          <div
+            v-for="comp in store.savedComponents"
+            :key="comp.id"
+            class="dropdown-item"
+          >
+            <div class="item-info" @click="handleLoadComponent(comp)">
+              <span class="item-name">{{ comp.name }}</span>
+              <span class="item-id">{{ comp.id }}</span>
+            </div>
+            <div class="item-actions">
+              <button
+                class="action-btn load-btn"
+                @click="handleLoadComponent(comp)"
+                title="Cargar en canvas"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <polyline points="15 10 20 15 15 20"/>
+                  <path d="M4 4v7a4 4 0 0 0 4 4h12"/>
+                </svg>
+              </button>
+              <button
+                class="action-btn delete-btn"
+                @click="handleDelete(comp.id, $event)"
+                title="Eliminar"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M3 6h18"/>
+                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+                  <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
+                </svg>
+              </button>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dropdown-container {
+  position: relative;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-hover);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.dropdown-trigger:hover {
+  background: var(--bg-tertiary, rgba(255,255,255,0.1));
+  color: var(--text-primary);
+  border-color: var(--border-hover, var(--border-color));
+}
+
+.badge {
+  background: #6366f1;
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.chevron {
+  transition: transform 0.2s ease;
+}
+
+.chevron.open {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 300px;
+  max-height: 400px;
+  overflow-y: auto;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+}
+
+.section {
+  padding: 0.5rem;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+}
+
+.section-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+.section-count {
+  font-size: 0.7rem;
+  background: var(--bg-hover);
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  color: var(--text-secondary);
+}
+
+.divider {
+  height: 1px;
+  background: var(--border-color);
+  margin: 0;
+}
+
+.current-section {
+  background: rgba(99, 102, 241, 0.1);
+  border-radius: 8px;
+  margin: 0.5rem;
+}
+
+.current-component {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  gap: 1rem;
+}
+
+.dropdown-loading,
+.dropdown-empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0.75rem;
+  border-radius: 8px;
+  margin: 0.25rem 0;
+  transition: background 0.15s ease;
+}
+
+.dropdown-item:hover {
+  background: var(--bg-hover);
+}
+
+.item-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  cursor: pointer;
+  flex: 1;
+}
+
+.item-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.item-id {
+  font-size: 0.7rem;
+  color: var(--text-secondary);
+  font-family: monospace;
+}
+
+.item-actions {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  background: transparent;
+  color: var(--text-secondary);
+}
+
+.action-btn:hover {
+  transform: scale(1.1);
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.save-btn:hover {
+  background: rgba(34, 197, 94, 0.2);
+  color: #22c55e;
+}
+
+.load-btn:hover {
+  background: rgba(99, 102, 241, 0.2);
+  color: #6366f1;
+}
+
+.delete-btn:hover {
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
+}
+</style>
diff --git a/frontend/src/services/canvasTools.ts b/frontend/src/services/canvasTools.ts
new file mode 100644
index 0000000..6492e3e
--- /dev/null
+++ b/frontend/src/services/canvasTools.ts
@@ -0,0 +1,257 @@
+import { useCanvasStore } from '../stores/canvas'
+import { registerTool } from './webmcp'
+import {
+  renderInlineComponent,
+  componentsApi,
+  type VueComponentDefinition
+} from './dynamicComponents'
+
+function getCanvasContainer() {
+  return document.getElementById('canvas-content')
+}
+
+function removePlaceholder(container: HTMLElement) {
+  const placeholder = container.querySelector('.canvas-placeholder')
+  if (placeholder) placeholder.remove()
+}
+
+function emitComponentRendered(args: any) {
+  window.dispatchEvent(new CustomEvent('vue-component-rendered', {
+    detail: {
+      id: args.id,
+      name: args.name,
+      template: args.template,
+      setup: args.setup,
+      style: args.style,
+      props: args.props,
+      imports: args.imports
+    }
+  }))
+}
+
+export function registerCanvasTools() {
+  const canvasStore = useCanvasStore()
+
+  // render_html
+  registerTool(
+    'render_html',
+    'Renderiza HTML en el canvas. Soporta <script> tags que se ejecutan automáticamente y <style> tags.',
+    {
+      type: 'object',
+      properties: {
+        html: {
+          type: 'string',
+          description: 'El código HTML a renderizar (puede incluir <script> y <style> tags)'
+        },
+        mode: {
+          type: 'string',
+          enum: ['replace', 'append', 'prepend'],
+          description: 'Modo: replace (reemplaza), append (agrega al final), prepend (al inicio)'
+        }
+      },
+      required: ['html']
+    },
+    (args: { html: string; mode?: string }) => {
+      const container = getCanvasContainer()
+      if (!container) return 'Error: canvas no encontrado'
+
+      removePlaceholder(container)
+
+      const mode = args.mode || 'replace'
+      if (mode === 'replace') {
+        container.innerHTML = args.html
+      } else if (mode === 'append') {
+        container.insertAdjacentHTML('beforeend', args.html)
+      } else if (mode === 'prepend') {
+        container.insertAdjacentHTML('afterbegin', args.html)
+      }
+
+      // Ejecutar scripts inline
+      const scripts = container.querySelectorAll('script')
+      scripts.forEach((oldScript) => {
+        const newScript = document.createElement('script')
+        Array.from(oldScript.attributes).forEach(attr => {
+          newScript.setAttribute(attr.name, attr.value)
+        })
+        newScript.textContent = oldScript.textContent
+        oldScript.parentNode?.replaceChild(newScript, oldScript)
+      })
+
+      canvasStore.addToHistory({ tool: 'render_html', args, timestamp: Date.now() })
+      return 'HTML renderizado'
+    }
+  )
+
+  // render_vue_component
+  registerTool(
+    'render_vue_component',
+    'Renderiza un componente Vue 3 completo con acceso a ref, reactive, computed, watch, Pinia stores, etc.',
+    {
+      type: 'object',
+      properties: {
+        id: { type: 'string', description: 'ID único del componente' },
+        name: { type: 'string', description: 'Nombre del componente (ej: MyCounter)' },
+        template: { type: 'string', description: 'Template HTML del componente con sintaxis Vue' },
+        setup: { type: 'string', description: 'Código de la función setup (debe retornar un objeto con las propiedades reactivas)' },
+        style: { type: 'string', description: 'CSS del componente (opcional)' },
+        props: { type: 'array', items: { type: 'string' }, description: 'Lista de props que acepta el componente' },
+        imports: { type: 'array', items: { type: 'string' }, description: 'Funciones de Vue a importar: ref, reactive, computed, watch, watchEffect, onMounted, onUnmounted, nextTick, h' },
+        componentProps: { type: 'object', description: 'Valores para las props del componente' },
+        mode: { type: 'string', enum: ['replace', 'append'], description: 'replace: limpia el canvas, append: agrega al final' }
+      },
+      required: ['id', 'name', 'template']
+    },
+    (args: {
+      id: string
+      name: string
+      template: string
+      setup?: string
+      style?: string
+      props?: string[]
+      imports?: string[]
+      componentProps?: Record<string, any>
+      mode?: string
+    }) => {
+      const container = getCanvasContainer()
+      if (!container) return 'Error: canvas no encontrado'
+
+      removePlaceholder(container)
+
+      const definition: VueComponentDefinition = {
+        id: args.id,
+        name: args.name,
+        template: args.template,
+        setup: args.setup,
+        style: args.style,
+        props: args.props,
+        imports: args.imports || ['ref', 'reactive', 'computed']
+      }
+
+      const isAppend = args.mode === 'append'
+      const result = renderInlineComponent(definition, container, args.componentProps || {}, isAppend)
+
+      ;(window as any).__vueComponentUnmount = result.unmount
+
+      emitComponentRendered(args)
+
+      canvasStore.addToHistory({ tool: 'render_vue_component', args, timestamp: Date.now() })
+      return `Componente Vue "${args.name}" renderizado correctamente`
+    }
+  )
+
+  // save_vue_component
+  registerTool(
+    'save_vue_component',
+    'Guarda un componente Vue en la base de datos para reutilizarlo después',
+    {
+      type: 'object',
+      properties: {
+        id: { type: 'string', description: 'ID único del componente (se genera automáticamente si no se proporciona)' },
+        name: { type: 'string', description: 'Nombre del componente' },
+        template: { type: 'string', description: 'Template HTML del componente' },
+        setup: { type: 'string', description: 'Código de la función setup' },
+        style: { type: 'string', description: 'CSS del componente' },
+        props: { type: 'array', items: { type: 'string' }, description: 'Lista de props' },
+        imports: { type: 'array', items: { type: 'string' }, description: 'Funciones de Vue necesarias' }
+      },
+      required: ['name', 'template']
+    },
+    async (args: Omit<VueComponentDefinition, 'id'> & { id?: string }) => {
+      try {
+        const result = await componentsApi.save({
+          id: args.id || `comp-${Date.now()}`,
+          name: args.name,
+          template: args.template,
+          setup: args.setup,
+          style: args.style,
+          props: args.props,
+          imports: args.imports
+        })
+        canvasStore.addToHistory({ tool: 'save_vue_component', args, timestamp: Date.now() })
+        return `Componente "${args.name}" guardado con ID: ${result.id}`
+      } catch (e: any) {
+        return `Error al guardar: ${e.message}`
+      }
+    }
+  )
+
+  // load_vue_component
+  registerTool(
+    'load_vue_component',
+    'Carga un componente Vue guardado desde la base de datos y lo renderiza',
+    {
+      type: 'object',
+      properties: {
+        id: { type: 'string', description: 'ID del componente a cargar' },
+        componentProps: { type: 'object', description: 'Props para pasar al componente' },
+        mode: { type: 'string', enum: ['replace', 'append'], description: 'replace: limpia el canvas, append: agrega al final' }
+      },
+      required: ['id']
+    },
+    async (args: { id: string; componentProps?: Record<string, any>; mode?: string }) => {
+      try {
+        const definition = await componentsApi.getById(args.id)
+        if (!definition) {
+          return `Error: Componente con ID "${args.id}" no encontrado`
+        }
+
+        const container = getCanvasContainer()
+        if (!container) return 'Error: canvas no encontrado'
+
+        removePlaceholder(container)
+
+        const isAppend = args.mode === 'append'
+        const result = renderInlineComponent(definition, container, args.componentProps || {}, isAppend)
+        ;(window as any).__vueComponentUnmount = result.unmount
+
+        canvasStore.addToHistory({ tool: 'load_vue_component', args, timestamp: Date.now() })
+        return `Componente "${definition.name}" cargado y renderizado`
+      } catch (e: any) {
+        return `Error: ${e.message}`
+      }
+    }
+  )
+
+  // list_vue_components
+  registerTool(
+    'list_vue_components',
+    'Lista todos los componentes Vue guardados en la base de datos',
+    {
+      type: 'object',
+      properties: {}
+    },
+    async () => {
+      try {
+        const components = await componentsApi.getAll()
+        if (components.length === 0) {
+          return 'No hay componentes guardados'
+        }
+        const list = components.map(c => `- ${c.id}: ${c.name}`).join('\n')
+        return `Componentes guardados:\n${list}`
+      } catch (e: any) {
+        return `Error: ${e.message}`
+      }
+    }
+  )
+
+  // delete_vue_component
+  registerTool(
+    'delete_vue_component',
+    'Elimina un componente Vue de la base de datos',
+    {
+      type: 'object',
+      properties: {
+        id: { type: 'string', description: 'ID del componente a eliminar' }
+      },
+      required: ['id']
+    },
+    async (args: { id: string }) => {
+      try {
+        await componentsApi.delete(args.id)
+        return `Componente "${args.id}" eliminado`
+      } catch (e: any) {
+        return `Error: ${e.message}`
+      }
+    }
+  )
+}
diff --git a/frontend/src/services/webmcp.ts b/frontend/src/services/webmcp.ts
new file mode 100644
index 0000000..4f10026
--- /dev/null
+++ b/frontend/src/services/webmcp.ts
@@ -0,0 +1,52 @@
+import { useCanvasStore } from '../stores/canvas'
+
+let webmcpInstance: any = null
+
+export async function initWebMCP() {
+  if (webmcpInstance) return webmcpInstance
+
+  const WebMCPModule = await import('@nucleoriofrio/webmcp/src/webmcp.js')
+  const WebMCP = WebMCPModule.default || WebMCPModule
+
+  webmcpInstance = new WebMCP({
+    color: '#6366f1',
+    position: 'bottom-right',
+    inactivityTimeout: 60 * 60 * 1000 // 1 hora
+  })
+
+  const canvasStore = useCanvasStore()
+
+  webmcpInstance.on?.('connected', () => {
+    canvasStore.setConnected(true)
+  })
+
+  webmcpInstance.on?.('disconnected', () => {
+    canvasStore.setConnected(false)
+  })
+
+  if (webmcpInstance.isConnected) {
+    canvasStore.setConnected(true)
+  }
+
+  // Exponer globalmente para debug
+  ;(window as any).webmcp = webmcpInstance
+
+  return webmcpInstance
+}
+
+export function getWebMCP() {
+  return webmcpInstance
+}
+
+export function registerTool(
+  name: string,
+  description: string,
+  schema: object,
+  handler: Function
+) {
+  if (!webmcpInstance) {
+    console.warn('[WebMCP] Instance not initialized')
+    return
+  }
+  webmcpInstance.registerTool(name, description, schema, handler)
+}
diff --git a/frontend/src/stores/components.ts b/frontend/src/stores/components.ts
new file mode 100644
index 0000000..5e06b6a
--- /dev/null
+++ b/frontend/src/stores/components.ts
@@ -0,0 +1,124 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { componentsApi, type VueComponentDefinition } from '../services/dynamicComponents'
+
+export interface ComponentState extends VueComponentDefinition {
+  created_at?: string
+  updated_at?: string
+}
+
+export const useComponentsStore = defineStore('components', () => {
+  // State
+  const savedComponents = ref<ComponentState[]>([])
+  const currentComponent = ref<ComponentState | null>(null)
+  const loading = ref(false)
+  const saving = ref(false)
+
+  // Getters
+  const savedCount = computed(() => savedComponents.value.length)
+  const hasCurrentComponent = computed(() => currentComponent.value !== null)
+
+  // Actions
+  async function fetchComponents() {
+    loading.value = true
+    try {
+      savedComponents.value = await componentsApi.getAll()
+    } catch (e) {
+      console.error('Error fetching components:', e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function saveComponent(component: ComponentState) {
+    saving.value = true
+    try {
+      await componentsApi.save({
+        id: component.id,
+        name: component.name,
+        template: component.template,
+        setup: component.setup,
+        style: component.style,
+        props: component.props,
+        imports: component.imports
+      })
+      await fetchComponents()
+      return true
+    } catch (e) {
+      console.error('Error saving component:', e)
+      return false
+    } finally {
+      saving.value = false
+    }
+  }
+
+  async function saveCurrentComponent() {
+    if (!currentComponent.value) return false
+    return saveComponent(currentComponent.value)
+  }
+
+  async function deleteComponent(id: string) {
+    try {
+      await componentsApi.delete(id)
+      await fetchComponents()
+      return true
+    } catch (e) {
+      console.error('Error deleting component:', e)
+      return false
+    }
+  }
+
+  async function deleteAllComponents() {
+    try {
+      await componentsApi.deleteAll()
+      savedComponents.value = []
+      return true
+    } catch (e) {
+      console.error('Error deleting all components:', e)
+      return false
+    }
+  }
+
+  function setCurrentComponent(component: ComponentState | null) {
+    currentComponent.value = component
+  }
+
+  function clearCurrentComponent() {
+    currentComponent.value = null
+  }
+
+  // Listener para cuando se renderiza un componente
+  function handleComponentRendered(detail: any) {
+    if (detail) {
+      currentComponent.value = {
+        id: detail.id || `comp-${Date.now()}`,
+        name: detail.name || 'Unnamed',
+        template: detail.template || '',
+        setup: detail.setup || '',
+        style: detail.style || '',
+        props: detail.props || [],
+        imports: detail.imports || []
+      }
+    }
+  }
+
+  return {
+    // State
+    savedComponents,
+    currentComponent,
+    loading,
+    saving,
+    // Getters
+    savedCount,
+    hasCurrentComponent,
+    // Actions
+    fetchComponents,
+    saveComponent,
+    saveCurrentComponent,
+    deleteComponent,
+    deleteAllComponents,
+    setCurrentComponent,
+    clearCurrentComponent,
+    handleComponentRendered
+  }
+})