Skip to content

Repository files navigation

LiveCanvas AI Bridge

LiveCanvas AI Bridge is a companion plugin for LiveCanvas that lets coding agents work inside a real WordPress + LiveCanvas site.

It does not replace LiveCanvas. It handles structural work, agent integration, previews, page/template operations, and foundation setup while LiveCanvas remains the visual and code-level editing layer.

Current Status

Status: 0.2.0-beta.4 staging beta

Download: LiveCanvas AI Bridge 0.2.0-beta.4

Beta / not production guaranteed: this repository is public for staging tests and integration review. The plugin can write WordPress content when write abilities are explicitly enabled, so use backups, previews, dry_run checks, and rollback IDs before applying agent-generated changes.

See the current development status and release gates and the stack-by-stack integration completeness audit for verified capabilities, evidence levels, and remaining work.

Public beta material:

Usable today:

  • connect Codex, OpenCode, Claude Code, Claude Desktop, and Cursor through secure pairing or the local MCP bridge
  • run the fully supported REST/pairing path on WordPress 6.8
  • use WordPress 7 Abilities and Direct OAuth when available, with secure pairing as the fallback
  • use Codex Direct Mode through OAuth 2.1 + PKCE on public HTTPS sites, without an npm proxy or WordPress credentials in Codex
  • fall back automatically to secure AI Bridge pairing on local/private sites or when WordPress MCP Adapter is unavailable
  • keep Codex connections site-bound with project-scoped .codex/config.toml files and a Site ID fingerprint
  • expose WordPress 7 Abilities and a custom WordPress MCP Adapter server when available
  • inspect WordPress, LiveCanvas, Picostrap, Picowind, WindPress, WooCommerce, and ACF context
  • run preview/apply operations from the Command Deck
  • use dedicated preview/apply abilities for page upsert, global shell, design system, dynamic templates, and audit rollback
  • create and update LiveCanvas pages with page_upsert
  • create and update header/footer partials with global_shell_apply
  • apply design-system tokens for Picostrap, Picowind/WindPress, or a custom-theme fallback
  • preview Picostrap Customizer/Sass changes, compile them in the MCP runtime, then apply Customizer values and bundle.css atomically with fingerprint checks and rollback
  • run first-pass site foundation workflows with site_foundation_run
  • create/update LiveCanvas dynamic templates with native is_* conditions, menu_order priority, Polylang language, post-specific lc_use_template_of_slug, real target preview URLs, and rollback
  • use the AI Bridge drawer inside the LiveCanvas editor for prompt-driven edits and screenshot references
  • queue LiveCanvas editor prompts with a preferred WordPress Ability contract for the connected coding agent
  • inspect recent runs with audit IDs and restore stored rollback records for local apply operations
  • use the PHP-rendered AI Studio tab to inspect abilities, MCP write exposure, AI readiness, and audited runs
  • consume the read-only /wp-json/lcfa/v1/studio state endpoint for a future React/DataViews Studio UI
  • load a first progressive React AI Studio shell that consumes the Studio endpoint and falls back to the PHP view if REST or WordPress admin JS dependencies are unavailable
  • use the React Studio shell with search, filters, sorting, configurable columns, copy actions, and rollback shortcuts for abilities and runs
  • persist Studio view preferences locally and provide refresh/reset/copy-state controls for the REST-backed Studio shell
  • inspect selected abilities and runs from the React Studio sidebar, with copy JSON and rollback/deck shortcuts
  • review Studio readiness alerts for setup gaps, MCP write exposure, AI/MCP diagnostics, and recent run errors
  • review run-health analytics with action/origin mix, timeline, failures, audited runs, and rollback counts
  • copy a compact ability manifest with MCP exposure, write/read-only flags, and input schema hints
  • copy an operator briefing and read-only agent prompt generated from the current Studio state
  • run an ordered agent smoke-test plan for read-only, preview, and write-guard verification
  • copy a Markdown agent runbook with current state, guardrails, risks, next actions, and smoke-test order
  • inspect Studio API contract metadata, section list, run limits, readiness flags, and SHA-256 payload fingerprint
  • review a backend-calculated handoff readiness score with pass/warn/fail gates for agent delivery
  • copy a virtual agent handoff package with runbook, smoke tests, briefing, readiness, ability manifest, write policy, and checksums
  • fetch the same handoff package from the dedicated read-only /wp-json/lcfa/v1/studio/handoff-package endpoint
  • copy a first agent prompt from Connections that starts Codex/MCP clients with the connection handoff
  • inspect the same first-prompt connection handoff inside AI Studio and the agent handoff package
  • fetch only the connection handoff from /wp-json/lcfa/v1/studio/connection-handoff or the MCP get_connection_handoff tool
  • export native WordPress AI Bridge block patterns with content, byte counts, and SHA-256 checksums for agent handoff
  • read, run, inspect, and copy native page blueprint previews in AI Studio before composing WordPress block page previews
  • review guarded agent smoke tests for native draft creation before exposing apply-native-pattern-page
  • see handoff readiness ratios for read-only, preview, and guarded-write smoke tests
  • use forge-handoff-summary.json inside handoff packages for quick agent decisions
  • run the AI Studio integration test plan with copy-ready REST endpoints, MCP tools, and no-write preview checks
  • enable Full Access for trusted sessions when Codex needs targeted content patches, guarded theme-file writes, media upload/replace, Picostrap compile, debug/cache, Polylang, SEO, or visual checks
  • install validated Picowind or Picostrap child themes from the Theme Library and import deterministic LiveCanvas starter data with rollback metadata
  • finish pending remote Picowind builds with an audit-bound, checksum-verified MCP build tool

