Connecting Claude Code to Interface Builder

Interface Builder offers its builder as a set of tools to an agent on your own machine. Claude Code reaches those tools through a small local program, the relay. This guide sets up the relay, adds the permission rules, and shows how to check the connection.

You do this setup once per machine. After that, every Standalone tab you open offers its tools to the same relay.

Before You Start

• Chrome 155 to 162 on a computer. The tools use WebMCP, which Chrome turns on for the Interface Builder address through an origin trial token that the page carries. There is no polyfill: in another browser, or on a deployment without a token, the page offers nothing. The Agent popover then says “This browser does not support the agent tools.”
• Claude Code installed, with Node.js available, because the relay runs through npx.
• A Standalone tab. Inside Pipedrive’s iframe the page cannot offer tools. Open the views listing from Pipedrive and click Open in new tab in its header. The Agent button appears only in that tab.

1. Install the Relay

1. In the Standalone tab, click Agent in the header.
2. Under 1. Install the relay, copy the command.
3. Paste the command into a terminal and run it.

The command has this shape. Copy it from the popover rather than from here, because the popover fills in the address of your tab and the relay version that the page was built with:

claude mcp add interface-builder -- npx -y @mcp-b/webmcp-local-relay@<version> --widget-origin <origin>

What the command does:

• claude mcp add interface-builder adds an MCP server called interface-builder to Claude Code. The name is the middle part of every tool name that Claude Code sees, for example mcp__interface-builder__get_page.
• npx -y @mcp-b/webmcp-local-relay@<version> is how Claude Code starts the relay. The version is pinned: the part of the relay that runs in the page is copied into Interface Builder at the same version, and the two must match.
• --widget-origin <origin> is the address of the tab you copied the command from. The relay answers only a page served from that address. The command never uses *.

The relay listens only on the loopback address of your machine (127.0.0.1). Nothing outside your computer can reach it, and a page on any other address cannot list or call the tools.

2. Add the Permission Rules

By default, Claude Code asks you before every call to an MCP tool. The permission rules change that for two groups of tools.

1. In the popover, under 2. Add the permission rules, copy the snippet.
2. Open your Claude Code settings.json. Use ~/.claude/settings.json for every project, or .claude/settings.json in the project where you run Claude Code.
3. Add the entries of allow and ask to the permissions section of the file. If the file already has a permissions section, add the entries to its lists. Do not replace the lists.

The snippet has this shape. The popover builds the full list from the tools the page offers:

{
  "permissions": {
    "allow": [
      "mcp__interface-builder__get_page*",
      "mcp__interface-builder__get_block*"
    ],
    "ask": [
      "mcp__interface-builder__delete_view*",
      "mcp__interface-builder__delete_block*"
    ]
  }
}

What the rules mean:

Section	Tools	Effect
allow	Tools that only read	Claude Code calls them without a prompt.
ask	Tools that delete or overwrite something you cannot easily get back	Claude Code always asks first.
(neither)	Ordinary writes, such as adding a row or updating a block	Claude Code keeps its own default prompt, where you can choose “don’t ask again”.

The ask rules are the only protection before a delete. The relay does not pass on the tool’s own “consequential” flag, so without the snippet one “don’t ask again” on a delete tool approves that tool for good. With an ask rule, Claude Code asks every time: a “don’t ask again” answer or bypassPermissions mode does not remove the prompt.

Every rule ends in *. When two tabs offer the same tool, the relay adds a suffix to the name, and the * makes the rule match the suffixed name too.

3. Check the Connection

The page cannot see your agent, so the popover never says “connected”. Check from Claude Code:

1. Start Claude Code, or restart it if it was running when you installed the relay.
2. Run /mcp.
3. Find interface-builder in the list and open it. Its tools are listed with names such as get_page, open_view and add_row.
4. Ask the agent to call get_page. It answers with the page the tab is on: the views listing or the builder.

If the server is in the list but it has no tools:

• Make sure the Standalone tab is open and its Agent popover does not say that the browser is not supported.
• Make sure the tab’s address is the address in the --widget-origin of the command. A command copied from another deployment answers only that deployment. Run claude mcp remove interface-builder, then add the server again with the command from this tab.
• Make sure this tab is the one that offers the tools. See One Tab at a Time.

One Tab at a Time

Only one Standalone tab offers its tools at a time, so the names of the tools stay the same. The first tab you open takes the tools. Another tab shows “The tools are offered in another tab.” and a Use agent here button. Click the button to move the tools to that tab. The other tab then stops offering them and shows a banner.

When you close the tab that offers the tools, no other open tab takes them by itself. Click Use agent here in the tab you want to use, or reload it.

When the Session Ends

The address of a Standalone tab works as your login. It holds a token that is valid for 24 hours from the moment you clicked Open in new tab. Nothing renews it.

• Do not share the address. Anyone who holds it acts as you until the token expires.
• 30 minutes before the end, a banner says “This session ends in less than 30 minutes”. Finish your work, or open a new tab from Pipedrive.
• After 24 hours, the banner says “This session ended”. Nothing that you or the agent change in that tab is saved any more.

To carry on:

1. Open the views listing from Pipedrive again and click Open in new tab.
2. If the old tab is still open, close it, or click Use agent here in the new tab.

You do not install the relay again or change the permission rules. The new tab carries a new token in its address, but it is served from the same origin, and the relay matches the origin.

Limits

• A tool call must finish within 60 seconds, which is the relay’s own timeout.
• The relay starts with the first Claude Code session that uses it. A second Claude Code session on the same machine shares that relay.

Related

• Connect an agent — let an agent read and edit the Buttons and the User groups in the OneClick Settings
• Binding Reference for Agents — what a placeholder means, written for the agent