Kazo Design MCP

Communicate your design intentions to AI assistants with quick sketches and mockups.

Kazo Design MCP is a Visual Studio Code extension that helps you communicate your design ideas to AI assistants like GitHub Copilot. Create quick sketches, mockups, or wireframes to visually express what you want the AI to build.

✨ Features

🎨 Quick Sketch Editor

Create rapid mockups and wireframes directly within VS Code. The editor provides a simple, intuitive interface for expressing your design ideas to AI assistants.

🧠 AI Communication Tool (MCP)

The Model Context Protocol (MCP) integration enables seamless communication between you and your AI assistant. Your sketches become visual context that helps the AI understand exactly what you want.

🔧 Shape Tools

• Rectangle: Create boxes for layouts, containers, or buttons
• Circle: Add circular elements for icons, avatars, or decorations
• Line: Draw connections, separators, or pointing elements
• Text: Add labels to explain different parts of your sketch

✅ Confirm & Return

When your sketch is ready:

• Click the "Confirm & Return to AI" button
• Optionally save your sketch to a file
• The AI receives your visual context and can proceed with your request

💾 Smart Export Format

When saving a design, two files are created automatically:

• SVG file: The vector image for use in documentation, websites, or further editing
• Markdown file: Companion documentation containing title, preview image, original prompt, and technical data in JSON format

🎯 Interactive Canvas

• Drag & Drop: Move elements freely on the canvas
• Selection: Click to select elements for editing or deletion
• Grid: Visual grid overlay for precise alignment
• Zoom: Ctrl+scroll to zoom in/out
• Pan: Scroll to pan around the canvas

🔌 VS Code Integration

• Native VS Code commands and keyboard shortcuts
• Webview panel with full VS Code theming support
• State persistence across VS Code sessions

📋 Workflow

When working with an AI assistant (like GitHub Copilot), use Kazo Design MCP to better communicate your vision:

1. Request: Ask the AI to create something (e.g., a web page, a component, a UI layout)
2. Sketch: The AI invites you to create a visual sketch of what you have in mind
3. Draw: Open the SVG editor and draw your idea using simple shapes
4. Confirm: Click the "Confirm & Return to AI" button when your sketch is ready
5. Save (Optional): Choose to save your sketch with a custom name and location
6. Generate: The AI uses your sketch to better understand and implement your request

🚀 Usage

Opening the Editor

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
2. Type "Kazo Design" and select one of:
   • Kazo Design: Open Editor - Opens the diagram editor
   • Kazo Design: New Design - Creates a new design

Creating Shapes

1. Click a shape tool in the toolbar (Rectangle, Circle, Line, or Text)
2. The shape will be added to the canvas at a random position
3. Drag shapes to reposition them
4. Click on a shape to select it
5. Use the Delete button to remove selected shapes

Exporting Your Design

1. Click the Export SVG button to download the SVG file
2. Click the Export JSON button to download the design data
3. Use the save functionality to create both SVG and Markdown files

📝 Commands

🔧 MCP Tools Available

Kazo Design MCP provides several tools for AI assistants:

📁 File Format

Design JSON Structure

{
  "id": "uuid",
  "title": "My Design",
  "canvasWidth": 800,
  "canvasHeight": 600,
  "backgroundColor": "#2d2d30",
  "elements": [
    {
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 150,
      "height": 100,
      "fill": "#4a90d9",
      "stroke": "#0078d4"
    }
  ],
  "createdAt": "2024-01-01T00:00:00Z",
  "modifiedAt": "2024-01-01T00:00:00Z"
}

Supported Shape Types

🔨 Building from Source

Prerequisites

• .NET 10 SDK
• Node.js 18+
• Visual Studio Code

Build Steps

1. Clone the repository

   git clone https://github.com/werddomain/Kazo-Desing-MCP.git
   cd Kazo-Desing-MCP
   

2. Build the Blazor UI

   cd src/KazoDesign.Editor
   dotnet restore
   dotnet publish -c Release -o ../../vscode-extension/media/ui
   

3. Build the VS Code extension

   cd vscode-extension
   npm install
   npm run compile
   

4. Run in development mode

   • Open the project in VS Code
   • Press F5 to launch the Extension Development Host

📄 License

This project is licensed under the BSD 2-Clause License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🐛 Issues

If you encounter any issues or have feature requests, please open an issue on GitHub.

🙏 Acknowledgments

• Built with Blazor WebAssembly
• Powered by VS Code Extension API
• SVG rendering and manipulation