Agent - Coding Agents

Coding agents extend Agent mode with a terminal workflow for WordPress page builders. The first supported workflow is Claude Code, which works well with files, search, diffs, and multi-step edits.

The terminal workflow needs a local bridge. Start the SleekWP agent server on your machine with npx @sleekwp/agent before opening a coding-agent terminal in SleekAI.

Overview

Unlike a standard chat-only assistant, coding agents use a mirrored page workspace. Supported builder integrations expose the current page as structured files that the coding agent can inspect and edit.

The mirrored workspace can include:

• Page copy and content
• Builder tree or document hierarchy
• Selected element state
• Element, widget, module, or block settings
• Custom CSS and responsive style data
• Builder-specific instructions
• Validation output and save-flow notes

The visual builder remains the place where you review the result. The mirrored files give the agent a structured way to understand and change the page.

Why Files Matter

Coding agents work best when they can navigate a file-based workspace. They can search for a headline, inspect the surrounding section, understand which element owns the style, edit exact data, and keep track of the task over multiple steps.

Without a mirrored workspace, the agent usually has to infer too much from visual context, DOM state, or a short prompt. With a mirrored workspace, it can work from structured WordPress and builder data.

MCP vs SleekAI Coding Agents

MCP is a strong standard for giving AI clients access to external tools and data. For WordPress, a backend MCP server can be useful when the agent needs to query content, call APIs, or perform server-side operations.

The important difference is where the action happens. A typical backend MCP tool does not run inside the current browser tab. If it changes page-builder data directly on the server, the open editor may not share that state yet. The user may need to refresh, reopen the builder, or reconcile changes that happened in the background.

That is why SleekAI coding agents use a browser-adjacent workflow instead. The builder remains open, the current page is mirrored into files, Claude Code works from those files, and SleekAI applies validated changes back through the active builder integration.

WebMCP points toward a similar browser-side idea: web apps can expose tools from the loaded page so users and agents share context. SleekAI is not waiting on a general browser standard for page builders. It provides a product-specific bridge for WordPress today.

Supported Builders

Coding agents are currently available as a beta for:

• Bricks
• Elementor
• Breakdance
• Beaver Builder

Each builder has its own integration because each builder stores page structure, settings, CSS, and save state differently.

Requirements

• Claude Code CLI installed and authenticated on your machine
• Node.js 20 or higher
• @sleekwp/agent running locally
• A supported builder page open in WordPress

Claude Code uses its own authentication and billing. SleekAI does not provide Claude Code access through the OpenAI, Anthropic, Google, or OpenRouter keys you configure for normal SleekAI chat features.

Setup

Start the local bridge before opening the terminal in SleekAI:

        npx @sleekwp/agent
  
                    

                Copy
                
                                 
            
            

The agent starts a WebSocket server on ws://localhost:5733. SleekAI connects to that local server, sends the current builder workspace to it, and receives file changes and terminal output back from it. If the bridge is not running, the terminal option is not available.

You can also install it globally:

        npm install -g @sleekwp/agent
sleekwp-agent
  
                    

                Copy
                
                                 
            
            

How the Workflow Works

The typical workflow works like this:

1. Start the local bridge with npx @sleekwp/agent.
2. Open a supported page builder.
3. Launch SleekAI Agent mode.
4. Start the coding-agent terminal session.
5. SleekAI mirrors the current page into files.
6. Claude Code searches and edits the files, then uses builder-aware tools where needed.
7. SleekAI validates and applies changes back to the live builder.
8. You review the result in the visual editor and continue refining.

What the Agent Can See

The exact files depend on the builder, but the goal is consistent: give the agent the information it needs to make a precise page change.

Page Content

Headlines, paragraphs, buttons, labels, module text, and other copy can be exposed as readable files. This makes it easy for the agent to search for exact text and understand nearby content before editing.

Builder Structure

Sections, containers, widgets, modules, child elements, parent relationships, and selected elements can be represented as structured data. This helps the agent add or change the right object instead of guessing from visual position.

CSS and Design Context

Custom CSS, responsive values, spacing, typography, and style settings may be included when the builder exposes them. This is important for real design tasks because conversion-page edits often cross content, layout, and CSS.

Instructions and Validation

The workspace can include instructions that explain how the active builder expects changes to be made. Builder tools can also validate common problems before save, such as invalid child elements, malformed CSS, missing parents, or unsupported operations.

Local Agent Server

@sleekwp/agent runs locally. It creates a temporary workspace, writes the mirrored builder files into that workspace, spawns Claude Code, streams terminal output to the browser, watches file changes, and sends those changes back to SleekAI.

The temporary workspace is not the live WordPress theme or plugin directory. The builder integration decides what becomes a file, validates the result, and then applies supported changes back to the active builder state.

What Beta Means

Coding agents are available now, but they are not final. During the beta, expect continued improvements to:

• File naming and workspace structure
• CSS and design-context coverage
• Builder-specific validation
• Terminal history and builder feedback
• Terminal history usefulness
• Save reliability across more edge cases
• Local agent startup and reconnection behavior

When to Use Coding Agents

Coding agents are best for changes that benefit from structured page context:

• Reworking a landing page section
• Adding testimonials, FAQs, pricing blocks, or CTAs
• Updating repeated copy across a page
• Cleaning up responsive spacing
• Matching button and card styles
• Adjusting CSS while preserving builder state

For simple writing, normal Chat or Agent mode may be enough. Use coding agents when the task crosses page structure, content, styling, and builder save logic.