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:

```text
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:

```json
{
  "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).

## 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](/docs/settings/connect-an-agent) — let an agent read and edit the Buttons and the User groups in the OneClick Settings
- [Binding Reference for Agents](/docs/buttons/interface-button/interface-builder/reference/data-binding/agent-bindings) — what a placeholder means, written for the agent