feat: Add dynamic Vue 3 components system

- Add dynamicComponents.ts service (~300 lines)
  - CSS scoping with high specificity
  - Async setup support with Suspense
  - Event bus for inter-component communication
  - Shared Pinia store with main app
  - No app overhead (uses render + createVNode)

- Add MCP tools for Vue components
  - render_vue_component
  - save_vue_component
  - load_vue_component
  - list_vue_components
  - delete_vue_component

- Add SQLite table for component persistence
- Add TypeScript declarations for webmcp
- Configure Vite for runtime template compilation
- Add comprehensive README with documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-13 04:15:53 -06:00
parent 52c93930e1
commit 075e167389
8 changed files with 1054 additions and 3 deletions

28
frontend/src/types/webmcp.d.ts vendored Normal file
View File

@@ -0,0 +1,28 @@
declare module '@nucleoriofrio/webmcp/src/webmcp.js' {
interface WebMCPOptions {
color?: string
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
inactivityTimeout?: number
}
interface ToolSchema {
type: string
properties: Record<string, any>
required?: string[]
}
type ToolHandler = (args: any) => string | Promise<string>
class WebMCP {
constructor(options?: WebMCPOptions)
registerTool(name: string, description: string, schema: ToolSchema, handler: ToolHandler): void
unregisterTool(name: string): void
connect(): Promise<void>
disconnect(): void
on?(event: 'connected' | 'disconnected' | string, callback: () => void): void
off?(event: string, callback: () => void): void
isConnected?: boolean
}
export default WebMCP
}