Client qualification for this beta: OpenCode, Cursor, Claude Desktop Free, and Codex have passed real local handoff, snapshot, preview, write, and rollback tests with MCP 0.2.0-beta.5. Claude Code setup generation is available, but its CLI path is preview/configuration-only until a full authenticated run is qualified.

Still in progress:

  • richer WooCommerce product/archive template generation
  • ACF-aware markup generation
  • broader real-site smoke testing across LiveCanvas/Picostrap/Picowind installs
  • more creative screenshot-aware generation
  • stronger remote/local parity testing for complex write workflows
  • more complete fallback enqueue behavior for custom themes
  • a complete DataViews-based AI Studio UI; the first progressive React shell is now available
  • full conformance with the stateless MCP 2026 protocol; this beta keeps the currently supported protocol versions while the migration is tested separately

What It Does

The plugin acts as a WordPress execution engine for coding agents.

Coding Agent -> AI Bridge MCP or local MCP -> LiveCanvas AI Bridge -> WordPress / LiveCanvas / WindPress

Main areas:

  • Setup: project profile, framework, site mode, policy
  • Connections: agent bootstrap for Codex, OpenCode, Claude Code, Claude Desktop, Cursor, and generic MCP clients
  • Genesis: project brief and executable site plan
  • AI Studio: operational view for abilities, native page blueprints, MCP exposure, AI readiness, runs, audit IDs, and rollback shortcuts
  • Theme Library: admin-only catalog installer for validated Picowind and Picostrap child themes with deterministic LiveCanvas starter data
  • Command Deck: preview/apply console for structured operations
  • LiveCanvas editor drawer: in-editor prompt surface for contextual page edits
  • MCP package: local Node bridge in mcp/

Product Family

  • LiveCanvas AI Bridge: this plugin. It connects WordPress, LiveCanvas, Picostrap, Picowind, WindPress, and coding agents through safe read/preview/apply workflows.
  • LiveCanvas AI Vision: planned premium extension for screenshot-to-code and URL-to-page rebuilds. It will analyze long screenshots or URLs, split pages into sections, extract a reusable design system, generate or map missing assets, and create editable Picowind/Tailwind pages through AI Bridge.
  • LiveCanvas Theme Forge Internal: separate private generator for creating validated Picowind child-theme ZIPs from approved source briefs, staging runs, and visual QA. It is not bundled in this public plugin.

Tested development references:

Requirements

Recommended:

  • WordPress 6.8 through 7.1
  • LiveCanvas
  • PHP 8.0 or newer
  • the official WordPress MCP Adapter for the recommended remote Direct OAuth path
  • a public HTTPS WordPress URL for Direct OAuth
  • Node.js only for secure pairing fallback, local filesystem/build tools, visual checks, or other advanced local integrations
  • Picostrap, Picowind/WindPress, or another active WordPress theme

Installation

  1. Download livecanvas-forge-ai.zip from the 0.2.0-beta.4 release.
  2. Open WordPress Admin > Plugins > Add New Plugin > Upload Plugin and upload the ZIP.
  3. Activate LiveCanvas AI Bridge.
  4. Open LiveCanvas > AI Bridge and complete Setup.

Use the Bridge documentation for the project-scoped Codex, Cursor, OpenCode, Claude Desktop, and Claude Code connection flows.

Updates

AI Bridge uses the native WordPress plugin update flow.

Updates are shown only when:

  • LiveCanvas is installed and active;
  • lc_get_apikey() or get_site_option('lc_apikey') returns a non-empty LiveCanvas API key;
  • update metadata reports a version newer than the installed plugin and allowed by the selected update channel.

The update channel is available under AI Bridge > Connections > Advanced/manual fallback:

  • Stable ignores GitHub prereleases. Existing stable installations, including 0.1.31, do not receive 0.2.0-beta.* unless an administrator opts in.
  • Beta accepts stable and beta releases. A beta installation follows this channel by default, so 0.2.0-beta.3.12 can receive 0.2.0-beta.4 and later beta releases.

