Initial commit - agent-ui project

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-13 03:10:06 -06:00
commit 52c93930e1
37 changed files with 9040 additions and 0 deletions
--- a/frontend/src/components/Canvas.vue
+++ b/frontend/src/components/Canvas.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useCanvasStore } from '../stores/canvas'
+
+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
+
+  const webmcp = new WebMCP({
+    color: '#6366f1',
+    position: 'bottom-right',
+    inactivityTimeout: 60 * 60 * 1000 // 1 hora
+  })
+
+  // Registrar herramientas para el canvas
+  registerCanvasTools(webmcp)
+
+  // Exponer webmcp globalmente para debug
+  ;(window as any).webmcp = webmcp
+})
+
+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'
+    }
+  )
+}
+</script>
+
+<template>
+  <div class="canvas-container">
+    <div id="canvas-content" class="canvas-content">
+      <div class="canvas-placeholder">
+        <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <rect x="3" y="3" width="18" height="18" rx="2"/>
+          <path d="M3 9h18"/>
+          <path d="M9 21V9"/>
+        </svg>
+        <p>Canvas listo</p>
+        <span>Haz clic en el cuadrado azul (abajo derecha) para conectar con Claude Code</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.canvas-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  overflow: auto;
+}
+
+.canvas-content {
+  flex: 1;
+  padding: 1.5rem;
+  min-height: 100%;
+}
+
+.canvas-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 400px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.canvas-placeholder svg {
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.canvas-placeholder p {
+  font-size: 1.25rem;
+  margin: 0 0 0.5rem 0;
+}
+
+.canvas-placeholder span {
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+</style>