Skip to main content

Installation

Pixello is available as an extension for both Cursor and VS Code. Installation is straightforward and takes just a few minutes.

Pixello works best in Cursor because it's optimized for AI-powered workflows.

Steps​

  1. Open Cursor
  2. Go to Extensions (⌘+Shift+X on Mac, Ctrl+Shift+X on Windows/Linux)
  3. Search for Pixello
  4. Click Install

👉 Install from Open VSX

Why Cursor?​

Cursor's AI-first architecture makes Pixello's design generation and editing flows more seamless. The extension integrates deeply with Cursor's AI features for a better experience.

Install on VS Code​

Pixello is also available on the VS Code Marketplace.

Steps​

  1. Open VS Code
  2. Go to Extensions (⌘+Shift+X on Mac, Ctrl+Shift+X on Windows/Linux)
  3. Search for Pixello
  4. Click Install

👉 Install from VS Code Marketplace

VS Code Support​

VS Code is fully supported, but AI flows are optimized for Cursor. You'll get all core features, but some advanced AI interactions work best in Cursor.

Get Your API Key​

Before configuring the MCP server, you'll need an API key to authenticate with Pixello services.

👉 Learn how to create and manage API keys

Quick steps:

  1. Sign up or sign in at pixello.tech
  2. Go to your Dashboard
  3. Create an API key
  4. Copy the key (you'll need it for the next step)

Configure MCP Server​

Pixello requires the MCP (Model Context Protocol) server to be configured in Cursor for AI-powered design generation to work.

Steps​

  1. Locate your MCP configuration file:

    • On macOS/Linux: ~/.cursor/mcp.json
    • On Windows: %APPDATA%\Cursor\mcp.json

  2. Open the file in a text editor (create it if it doesn't exist)

  3. Add the Pixello MCP server configuration with your API key:

    {
      "mcpServers": {
        "pixello": {
          "url": "https://mcp.pixello.tech/sse",
          "headers": {
            "Authorization": "Bearer YOUR_API_KEY_HERE"
          }
        }
      }
    }

    Replace YOUR_API_KEY_HERE with the API key you created in the dashboard.

  4. Save the file

  5. Restart Cursor for the changes to take effect

Verify MCP Server​

After restarting Cursor:

  1. Open the Command Palette (⌘+Shift+P / Ctrl+Shift+P)
  2. Type "Pixello"
  3. You should see Pixello commands available
  4. Try creating a design—if the MCP server is working, you'll see AI generation happening

Troubleshooting​

MCP server not connecting:

  • Check your internet connection
  • Verify the URL is correct: https://mcp.pixello.tech/sse
  • Ensure Cursor has been restarted after configuration
  • Check Cursor's output logs for MCP connection errors

Note: The MCP server is required for AI-powered design generation. Without it, you can still edit existing designs, but you won't be able to generate new designs from prompts.

Authentication: Make sure to include your API key in the MCP configuration. Without a valid API key, the MCP server will reject your requests.

After Installation​

Once installed and configured, you'll see the Pixello extension in your Extensions panel. The extension is active immediately.

Verify Installation​

  1. Open the Command Palette (⌘+Shift+P / Ctrl+Shift+P)
  2. Type "Pixello"
  3. You should see Pixello commands available

Next Steps​

Now that Pixello is installed and the MCP server is configured, learn how to create your first design.