The updater tries the LiveCanvas licensed update endpoint first. If that endpoint is unavailable and the local LiveCanvas license check passed, AI Bridge falls back to the public GitHub latest release API.

The GitHub fallback requires:

  • a public repository;
  • a valid stable or beta tag for the selected channel, such as v0.2.0-beta.4;
  • an uploaded asset named exactly livecanvas-forge-ai.zip;
  • a plugin version inside the zip that matches the release version.

If GitHub returns 404 for unauthenticated requests, the repository is still private or not publicly reachable and WordPress sites cannot use the fallback.

Minimal Update Release Checklist

Before publishing a release:

  • bump Version and LCFA_VERSION in livecanvas-forge-ai.php;
  • run bash scripts/build-dist.sh;
  • run php tests/php/github_updater_phase1.php;
  • run php tests/php/package_dist_phase1.php;
  • create a GitHub release tag that matches the selected channel;
  • upload the asset as exactly livecanvas-forge-ai.zip;
  • confirm the release is public and not a draft; prereleases are delivered only to the beta channel;
  • on a licensed WordPress site with an older AI Bridge version, click Dashboard > Updates > Check again.

Expected result:

LiveCanvas AI Bridge update available
package: https://github.com/livecanvas-team/livecanvas-forge-ai/releases/download/vX.Y.Z/livecanvas-forge-ai.zip

Quick Start

  1. Install and activate LiveCanvas AI Bridge, complete Setup, then open LiveCanvas > AI Bridge > Connections.
  2. Keep Direct Mode selected, click Connect Codex securely, and copy Prompt for Codex.
  3. Open the Codex project that belongs to this WordPress site, trust the project, paste the setup prompt, then restart Codex. The first MCP start can take up to 60 seconds.
  4. Paste the generated test prompt. Complete the WordPress authorization or approve the matching pairing code, verify the site URL and fingerprint, then run the WordPress smoke test.

You are connected when Connections shows Ready. Use preview or dry_run: true before the first write.

The beta setup pins @livecanvas/ai-bridge-mcp@0.2.0-beta.5. Handoff and smoke tests compare the expected and detected package versions; after a plugin/MCP beta update, reload the MCP server before testing. In Cursor, use Customize → MCPs → livecanvas-forge → Reload; Reload Window can leave the previous MCP process running.

The Bridge documentation covers installation, project-scoped Codex, OpenCode, Claude Code, Claude Desktop and Cursor setup, verified handoff, safe prompts, and rollback. The repository also includes the compact four-step visual guide. Technical reference: mcp/README.md.

Theme Library

The Theme Library tab labels every catalog item as Picowind (Tailwind CSS + DaisyUI) or Picostrap (Bootstrap 5) and provides separate framework and theme-type filters. Both frameworks use validated one-page child-theme packages; Picowind imports verify a WindPress/Tailwind cache, while Picostrap imports verify the packaged Sass sources and compiled Bootstrap bundle. It does not clone arbitrary websites. Preview, installation, import, and rollback remain admin-only; MCP clients can only complete a build already created and authorized by an administrator. The full package contract is documented in docs/theme-library-package-spec.md.

Default catalog:

https://raw.githubusercontent.com/livecanvas-team/livecanvas-theme-library/main/catalog.json

Beta fallback catalog:

https://raw.githubusercontent.com/livecanvas-team/livecanvas-forge-ai/main/examples/theme-library/catalog.json

AI Bridge tries the dedicated Theme Library catalog first. If it is unavailable, it can fall back to the beta catalog in this repository.

Developers can override the catalog URL with:

add_filter('lcfa_theme_library_catalog_url', function () {
    return 'https://example.com/catalog.json';
});

Theme Library flow:

  1. Open WordPress Admin > AI Bridge > Theme Library.
  2. Click Preview to download the ZIP, verify checksum, validate the manifest, and inspect the import plan. This does not write.
  3. Click Install child theme to install and activate the selected Picowind or Picostrap child theme through WordPress theme APIs.
  4. Click Import starter data to import LiveCanvas settings, design system data, media, header/footer partials, homepage, menus, and homepage option. If a step fails, AI Bridge automatically attempts the stored transaction rollback and reports both outcomes.
  5. For Picowind, AI Bridge compiles Tailwind through the local WindPress runtime when available. On a remote host, open WindPress > Settings > Performance, select Generate, and wait for Last Generated to update.
  6. Return to Theme Library and select Verify generated CSS, or call build_theme_library_css from the paired agent. AI Bridge reuses an eligible native WindPress cache before attempting local compilation and verifies that it was generated after the import, matches the active theme and audit, passes package semantic checks, and has the expected checksum.
  7. Picostrap packages reach Ready after the packaged Bootstrap bundle passes checksum and required-fragment verification. Use Rollback to restore the previous site state.

