Skip to main content

MCP Server

Pixello uses the Model Context Protocol (MCP) to orchestrate AI operations. The MCP server is Pixello's AI brain, handling design generation, code creation, and synchronization.

What Is MCP?​

Model Context Protocol (MCP) is a protocol for connecting AI assistants to external tools and data sources. It enables:

  • Tool orchestration: Coordinate multiple AI operations
  • Context management: Maintain state across operations
  • File operations: Read and write files in your repository
  • Extensibility: Add new capabilities without changing the core

MCP is developed by Anthropic and is becoming a standard for AI tool integration.

Why Pixello Uses MCP​

Pixello chose MCP because it:

  • Separates concerns: Extension handles UI, MCP handles AI logic
  • Enables extensibility: Easy to add new AI capabilities
  • Works across editors: Same MCP server works with Cursor and VS Code
  • Future-proof: MCP is an open standard with growing adoption

What the MCP Server Does​

Design Generation​

When you provide a prompt like "Create a landing page", the MCP server:

  1. Understands intent: Uses AI to parse your natural language description
  2. Generates structure: Creates a design JSON structure that matches your request
  3. Applies best practices: Incorporates design patterns and conventions
  4. Writes files: Saves the design JSON to your repository

Code Generation​

After creating the design JSON, the MCP server:

  1. Reads design JSON: Parses the design structure
  2. Generates components: Creates React/Next.js components
  3. Applies styles: Generates CSS or Tailwind classes
  4. Writes code files: Saves components to your project

Synchronization​

When you edit a design, the MCP server:

  1. Detects changes: Monitors design JSON files for updates
  2. Regenerates code: Updates code files to match the new design
  3. Maintains consistency: Ensures code and design stay aligned

AI Operations​

The MCP server orchestrates various AI operations:

  • Text generation: Creating content for your designs
  • Layout optimization: Arranging components effectively
  • Style suggestions: Recommending colors, spacing, typography
  • Code optimization: Generating clean, maintainable code

MCP Server Location​

The MCP server runs at:

👉 https://mcp.pixello.tech

It's accessible from your extension and handles all AI operations remotely. The server is optimized for performance and scales to handle multiple users.

Is MCP Required?​

MCP is not required for basic usage, but it enables advanced features:

Without MCP​

You can still:

  • Edit existing designs in the canvas
  • Modify generated code directly
  • Use design JSON files manually

With MCP​

You get:

  • AI-powered generation: Create designs from prompts
  • Intelligent editing: AI-assisted design modifications
  • Future features: Login, collaboration, usage limits (coming soon)

For now, MCP is primarily used for design and code generation. As Pixello evolves, MCP will enable more advanced features like user authentication, team collaboration, and usage analytics.

How It Works​

Communication Flow​

Extension → MCP Server → AI Models → MCP Server → Extension
  1. Extension sends your prompt to the MCP server
  2. MCP server processes the request using AI models
  3. AI generates design structure and code
  4. MCP server writes files to your repository
  5. Extension updates the UI and opens the canvas

File Operations​

The MCP server can:

  • Read: Access files in your repository (with permission)
  • Write: Create and update design JSON and code files
  • Watch: Monitor files for changes
  • Transform: Convert between formats

All file operations respect your repository structure and Git workflow.

Security & Privacy​

  • Local-first: Core functionality works without MCP
  • Selective access: MCP only accesses files it needs
  • No data storage: MCP doesn't store your designs or code
  • Transparent: You can see what files MCP accesses

Future Features​

MCP will enable upcoming features:

  • User accounts: Login and sync across devices
  • Collaboration: Multiple developers working on the same design
  • Usage limits: Track and manage AI usage
  • Templates: Share and discover design patterns
  • Analytics: Understand how you use Pixello

Troubleshooting​

MCP Server Unavailable​

If the MCP server is down:

  • Basic editing still works
  • You can edit designs manually
  • Code generation may be limited

Connection Issues​

If you can't connect to the MCP server:

  • Check your internet connection
  • Verify the server is accessible: https://mcp.pixello.tech
  • Check extension logs for error messages

What's Next?​

Now that you understand the MCP server, learn about: