Code-MCP

import { z } from "zod"; /** * Visualization Tools - Generate visual representations of code and systems */ // ============================================ // Generate Diagram Tool // ============================================ export const generateDiagramSchema = { name: "generate_diagram", description: "Generates Mermaid.js diagrams to visualize code, systems, or flows", inputSchema: z.object({ type: z.enum([ "flowchart", "sequence", "class", "state", "erd", "gantt", "mindmap", "pie" ]).describe("Type of diagram to generate"), description: z.string().describe("Description of the system or flow to visualize"), direction: z.enum(["TB", "LR", "RL", "BT"]).optional().default("TB").describe("Direction (Top-Bottom, Left-Right)") }) }; export function generateDiagramHandler(args: { type: string; description: string; direction?: string }) { const { type, description, direction = "TB" } = args; // In a real implementation, this would use the LLM to process the description into Mermaid syntax. // Since we are simulating the *tool* response that guides the AI, we return instructions or a template. // However, since the AI *calling* this tool is the one generating the content, // we should return a prompt that helps the AI generate specific Mermaid syntax. // BUT, if this tool is meant to *produce* the diagram for the user, // the handler itself should ideally do the work or return the structure. // Let's return a structured response that acts as a "Diagram Builder" const templates: Record<string, string> = { flowchart: `graph ${direction} Start([Start]) --> Process[Process] Process --> Decision{Decision?} Decision -- Yes --> End([End]) Decision -- No --> Process`, sequence: `sequenceDiagram participant User participant System User->>System: Request System-->>User: Response`, class: `classDiagram class Animal { +String name +eat() } class Dog { +bark() } Animal <|-- Dog`, state: `stateDiagram-v2 [*] --> Idle Idle --> Processing : Event Processing --> [*]`, erd: `erDiagram USER ||--o{ POST : writes USER { string name string email } POST { string title string content }`, gantt: `gantt title Project Schedule dateFormat YYYY-MM-DD section Section Task :a1, 2024-01-01, 30d`, mindmap: `mindmap root((Central Idea)) Topic 1 Subtopic A Topic 2`, }; return { content: [{ type: "text", text: `# Mermaid Diagram: ${type}\n\nUse this syntax in your markdown files:\n\n\`\`\`mermaid\n${templates[type] || 'graph TD; A-->B;'}\n\`\`\`\n\n**Instructions for AI**: Replace the placeholder content above with the specific logic described in: "${description}".` }] }; } // ============================================ // Visualize System Tool // ============================================ export const visualizeSystemSchema = { name: "visualize_system", description: "Visualizes the high-level architecture of the current project", inputSchema: z.object({ components: z.array(z.string()).describe("List of system components"), relationships: z.array(z.string()).describe("List of connections (e.g. 'Web -> API')"), style: z.enum(["simple", "detailed", "c4"]).optional().default("simple") }) }; export function visualizeSystemHandler(args: { components: string[]; relationships: string[]; style?: string }) { const { components, relationships, style } = args; const graph = `graph ${style === 'simple' ? 'LR' : 'TB'} %% Components ${components.map(c => ` ${c.replace(/\s+/g, '')}[${c}]`).join('\n')} %% Relationships ${relationships.map(r => { const [from, to] = r.split('->').map(s => s.trim().replace(/\s+/g, '')); return ` ${from} --> ${to}`; }).join('\n')}`; return { content: [{ type: "text", text: `# System Architecture (${style})\n\n\`\`\`mermaid\n${graph}\n\`\`\`` }] }; } // Export all export const visualizationTools = { generateDiagramSchema, generateDiagramHandler, visualizeSystemSchema, visualizeSystemHandler };