Coding Agents

In a page builder, the Agent 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:

npx @sleekwp/agent

Or install it once and run it by name:

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:

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.