Docs / Connect your AI

Connect VS Code

ReadyGitHub Copilot · agent mode · about 1 min

VS Code installs Openpane from a link, or from its mcp.json, where it asks for the key once and keeps it in secret storage.

You need an Openpane API key. The API keys page makes one for VS Code and fills it into every step. Here, the steps show YOUR_API_KEY where it goes.

Make a key for VS Code

Set it up fromOne clickmcp.jsonCommand line

One click

  1. Install in VS Code

    VS Code opens and shows Openpane with your key filled in. Click Install.

    Get the one-click link

    It carries your key, so the API keys page makes the two together.

  2. Check it

    In Chat, pick Agent, then Configure Tools: Openpane's seven tools are listed.

What you'll see · schematic
VS Code · Agent → Configure Tools
● openpane · 7 tools
create_pane · update_pane · get_pane · list_panes · delete_pane · share_pane · list_shares

mcp.json

  1. Run MCP: Open User Configuration

    From the Command Palette (Ctrl+Shift+P, or ⇧⌘P on a Mac), then add:

    mcp.jsonuser profile
    {
  "inputs": [
    {
      "type": "promptString",
      "id": "openpane-key",
      "description": "Openpane API key",
      "password": true
    }
  ],
  "servers": {
    "openpane": {
      "type": "http",
      "url": "https://openpane.oblaidish.com/api/mcp",
      "headers": {
        "Authorization": "Bearer ${input:openpane-key}"
      }
    }
  }
}

  2. Start it

    VS Code asks for your key the first time Openpane starts, and keeps it in secret storage.

What you'll see · schematic
VS Code · Agent → Configure Tools
● openpane · 7 tools
create_pane · update_pane · get_pane · list_panes · delete_pane · share_pane · list_shares

Command line

  1. Add it from a terminal

    TerminalmacOS · Linux
    code --add-mcp '{"name":"openpane","type":"http","url":"https://openpane.oblaidish.com/api/mcp","headers":{"Authorization":"Bearer YOUR_API_KEY"}}'
What you'll see · schematic
VS Code · Agent → Configure Tools
● openpane · 7 tools
create_pane · update_pane · get_pane · list_panes · delete_pane · share_pane · list_shares

Your first pane

Ask VS Code:

Prompttry it
Make me an Openpane pane with a React counter app.

It answers with a link to a private pane, which opens in any browser where you're signed in to Openpane. To show it to others, see Sharing. VS Code now has Openpane's seven tools, to create, update, list, delete and share panes: the MCP server reference lists them.

Connect VS Code to Openpane · Openpane docs