Integrations

UiToolbar sends element selections to your IDE through provider servers. Pick your editor below. All providers support streaming, file diffs, and per-session undo.

Cursor

Default provider. Uses the cursor-agent CLI to send instructions directly into Cursor's AI composer.

npx uitoolbar

Starts on port 5567. The extension auto-connects — no config needed. Make sure Cursor is open with your project loaded.

Claude Code

Uses the claude CLI and Agent SDK. Requires two things:

1. The claude command on your PATH — install Claude Code
2. Set UISTUDIO_CWD to your workspace directory

UISTUDIO_CWD=/path/to/your/project npx uitoolbar --provider claude-code

Starts on port 4567. Sessions stream through the side panel with the same experience as the Claude CLI.

MCP Server

Exposes UiToolbar as an MCP tool server. File resolution only — no AI built in. Connect any MCP-compatible agent (Claude Desktop, custom agents, etc.).

npx uitoolbar --provider mcp

Starts on port 3001. Add it to your agent's MCP config:

{
  "mcpServers": {
    "uitoolbar": {
      "command": "npx",
      "args": ["uitoolbar", "--provider", "mcp"]
    }
  }
}

Claude Direct (API)

Calls the Anthropic API directly from the extension. No external server needed — just an API key.

1. Open UiToolbar settings in the extension toolbar
2. Select Claude Direct as your provider
3. Enter your Anthropic API key

Useful for quick edits without a local server, or when you want the extension to work standalone.

VS Code

Opens the source file at the correct line via the VS Code URL scheme. No server required.

npx uitoolbar --provider vscode

Custom ports

Override the default port for any provider:

npx uitoolbar --provider cursor --port 8080

Configure the matching port in the extension's Settings panel. The extension checks default ports automatically, but custom ports need manual configuration.

Provider comparison