# Coding Agents

In a page builder, the [Agent](/docs/ai/agent/general.md) can open a terminal
that runs **Claude Code** or **Codex** on your own computer. The coding agent
works on files that mirror the open page and calls tools of the live builder,
so it can make changes that cross structure, content, styles and responsive
settings.

The terminal needs the local `@sleekwp/agent` bridge, which connects the
browser, the coding agent and the builder over `ws://localhost:5733`.

## Supported builders

Coding agents are available in the modes of these builders:

- Bricks
- Breakdance
- Beaver Builder
- Elementor
- Etch

Each builder maps its own page structure, settings, CSS and save operations to
files and tools, so the files and tools differ from one builder to the next.

## Requirements

- Node.js 20 or newer on your computer.
- Claude Code, Codex or both, installed and signed in.
- The `@sleekwp/agent` bridge running on the same computer as the browser.
- A supported builder open in WordPress, with the Agent open beside it.

The coding agent uses its own sign-in and billing. The API keys stored in
SleekAI are not used by the terminal.

## Starting the bridge

Run the bridge before you open a terminal:

```bash
npx @sleekwp/agent
```

Or install it once and run it by name:

```bash
npm install -g @sleekwp/agent
sleekwp-agent
```

The bridge listens on your own computer only. Set `SLEEKWP_AGENT_HOME` before
starting it to keep its workspaces somewhere other than `~/.sleekwp/agent`.

## Opening a terminal

Open the Agent's **Options** menu. When the bridge runs, it offers
**New Claude Code Terminal** and **New Codex Terminal** for each tool it
found installed. Otherwise the menu says what is missing: **Start SleekWP
Agent** when the browser cannot reach the bridge, or **Install Claude Code or
Codex** when neither is installed.

A session then works like this:

1. The Agent sends the open page, as files, and the builder's tools to the
   bridge.
2. The bridge writes the files to a workspace and starts the coding agent
   there.
3. The coding agent's output streams into the terminal in the Agent column.
4. When it changes a file, the builder's tools apply the change to the open
   editor, where you see it.
5. Review the result and save the page in the builder.

## Workspace files

The workspace represents the open page as ordinary files. Depending on the
builder they hold element or node JSON, custom CSS, responsive styles, global
classes, schemas and rendered HTML, with instructions for that builder. In
Elementor, Beaver Builder and Breakdance, a setting of more than one line,
such as an HTML widget's markup, is a plain HTML, CSS, JavaScript or text file
in the element's `settings/` folder (`properties/` in Breakdance), which the
element's JSON refers to; the coding agent edits it, and you review it, as
ordinary text rather than one escaped JSON string.

The bridge also writes the coding agent's own configuration:

| Coding agent | Files                                                      |
| ------------ | ---------------------------------------------------------- |
| Claude Code  | `CLAUDE.md`, `.mcp.json` and `.claude/settings.local.json` |
| Codex        | `AGENTS.md` and `.codex/config.toml`                       |

Both register a local MCP server named `sleekwp`, through which the coding
agent calls the tools of the builder open in your browser, including its
unsaved state.

The workspace is a working copy of the page's builder data, not your theme or
plugin directory.

## Reopening a session

Terminal sessions are listed in the Agent's **History** with a terminal icon.
Closing the Agent or reloading the page does not stop the coding agent;
reopening the session reattaches to it. The workspace also survives a restart
of the bridge: Claude Code continues the workspace's conversation, and Codex
resumes its matching session, so the history stays with the page.

## Privacy

The browser talks to the bridge on your computer directly. The WordPress site
can be local or remote, as long as the browser that shows its admin can reach
`localhost:5733`. File and terminal traffic stays between the browser and the
bridge; the coding agent itself still talks to its own service, under that
provider's terms.