Editing live pages (VCA)

VCA — the Visual Code Agent — gives your bot eyes and hands on a live web page. You point it at a URL, describe what you want changed, and watch the page update in real time while you chat.

It's the same bot you always talk to, in the same conversation — not a separate tool you switch to. VCA is a channel: a live connection between your bot and one specific page.

What your bot can do on a connected page

Once a page is connected, your bot can read the page's structure and styles, and then work on it like a designer sitting next to you: restyle elements, rewrite text, swap or insert images, move sections around, add new elements, or delete ones you don't want. It can scroll to what it's working on, take screenshots into the chat, and highlight elements for you to pick from when words get ambiguous ("this one?").

Every change is recorded. Nothing is permanent while you experiment — ask your bot to undo the last change, redo it, or replay the whole series, and the page follows.

Ask: "Make the hero headline bigger and move the signup form above the fold," or "Try the buttons in the brand green instead."

Connecting a page

Ask your bot to open a VCA channel for the page — "let's fix the design on acme.com/pricing". Your bot sets up the channel and gives you two things: a one-word password and a small snippet that loads the editing widget on the page.

Getting the widget onto the page takes one of two routes:

• You paste it — your bot gives you a single line to paste into the browser's developer console on the open page. Quickest for a page you're looking at right now, and it leaves no trace in the site's code.
• The site carries it — for a page you'll edit more than once (or that someone else opens), the snippet goes into the page's code. For a GATE-hosted project, just ask your bot to add it and push.

When the widget loads, it asks for the channel password. Enter it and the page connects — you'll see a banner confirming you're editing a live page, plus a small chat box right on the page so you can direct your bot without switching tabs.

The password

Each channel gets its own password, generated when the channel opens — a single memorable word. Your bot shows it to you once when the channel is created, and you can always look it up (or replace it with a fresh one) on the VCA page of the dashboard. Replacing it disconnects anyone currently connected.

A few wrong guesses in a row locks that visitor out for a few minutes, which makes the short password hard to guess before the lockout kicks in.

From experiment to real change

When the page looks right, ask your bot to build the changes:

• GATE-hosted project — the recorded changes become a coding task: your bot opens a code session against the project, applies the edits to the real source, and raises a pull request for you to review. Your live experiment becomes a real, reviewable code change.
• Any other site — you get a tidy numbered change list, precise enough for whoever maintains the site to apply ("increase .hero h1 from 32px to 48px…"), plus the raw change data.

Housekeeping

Channels stay open until you close them — ask your bot to list its open channels if you've lost track. A closed channel locks out its widget immediately; you can reopen it later and the password still works. If a page stops responding to edits, the usual cause is the widget losing its connection — reload the page and reconnect.

Going deeper

• Guide: edit a live page end-to-end
• Building & deploying apps — where the pull-request half of the story lives