{ "$schema": "./schema.json", "name": "Markdown Widgetlets", "description": "A collection of visualization and utility components for data presentation and interaction.", "version": "1.0.0", "publisher": "Microservicios", "icon": "https://microservicios.co/favicon.ico", "remoteEntry": { "url": "https://unpkg.com/@microservicios/markdown-widgetlet/assets/remoteEntry.js", "scope": "remoteApp" }, "components": [ { "id": "architecture-visualizer-v1", "name": "Architecture Visualizer", "description": "An interactive architecture diagram and code explorer with node-based visualization, search, zoom controls, and project overview.", "goal": "Visualize system architectures, code structures, and project dependencies in an interactive, explorable format.", "version": "1.0.0", "publisher": "Microservicios", "icon": "https://microservicios.co/favicon.ico", "inputSchema": { "type": "object", "additionalProperties": false, "properties": { "projectName": { "type": "string", "description": "The name of the project being visualized.", "default": "My Project" }, "projectDescription": { "type": "string", "description": "A brief description of the project.", "default": "" }, "nodes": { "type": "array", "description": "Architecture nodes/components to display.", "default": [ { "id": "frontend", "label": "Frontend App", "type": "frontend" }, { "id": "api", "label": "REST API", "type": "api" }, { "id": "db", "label": "PostgreSQL", "type": "database" } ], "items": { "type": "object", "additionalProperties": false, "properties": { "id": { "type": "string", "description": "Unique identifier for the node." }, "label": { "type": "string", "description": "Display label for the node." }, "type": { "type": "string", "enum": [ "service", "database", "api", "frontend", "external", "queue", "storage", "custom" ], "description": "Type of node for styling." }, "icon": { "type": "string", "description": "Optional icon name (lucide-react icons)." }, "description": { "type": "string", "description": "Optional description for tooltip." }, "group": { "type": "string", "description": "Optional group/category for the node." }, "position": { "type": "object", "additionalProperties": false, "properties": { "x": { "type": "number" }, "y": { "type": "number" } }, "description": "Optional fixed position. Auto-layout if not provided." } }, "required": [ "id", "label", "type" ] } }, "edges": { "type": "array", "description": "Connections between nodes.", "default": [ { "source": "frontend", "target": "api", "type": "animated" }, { "source": "api", "target": "db", "type": "default" } ], "items": { "type": "object", "additionalProperties": false, "properties": { "id": { "type": "string", "description": "Optional unique identifier for the edge." }, "source": { "type": "string", "description": "Source node ID." }, "target": { "type": "string", "description": "Target node ID." }, "label": { "type": "string", "description": "Optional edge label." }, "type": { "type": "string", "enum": [ "default", "animated", "dashed" ], "description": "Edge display style.", "default": "default" } }, "required": [ "source", "target" ] } }, "files": { "type": "array", "description": "File tree for code explorer.", "default": [ { "id": "src", "name": "src", "path": "/src", "type": "directory", "children": [ { "id": "src-main", "name": "main.tsx", "path": "/src/main.tsx", "type": "file", "language": "typescript" }, { "id": "src-app", "name": "App.tsx", "path": "/src/App.tsx", "type": "file", "language": "typescript" }, { "id": "src-components", "name": "components", "path": "/src/components", "type": "directory", "children": [ { "id": "cmp-architecture", "name": "ArchitectureVisualizer.tsx", "path": "/src/components/ArchitectureVisualizer.tsx", "type": "file", "language": "typescript" }, { "id": "cmp-node", "name": "NodeCard.tsx", "path": "/src/components/NodeCard.tsx", "type": "file", "language": "typescript" } ] }, { "id": "src-hooks", "name": "hooks", "path": "/src/hooks", "type": "directory", "children": [ { "id": "hook-graph", "name": "useGraphLayout.ts", "path": "/src/hooks/useGraphLayout.ts", "type": "file", "language": "typescript" } ] } ] }, { "id": "public", "name": "public", "path": "/public", "type": "directory", "children": [ { "id": "public-index", "name": "index.html", "path": "/public/index.html", "type": "file", "language": "html" } ] }, { "id": "pkg", "name": "package.json", "path": "/package.json", "type": "file", "language": "json" }, { "id": "vite-config", "name": "vite.config.ts", "path": "/vite.config.ts", "type": "file", "language": "typescript" }, { "id": "readme", "name": "README.md", "path": "/README.md", "type": "file", "language": "markdown" } ], "items": { "type": "object", "additionalProperties": false, "properties": { "id": { "type": "string" }, "name": { "type": "string" }, "path": { "type": "string" }, "type": { "type": "string", "enum": [ "file", "directory" ] }, "language": { "type": "string", "description": "Programming language for files." }, "children": { "type": "array", "description": "Nested items for directories." } }, "required": [ "id", "name", "type" ] } }, "languages": { "type": "array", "description": "Language statistics for the project.", "default": [], "items": { "type": "object", "additionalProperties": false, "properties": { "name": { "type": "string" }, "percentage": { "type": "number" }, "color": { "type": "string", "description": "CSS color for the language bar." } }, "required": [ "name", "percentage" ] } }, "collaborators": { "type": "array", "description": "List of collaborators/contributors.", "default": [], "items": { "type": "object", "additionalProperties": false, "properties": { "name": { "type": "string" }, "avatar": { "type": "string", "description": "Avatar image URL." } }, "required": [ "name" ] } }, "theme": { "type": "string", "enum": [ "light", "dark", "auto" ], "description": "Color theme for the visualizer.", "default": "dark" }, "showFileTree": { "type": "boolean", "description": "Whether to show the file explorer panel.", "default": true }, "showAboutPanel": { "type": "boolean", "description": "Whether to show the project info sidebar.", "default": true } }, "required": [ "nodes" ] }, "outputSchema": { "type": "object", "additionalProperties": false, "properties": { "type": { "type": "string", "enum": [ "node_clicked", "node_hovered", "edge_clicked", "file_selected", "zoom_changed", "search_performed", "layout_changed" ], "description": "Event type emitted by the visualizer." }, "data": { "type": "object", "description": "Event-specific data payload." } }, "required": [ "type" ] }, "controlSchema": null, "defaultPayload": { "projectName": "My Project", "projectDescription": "", "nodes": [ { "id": "frontend", "label": "Frontend App", "type": "frontend" }, { "id": "api", "label": "REST API", "type": "api" }, { "id": "db", "label": "PostgreSQL", "type": "database" } ], "edges": [ { "source": "frontend", "target": "api", "type": "animated" }, { "source": "api", "target": "db", "type": "default" } ], "files": [ { "id": "src", "name": "src", "path": "/src", "type": "directory", "children": [ { "id": "src-main", "name": "main.tsx", "path": "/src/main.tsx", "type": "file", "language": "typescript" }, { "id": "src-app", "name": "App.tsx", "path": "/src/App.tsx", "type": "file", "language": "typescript" }, { "id": "src-components", "name": "components", "path": "/src/components", "type": "directory", "children": [ { "id": "cmp-architecture", "name": "ArchitectureVisualizer.tsx", "path": "/src/components/ArchitectureVisualizer.tsx", "type": "file", "language": "typescript" }, { "id": "cmp-node", "name": "NodeCard.tsx", "path": "/src/components/NodeCard.tsx", "type": "file", "language": "typescript" } ] }, { "id": "src-hooks", "name": "hooks", "path": "/src/hooks", "type": "directory", "children": [ { "id": "hook-graph", "name": "useGraphLayout.ts", "path": "/src/hooks/useGraphLayout.ts", "type": "file", "language": "typescript" } ] } ] }, { "id": "public", "name": "public", "path": "/public", "type": "directory", "children": [ { "id": "public-index", "name": "index.html", "path": "/public/index.html", "type": "file", "language": "html" } ] }, { "id": "pkg", "name": "package.json", "path": "/package.json", "type": "file", "language": "json" }, { "id": "vite-config", "name": "vite.config.ts", "path": "/vite.config.ts", "type": "file", "language": "typescript" }, { "id": "readme", "name": "README.md", "path": "/README.md", "type": "file", "language": "markdown" } ], "languages": [], "collaborators": [], "theme": "dark", "showFileTree": true, "showAboutPanel": true }, "defaultConfig": { "type": "InputNode", "inputType": "remote", "title": "Architecture Visualizer", "value": "", "component": { "remoteUrl": "https://unpkg.com/@microservicios/markdown-widgetlet/assets/remoteEntry.js", "scope": "remoteApp", "module": "./ArchitectureVisualizer" } } }, { "id": "bubble-chart-v1", "name": "Bubble Chart", "description": "Interactive bubble chart visualization for displaying multi-dimensional data with size and color encoding.", "goal": "Visualize hierarchical or categorical data using bubbles sized by value with interactive hover and click behaviors.", "version": "1.0.0", "publisher": "Microservicios", "icon": "https://microservicios.co/favicon.ico", "inputSchema": { "type": "object", "properties": { "data": { "type": "array", "description": "Array of data points for the bubble chart.", "items": { "type": "object", "properties": { "name": { "type": "string", "description": "Label for the bubble." }, "value": { "type": "number", "description": "Size value for the bubble." }, "category": { "type": "string", "description": "Optional category for color grouping." } }, "required": [ "name", "value" ] }, "default": [ { "name": "Item A", "value": 100, "category": "Group 1" }, { "name": "Item B", "value": 80, "category": "Group 1" }, { "name": "Item C", "value": 60, "category": "Group 2" } ] }, "colorScheme": { "type": "string", "enum": [ "default", "warm", "cool", "rainbow", "monochrome" ], "description": "Color scheme for the bubbles.", "default": "default" }, "showLabels": { "type": "boolean", "description": "Whether to show labels inside bubbles.", "default": true }, "animated": { "type": "boolean", "description": "Enable entrance and hover animations.", "default": true } }, "required": [ "data" ] }, "outputSchema": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "bubble_clicked", "bubble_hovered", "chart_rendered" ], "description": "Event type." }, "item": { "type": "object", "description": "The bubble data that was interacted with." } } }, "controlSchema": null, "defaultPayload": { "data": [ { "name": "Item A", "value": 100, "category": "Group 1" }, { "name": "Item B", "value": 80, "category": "Group 1" }, { "name": "Item C", "value": 60, "category": "Group 2" } ], "colorScheme": "default", "showLabels": true, "animated": true }, "defaultConfig": { "type": "InputNode", "inputType": "remote", "title": "Bubble Chart", "value": "", "component": { "remoteUrl": "https://unpkg.com/@microservicios/markdown-widgetlet/assets/remoteEntry.js", "scope": "remoteApp", "module": "./BubbleChart" } } }, { "id": "chess-v1", "name": "Chess", "description": "A fully interactive chess board that plays against a built-in minimax AI (alpha-beta pruning, configurable depth 1–5, default 3). The player controls their colour via click. The agent can inspect board state, issue moves in coordinate notation, start new games, and undo moves.", "goal": "Provide a playable, agent-controllable chess experience inside the chat interface. The agent can teach openings, demonstrate tactics, suggest moves, replay positions, and analyse games.", "version": "1.0.0", "publisher": "Microservicios", "icon": "https://microservicios.co/favicon.ico", "inputSchema": { "type": "object", "additionalProperties": false, "properties": { "title": { "type": "string", "description": "Widget window title", "default": "Ajedrez" }, "theme": { "type": "string", "enum": [ "light", "dark" ], "default": "dark", "description": "Board colour theme" }, "humanColor": { "type": "string", "enum": [ "w", "b" ], "default": "w", "description": "Which colour the human player controls (w = White, b = Black)" }, "aiDepth": { "type": "integer", "minimum": 1, "maximum": 5, "default": 3, "description": "Minimax search depth (1 = easy, 3 = balanced, 5 = strong but slower ~2 s/move)" } } }, "outputSchema": { "type": "object", "description": "Events emitted by the widget via onOutput.", "properties": { "type": { "type": "string", "enum": [ "move", "game_over", "state", "error" ], "description": "Event type" }, "san": { "type": "string", "description": "Standard Algebraic Notation of the move (move events)" }, "fen": { "type": "string", "description": "FEN string of the resulting position" }, "by": { "type": "string", "enum": [ "human", "ai" ], "description": "Who made the move (move events)" }, "result": { "type": "string", "enum": [ "white_wins", "black_wins", "draw" ], "description": "Game result (game_over events)" }, "turn": { "type": "string", "enum": [ "w", "b" ], "description": "Whose turn it is after the event" }, "in_check": { "type": "boolean", "description": "Whether the side to move is in check (state events)" }, "game_over": { "type": "boolean", "description": "Whether the game is over (state events)" }, "pgn": { "type": "string", "description": "Full PGN of the game so far (state events)" }, "move_history": { "type": "array", "items": { "type": "string" }, "description": "List of SAN moves played so far (state events)" }, "capturedByWhite": { "type": "array", "items": { "type": "string" }, "description": "Piece types captured by White (state events)" }, "capturedByBlack": { "type": "array", "items": { "type": "string" }, "description": "Piece types captured by Black (state events)" }, "pieces": { "type": "array", "description": "All pieces on the board: [{type,color,square}]. type: p=pawn,n=knight,b=bishop,r=rook,q=queen,k=king. color: w/b." }, "legal_moves": { "type": "array", "description": "All legal moves for the side to move: [{from,to,san,piece,flags}]. Use this to translate natural language to exact squares." }, "message": { "type": "string", "description": "Error description (error events)" } } }, "controlSchema": { "type": "string", "description": "Command string to control the chess widget. Moves use coordinate notation (source square + destination square).", "commands": [ { "command": "move [promo]", "description": "Make a move in coordinate notation. Accepted formats: \"move e2e4\" (joined) or \"move e2 e4\" (spaced). Promotion: append the piece letter, e.g. \"move d7d8q\" (queen). The move must be legal for the current turn — the widget will emit an error event if it is not.", "examples": [ "move e2e4", "move d2 d4", "move d7d8q" ] }, { "command": "new_game", "description": "Reset the board to the starting position and clear move history.", "example": "new_game" }, { "command": "undo", "description": "Undo the last two half-moves (human move + AI response). If fewer than two half-moves exist, only the available ones are undone.", "example": "undo" }, { "command": "get_state", "description": "Emits a \"state\" output event with: FEN, PGN, whose turn (w/b), in_check, game_over, and the full move_history array in SAN notation.", "example": "get_state" } ] }, "defaultPayload": { "title": "Ajedrez", "theme": "dark", "humanColor": "w", "aiDepth": 3 }, "defaultConfig": { "type": "InputNode", "inputType": "remote", "title": "Chess", "value": "", "component": { "remoteUrl": "https://unpkg.com/@microservicios/markdown-widgetlet/assets/remoteEntry.js", "scope": "remoteApp", "module": "./Chess" } } }, { "id": "triada-color-v1", "name": "Color Harmony Picker", "description": "An interactive color wheel with gradient picker, harmony modes, and palette generation. Features draggable color points and real-time palette updates.", "goal": "Help users select harmonious color palettes using color theory principles like analogous, complementary, and triadic relationships.", "version": "1.0.0", "publisher": "Microservicios", "icon": "https://microservicios.co/favicon.ico", "inputSchema": { "type": "object", "properties": { "baseColor": { "type": "string", "format": "hex-color", "description": "Initial base color in hex format to set the picker position.", "default": "#0B82DB" }, "harmony": { "type": "string", "enum": [ "analogous", "complementary", "triadic", "split-complementary", "tetradic", "monochromatic" ], "description": "Color harmony type to generate the palette.", "default": "analogous" } }, "required": [] }, "outputSchema": { "type": "object", "properties": { "type": { "type": "string", "enum": [ "palette_generated", "color_copied" ], "description": "Event type - either palette update or color copy action." }, "harmony": { "type": "string", "description": "The harmony type used for palette generation." }, "colors": { "type": "array", "items": { "type": "string" }, "description": "Array of hex color codes in the generated palette." }, "baseColor": { "type": "string", "description": "The primary/base color of the palette." }, "color": { "type": "string", "description": "The hex color that was copied (only for color_copied events)." } } }, "controlSchema": null, "defaultPayload": { "baseColor": "#0B82DB", "harmony": "analogous" }, "defaultConfig": { "type": "InputNode", "inputType": "remote", "title": "Color Harmony Picker", "value": "", "component": { "remoteUrl": "https://unpkg.com/@microservicios/markdown-widgetlet/assets/remoteEntry.js", "scope": "remoteApp", "module": "./TriadaColorComponent" } } }, { "id": "design-studio-v1", "name": "DesignStudio", "description": "A modern, professional Canva-like creative platform designed for non-designers. Enables users and AI agents to create marketing graphics, SaaS announcements, social media posts, pitch decks, quote cards, and presentation slides turn by turn with harmonized palettes, starter templates, touch controls, and high-res export.", "goal": "Empower non-designers and AI agents to rapidly produce polished, publication-ready graphic designs directly within conversational workflows with instant visual feedback and live state inspection.", "version": "1.0.0", "publisher": "Microservicios", "icon": "https://microservicios.co/favicon.ico", "inputSchema": { "type": "object", "additionalProperties": false, "properties": { "aspectRatio": { "type": "string", "enum": [ "1:1", "16:9", "9:16", "4:3", "3:4" ], "default": "1:1", "description": "Artboard aspect ratio (1:1 square post, 16:9 presentation slide, 9:16 vertical story, 4:3 pitch deck, 3:4 portrait flyer)." }, "theme": { "type": "string", "enum": [ "light", "dark" ], "default": "dark", "description": "Studio interface theme." }, "palette": { "type": "string", "enum": [ "saas", "minimal", "sunset", "luxury", "ocean", "creative" ], "default": "saas", "description": "Harmonized color palette." } } }, "outputSchema": { "type": "object", "additionalProperties": false, "properties": { "type": { "type": "string", "enum": [ "state_update" ], "description": "Always \"state_update\"." }, "data": { "type": "object", "description": "Current studio state: slideCount, currentSlide, aspectRatio, theme, palette, background, itemsCount, and items." } }, "required": [ "type", "data" ] }, "controlSchema": { "type": "string", "description": "Commands for creating and manipulating professional design slides, templates, text, cards, and styling.\n- Available starter templates: saas_launch, flash_sale, quote_minimal, metric_growth, hiring_card.\n- Available palettes: saas, minimal, sunset, luxury, ocean, creative.\n- Available backgrounds: solid, mesh, dots, spotlight, cards.\n- Available text types: heading, body, text.\n- Batch commands can be combined with semicolons \";\" or newlines \"\\n\".", "commands": [ { "command": "add_template ", "description": "Applies a complete professional designer template in 1 turn (saas_launch, flash_sale, quote_minimal, metric_growth, hiring_card). Example: \"add_template saas_launch\"" }, { "command": "add_text [x] [y] [fontSize] [color]", "description": "Adds a typography block with optional coordinates and styling. Example: \"add_text heading \"Nueva Colección\" 400 250 44 #ffffff\"" }, { "command": "add_badge