@invisionag/dev-mcp

@invisionag/dev-mcp

A Model Context Protocol (MCP) server for UI-Pack development tools, enabling LLMs and other MCP clients to interact with UI-Pack project resources and utilities.

Usage

Connecting AI Clients

Connect your AI client to the MCP server by following the instructions below.

VSCode

Update your VSCode MCP configuration file at .vscode/mcp.json. Open with Cmd+Shift+P and select MCP: Open User Configuration, then add:

{
  "servers": {
    "ui-pack-dev": {
      "command": "npx",
      "args": ["-y", "@invisionag/dev-mcp"]
    }
  }
}

Claude Desktop

Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "ui-pack-dev": {
      "command": "npx",
      "args": ["-y", "@invisionag/dev-mcp"]
    }
  }
}

Cursor

Update your Cursor MCP configuration file at ~/.cursor/mcp.json (create it if it doesn't exist):

{
  "mcpServers": {
    "ui-pack-dev": {
      "command": "npx",
      "args": ["-y", "@invisionag/dev-mcp"]
    }
  }
}

Tools

hello

Simple test tool returning static message with server version information.

Local Development

Setup

cd packages/dev-mcp
pnpm install
pnpm build

Development Commands

# Build the package
pnpm build

# Run linting
pnpm lint

# Fix linting issues
pnpm lint:fix

# Type checking
pnpm typecheck

# Clean build artifacts
pnpm clean

Testing Locally

Use the MCP Inspector to test your server locally:

pnpm debug

This opens an interactive interface at http://localhost:5173 where you can test tools.