Required files shared by both frameworks:

style.css
functions.php
screenshot.jpg
livecanvas/configuration.php
starter-data/lcfa-theme.json
starter-data/livecanvas-settings.json
starter-data/design-system.json
starter-data/media-manifest.json
starter-data/menus.json
starter-data/qa-report.json
starter-data/media/*

Picowind packages additionally require page-templates/empty.php, views/page-templates/empty.twig, public/styles/presets/daisyui.css, and public/styles/tailwind.css. Picostrap packages require page-templates/empty.php, css-output/bundle.css, sass/_theme_variables.scss, sass/_custom.scss, js/bootstrap.bundle.min.js, and js/custom.js.

The manifest schema is lcfa-theme.v1. All paths must be relative and path traversal is blocked. The default page template must include WordPress head/body/footer hooks, one main content shell, and the separate LiveCanvas header/footer calls. Header and footer starter files contain only inner partial markup; AI Bridge enables the required LiveCanvas partial settings during import and restores the previous settings during rollback. Re-importing the same theme/version/checksum is idempotent unless force=true is used.

Marketplace covers:

  • keep a raw site snapshot as screenshots/home.jpg;
  • generate a polished catalog image as screenshots/cover.jpg;
  • point the catalog screenshot field to cover.jpg;
  • generate covers in the private/internal export flow, not inside the WordPress importer.

From a repository checkout, the helper below prepares the prompt or calls an image provider when API credentials are available:

node scripts/theme-library-cover.js \
  --provider prompt \
  --screenshot examples/theme-library/themes/asteria-search/screenshots/home.jpg \
  --output /tmp/asteria-cover-prompt.json \
  --title "Asteria Search"

Theme Library beta acceptance:

  • catalog loads valid Picowind and Picostrap child theme items;
  • Preview passes checksum, manifest, child-theme header, content, and media validation;
  • Install child theme activates the child theme or reports it as already installed;
  • Import starter data creates or updates homepage, header partial, footer partial, media, menus, and homepage option;
  • a Picowind item reaches Ready only after its persistent WindPress CSS cache exists, is readable, and no longer contains Tailwind source directives;
  • a Picostrap item reaches Ready only after its packaged Bootstrap bundle contains the declared theme fragments and passes checksum verification;
  • remote build completion requires a paired session with write and cache scopes plus matching site fingerprint, import audit ID, import checksum, active stylesheet, and compiled CSS checksum;
  • native WindPress cache completion additionally requires a semantically valid cache generated after the pending import; server filesystem paths are never exposed to the agent;
  • Tailwind 4 is the fully supported beta path; a verified Tailwind 3 build is reported as usable but degraded;
  • unavailable local compilers return native_build_required with the exact WindPress Performance action; compiler or cache-verification failures return build_failed with a retry action;
  • failed imports expose an audit ID, the original error, and the automatic rollback outcome;
  • successful automatic recovery returns failed_rolled_back; failed recovery returns rollback_failed and preserves the manual rollback action;
  • Rollback restores previous theme, homepage settings, content, media, menus, and imported options where possible.

Codex Multi-Site Safety

Codex can read MCP configuration from a project-level .codex/config.toml. AI Bridge now uses that as the preferred path for local Codex runtime setup and shows a Project TOML snippet for Direct Mode remote setup.

Recommended structure when you manage multiple sites:

site-a/.codex/config.toml -> livecanvas-forge points to Site A
site-b/.codex/config.toml -> livecanvas-forge points to Site B
remote-a/.codex/config.toml -> livecanvas-site-a-fingerprint points to Site A MCP URL
remote-b/.codex/config.toml -> livecanvas-site-b-fingerprint points to Site B MCP URL

For Direct OAuth, AI Bridge generates a distinct MCP server name from the WordPress host and Site ID. The OAuth token has the exact MCP URL as its audience and is also bound to the current site fingerprint in WordPress. A domain/path migration invalidates the old grant.

On public HTTPS sites, Remote Direct Mode uses an OAuth access/refresh grant approved by a WordPress administrator. Token identifiers are stored hashed, signing material is encrypted at rest, and the entire Codex client can be revoked from Connections. On fallback environments, AI Bridge uses its plugin-scoped pairing session. Neither default path stores a WordPress Application Password in Codex. The Application Password adapter remains under Advanced/manual fallback.

When you start a Codex session, first call:

get_connection_handoff

or, when using the WordPress Ability adapter:

livecanvas-forge-ai/get-connection-handoff

Then confirm:

status: ready
site_identity.fingerprint: matches the Site ID shown in Connections
guardrail: read_only_first

Use the global Codex MCP entry only as an advanced fallback. A global ~/.codex/config.toml entry is convenient, but it is easier to point the wrong Codex project at the wrong WordPress site.

Minimal Codex Connection Checklist

Use this checklist before allowing write requests:

  • open WordPress Admin > AI Bridge > Connections;
  • copy the Prompt for Codex from the correct WordPress site;
  • apply the generated Project TOML to that Codex project's .codex/config.toml;
  • restart Codex;
  • if Codex still lists an old global livecanvas-forge server with duplicate LiveCanvas tools, disable that legacy server before testing this project;
  • for Direct OAuth, run the generated codex mcp login --scopes mcp <server-name> command and approve WordPress authorization;
  • for secure pairing fallback, ask Codex to call the handoff and approve the matching user code in WordPress;
  • call livecanvas-forge-ai/get-connection-handoff;
  • verify site_identity.site_url, site_identity.fingerprint, auth_method, and scopes;
  • run a preview or dry_run: true before any apply command.

If authorization or discovery is slow, open Connections > Connection diagnostics. The on-demand check verifies HTTPS, OAuth dependencies, MCP Adapter classes, REST routes, discovery metadata, and the expected 401 MCP OAuth challenge. A loopback warning can be hosting-specific even when external Codex access works.

Domain Changes And Staging To Production Migrations

Treat a WordPress domain change as a new AI Bridge target. This is especially important after moving a site from staging to production, for example from:

https://beta.example.com/

to:

https://example.com/

Do not keep using the old Codex pairing session just because the Connections panel still says Ready. After a migration, the connection is stale if the generated Codex prompt, Project TOML, session label, or advanced remote target still contains the old staging URL.

Recommended procedure:

  1. Open the production WordPress admin.
  2. Go to AI Bridge > Connections.
  3. Confirm that the dashboard header shows the production domain.
  4. Open Advanced settings.
  5. Update Remote site URL to the production URL.
  6. Save the settings.
  7. Revoke every old OAuth app or secure pairing session whose project still references the staging domain.
  8. Copy the new Prompt for Codex from the production site.
  9. Confirm the prompt contains the production URL and does not contain the old staging URL.
  10. Apply the new Project TOML to the correct Codex project .codex/config.toml.
  11. Restart Codex.
  12. For Direct OAuth, run the new generated codex mcp login --scopes mcp <server-name> command and approve the production WordPress authorization screen.
  13. For pairing fallback, approve the new pairing request in the production WordPress admin.
  14. Ask Codex to call livecanvas-forge-ai/get-connection-handoff and verify site_identity.site_url and site_identity.fingerprint.
  15. Start with a read-only check or preview before allowing writes.

Use this first test prompt:

Call get_connection_handoff with {"limit":5}. Verify that site_identity.site_url is https://example.com/ and report the fingerprint, status, scopes, and public write abilities. Do not modify content.

If the handoff still reports the staging URL, stop and fix .codex/config.toml before running any preview or apply command.

Reauthorize Codex

For a public HTTPS site using auth_method: oauth_direct:

  1. Open AI Bridge > Connections > Connected Codex apps.
  2. Revoke the app for the Codex project you are resetting.
  3. Remove only that site's generated MCP block from the project .codex/config.toml, or regenerate it from the current site's setup prompt.
  4. Restart Codex.
  5. Run the codex mcp login --scopes mcp <server-name> command shown by AI Bridge.
  6. Approve the WordPress authorization screen.
  7. Call livecanvas-forge-ai/get-connection-handoff and verify the site URL and fingerprint.

Revocation invalidates that app's access tokens, refresh tokens, and pending authorization codes. It does not change a WordPress password.

Re-Pair Secure Fallback And Verify Write Authorization

Use this procedure only when Connections reports ai_bridge_session, such as a local/private site or a server without the official MCP Adapter.

1. Revoke The Old Session

Open:

WordPress Admin > AI Bridge > Connections > Secure Codex pairing sessions

or go directly to:

/wp-admin/admin.php?page=lcfa-dashboard&tab=connections#lcfa-secure-codex-pairing-sessions

Find the active Codex session for the project you are using and click Revoke.

2. Clear The Local AI Bridge Session Cache

In the Codex project chat, ask Codex:

Clear only the LiveCanvas AI Bridge cached session for this WordPress site from ~/.livecanvas-ai-bridge, then stop. Do not edit project files or WordPress files.

If Codex cannot identify the exact cache file, use:

Delete the local ~/.livecanvas-ai-bridge cache folder, then stop. Do not edit project files or WordPress files.

The cache stores plugin-scoped AI Bridge session tokens only. It does not store a WordPress Application Password.

3. Reload The MCP Server

Reload the livecanvas-ai-bridge MCP server in Codex, or restart Codex.

Then ask Codex:

Call livecanvas-forge-ai/get-connection-handoff with {"limit":5}. If pairing is pending, show me the user code and verification URL. Do not modify the site.

4. Approve The New Pairing

Return to:

WordPress Admin > AI Bridge > Connections > Secure Codex pairing sessions

Approve only the pending request whose user code matches the code shown by Codex.

5. Verify Authorization

After approval, ask Codex:

Retry livecanvas-forge-ai/get-connection-handoff and call livecanvas-forge-ai/get-ability-diagnostics. Report auth_method, session scopes, public write abilities, write allowlist, and connection status. Do not modify content.

Expected result for a write-capable project:

auth_method: ai_bridge_session
scopes: read, preview, write, media, theme_files, debug, cache, seo
connection status: ready
public write abilities: every registered AI Bridge write ability

If the result is still:

scopes: read, preview
public write abilities: 0

then the session is still preview-only. Return to Setup, choose Configure and build this site, save, regenerate the coding-agent setup, revoke the old session, and pair again. That single onboarding choice enables Power Mode, the complete write allowlist, and the full remote pairing scope.

The generated setup always declares the scope selected during onboarding. Inspect only uses:

LCFA_PAIRING_SCOPES="read,preview"

Configure and build this site uses:

LCFA_PAIRING_SCOPES="read,preview,write,media,theme_files,debug,cache,seo"

How To Test This Build

  1. Activate the plugin and open WordPress Admin > AI Bridge > AI Studio.
  2. Click Refresh, then open the Integration test plan panel.
  3. Copy the REST endpoint checklist and verify the read-only endpoints return 200 OK.
  4. Click Refresh summary in Handoff summary; parity should become verified unless the backend state changed between requests.
  5. In Native page blueprints, run Run preview first. This must not create content.
  6. Only after the preview looks valid, use Create draft page to create a new draft page with rollback metadata.
  7. For Codex/MCP, copy Copy Codex smoke prompt from the test plan and run it in the connected agent.

Minimum pass condition:

Studio loads, handoff summary refreshes, parity is verified, native page preview succeeds without writing, and MCP can read get_connection_handoff + get_handoff_summary.

Core Commands

Common run_lc_command actions:

Action Purpose
site_audit Inspect the site, stack, inventory, and capabilities.
site_prepare Check readiness before larger foundation work.
design_system_apply Apply normalized design tokens to the active stack.
global_shell_apply Create or update LiveCanvas header/footer partials.
page_upsert Create or update a LiveCanvas page and return URLs.
update_partial Update a reusable LiveCanvas partial that is not header/footer.
create_dynamic_template Create a LiveCanvas dynamic template with optional native assignment, priority, language, post target, and preview URL.
update_dynamic_template Update template HTML or patch its assignment; HTML-only updates preserve the current native assignment.
site_foundation_run Orchestrate preflight, design system, shell, and starter pages.
restore_audit_rollback Restore stored previous content for a local apply audit ID.

WordPress 7 ability highlights:

Ability Purpose
livecanvas-forge-ai/get-snapshot Read site and AI Bridge runtime context.
livecanvas-forge-ai/get-runs Read recent runs and rollback availability.
livecanvas-forge-ai/get-connection-handoff Read the first agent prompt and connection guardrails.
livecanvas-forge-ai/get-handoff-summary Read compact readiness, blocker, warning, and next-action metadata.
livecanvas-forge-ai/get-agent-handoff-package Read a sanitized virtual handoff package for connected agents.
livecanvas-forge-ai/get-block-pattern-library Read export-ready native block patterns with checksums.
livecanvas-forge-ai/get-native-pattern-page-blueprints Read no-write native page blueprint recipes.
livecanvas-forge-ai/preview-page-upsert Preview page create/update without writing.
livecanvas-forge-ai/apply-page-upsert Apply page create/update with audit metadata.
livecanvas-forge-ai/preview-global-shell Preview header/footer shell changes.
livecanvas-forge-ai/apply-global-shell Apply header/footer shell changes.
livecanvas-forge-ai/preview-command Run any supported AI Bridge command as a forced dry-run preview.
livecanvas-forge-ai/preview-block-pattern Convert supplied HTML into a native block pattern preview.
livecanvas-forge-ai/preview-native-pattern-page Compose a native block page preview from AI Bridge patterns.
livecanvas-forge-ai/apply-native-pattern-page Create a new draft native WordPress page from AI Bridge patterns.
livecanvas-forge-ai/content-patch-preview Preview an exact text, selector, attribute, append, or prepend patch without rewriting the full page.
livecanvas-forge-ai/content-patch-apply Apply a targeted content patch with validation and rollback metadata.
livecanvas-forge-ai/theme-file-read Read allowed theme files through the guarded PHP bridge.
livecanvas-forge-ai/theme-file-preview-write Preview a child-theme file write before applying it.
livecanvas-forge-ai/theme-file-write Write an allowed child-theme file with backup protection.
livecanvas-forge-ai/media-upload Upload URL/base64 media to the WordPress Media Library.
livecanvas-forge-ai/media-replace Replace media references inside LiveCanvas content.
livecanvas-forge-ai/picostrap-compile-preview Read Picostrap compile manifest and source inputs.
livecanvas-forge-ai/picostrap-compile-apply Store a compiled Picostrap CSS bundle after a successful local compile.
livecanvas-forge-ai/wp-debug Read PHP/WP/theme/plugin/debug-log context.
livecanvas-forge-ai/cache-flush Flush common WordPress caches and bump AI Bridge asset version.
livecanvas-forge-ai/polylang-tools Read or update Polylang language relationships when available.
livecanvas-forge-ai/seo-tools Read or update Yoast, SEOPress, or AI Bridge fallback SEO metadata.
livecanvas-forge-ai/restore-audit-rollback Restore a stored rollback by audit ID.

Read and preview abilities are MCP-public by default. Curated write abilities are enabled only through the master write switch, per-ability allowlist, and the paired session scopes. For production sites, enable Full Access only for trusted Codex sessions, review preview/diff output first, and keep rollback available for every apply.

For page-only work, tell the agent to use page_upsert with body_html or body_html_lines, optional page_css_lines, optional page_js_lines, seo.noindex, seo.canonical, and no_theme_edits: true. AI Bridge stores CSS/JS as page metadata, prints it only on that page, creates temporary public preview URLs for draft/private pages, and blocks theme/design-system/global shell writes when no_theme_edits is present. Apply results return an audit_id; rollback uses that audit_id, not theme-file backup_id.

The Node MCP package also exposes visual_check_status and visual_check for local browser-based desktop/mobile screenshots, shell counts, broken-image checks, console/page errors, overflow checks, and computed selector styles. Call visual_check_status first; {"probe_launch":true} verifies that Chromium can actually launch and returns an exact install or repair command when it cannot. The package declares Playwright, uses a configured LCFA_PLAYWRIGHT_EXECUTABLE_PATH when present, and otherwise detects local Chrome/Edge/Chromium or Playwright-managed Chromium. Browser navigation defaults to domcontentloaded so analytics and long-lived requests do not block checks unnecessarily.

These browser and filesystem helpers belong to the local Node MCP runtime used by local/pairing mode. Direct OAuth exposes WordPress Abilities without launching a local Node process, so use the coding agent's browser tooling for visual QA or switch that project to the advanced local MCP runtime. The connection handoff reports this transport boundary and, when the Node runtime is present, includes mcp_runtime.visual_check readiness. The same runtime exposes asset_discovery and media_upload_local_assets to scan a local image/video folder, upload selected assets to the WordPress Media Library, dedupe by manifest checksum, and return attachment IDs/URLs for later page insertion or media_replace.

The backend also exposes GET /wp-json/lcfa/v1/studio, GET /wp-json/lcfa/v1/studio/connection-handoff, GET /wp-json/lcfa/v1/studio/handoff-summary, GET /wp-json/lcfa/v1/studio/block-pattern-library, GET /wp-json/lcfa/v1/studio/native-pattern-page-blueprints, POST /wp-json/lcfa/v1/studio/native-pattern-page-preview, POST /wp-json/lcfa/v1/studio/native-pattern-page-apply, and GET /wp-json/lcfa/v1/studio/handoff-package for authenticated users or valid MCP tokens. Studio returns contract metadata, summary, readiness alerts, connection handoff, handoff summary, block pattern library, native page blueprints, handoff readiness, briefing, runbook, smoke tests, ability diagnostics, manifest, MCP write policy, AI/MCP readiness, run-health analytics, and sanitized run/audit rows without exposing rollback payload content. The connection-handoff endpoint returns only the first-prompt bootstrap. The handoff-summary endpoint returns only compact status, score, blocker, warning, missing-test, write-guard, and next-action metadata. The block-pattern-library endpoint returns only export-ready native patterns. The native-pattern-page-blueprints endpoint returns page recipes plus copy-ready preview/apply requests. The native-pattern-page preview endpoint composes block content from registered patterns without writing. The native-pattern-page apply endpoint creates a new draft native page and records a rollback reference. AI Studio can run the preview, create the draft from the blueprint panel, refresh audit state, and open the rollback flow for the created draft. MCP clients can also call get_connection_handoff, get_handoff_summary, get_block_pattern_library, get_native_pattern_page_blueprints, preview_native_pattern_page, apply_native_pattern_page, and get_agent_handoff_package.

Example User Prompts For Coding Agents

Use these from Codex, OpenCode, Cursor, Claude Code, or another MCP-connected client. They are natural-language prompts, ordered from simplest to more complex.

1. Check The Integration

Check that LiveCanvas AI Bridge is connected correctly. Inspect the site context and tell me which WordPress theme, LiveCanvas stack, framework, and AI Bridge capabilities are available. Do not change anything.

2. Audit Before Editing

Audit this WordPress + LiveCanvas site before we make changes. Summarize the existing pages, header/footer partials, dynamic templates, design-system status, and anything that could block automated edits.

3. Create A Test Page

Create a draft LiveCanvas page called "AI Bridge Integration Test". Add a clean hero section, one short content section, and a final call-to-action. Keep it simple and return the frontend URL and editor URL.

4. Create A Page From A Short Brief

Create a draft landing page for a consulting studio. The page should have a strong hero, three service cards, a short proof section, a FAQ, and a final contact CTA. Use the site's current framework and do not touch the global header or footer.

5. Generate A Design System From A Logo

I uploaded a logo for the brand. Build a first design system from it: extract a primary color direction, secondary/accent colors, button style, heading style, spacing feel, and radius scale. Preview the design-system changes first and explain what will be applied before writing anything.

6. Apply A Brand Foundation

Using the uploaded logo and the current site stack, create a brand foundation for a premium local services business. Apply the design system, create a matching header and footer, and generate draft Home, Services, About, and Contact pages. Preview everything first.

7. Create A Single Post Dynamic Template

Create a LiveCanvas dynamic template for single blog posts. It should have a large hero with the post title, a wide featured image, author/date metadata, readable content spacing, related posts at the bottom, and a newsletter CTA. Assign it to single posts.

8. Create A Custom Post Type Template

Create a dynamic template for the "service" custom post type. Each single service page should have a large title hero, optional featured image, key benefits, process steps, testimonial area, and a contact CTA. Assign it to single service posts and keep the markup compatible with the current framework.

9. Create A WooCommerce Product Template

Create a first draft WooCommerce single product template. Use a large product image area, product title, price, add-to-cart area, short description, benefits section, product details, reviews anchor, and related products. Preview the template assignment before applying it.

10. Full Site Foundation From A Brief

Build the first site foundation for a boutique architecture studio. Use the uploaded logo as brand reference. Create the design system, global header and footer, Home, Studio, Projects, Services, Journal, and Contact draft pages. Also create a single post template for Journal articles with a large featured image and editorial layout. Preview the full plan first, then apply only after I confirm.

Example User Prompts In The LiveCanvas Editor

Use these inside the AI Bridge drawer while editing a page in LiveCanvas. They are scoped to the current page or selected section.

1. Small Text Improvement

Improve the copy in this section. Make it clearer and more direct, but keep the same layout, classes, and structure.

2. Add A Section

Add a compact FAQ section with three questions at the end of this page.

3. Improve The Hero

Rework this hero section with a stronger headline, a short supporting paragraph, one primary CTA, one secondary CTA, and better spacing. Keep the current colors and framework classes.

4. Use The Selected Section As An Anchor

Select a section in LiveCanvas, then send:

Add a three-step process section immediately after the selected section. It should feel like part of the same page and should not duplicate existing content.

5. Add Pricing

Add a pricing section with three plans: Starter, Pro, and Team. Make Pro the recommended plan, include concise feature bullets, and add a CTA button for each plan.

6. Match An Uploaded Screenshot

Attach a screenshot in the AI Bridge drawer, then send:

Use the uploaded screenshot as a visual reference for this section. Match the hierarchy, spacing, and CTA structure, but keep this site's colors, typography, and framework classes.

7. Add A Logo-Informed Brand Section

Upload the logo in the drawer, then send:

Use this logo as brand reference and redesign the current section around it. Create a premium visual feel, choose supporting colors from the logo, and keep the section responsive in LiveCanvas.

8. Create A Rich Blog Hero

Turn this top section into a blog-post hero with a large featured image area, category label, title, excerpt, author/date metadata, and a clean scroll path into the article content.

9. Page-Level Refresh

Refresh this page for a consulting business. Keep the current content intent, improve section order, add a stronger CTA before the footer, and avoid changing the global header or footer.

Development Roadmap

Phase 1: Foundation Contract

  • stronger safety and policy behavior
  • normalized page create/update flows
  • local and remote execution parity
  • simpler coding-agent connection UX

Phase 2: Design-System Execution

  • Picostrap token mapping
  • Picowind/WindPress and DaisyUI integration
  • custom-theme fallback assets
  • clearer preview/apply behavior

Phase 3: Global Shell

  • header/footer partial create/update
  • explicit variant support
  • real-install partial discovery hardening

Phase 4: Site Foundation Run

  • preflight, design system, shell, and starter page orchestration
  • Genesis task hydration into the Command Deck
  • richer first-install workflows

Phase 5: Dynamic Templates And Data-Aware Builds

  • native LiveCanvas is_* template meta sync
  • WooCommerce single/archive support
  • custom post type support
  • ACF-aware template generation

Phase 6: Deeper LiveCanvas Editing Loop

  • richer editor-side chat workflows
  • more contextual LiveCanvas edits
  • stronger screenshot-aware generation

Repository Notes

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages