Edit a live page with your bot

Connect your bot to a live web page, change the design by talking, and walk away with either a pull request or a precise change list.

Who this is for

You have a page on the web — a landing page your bot deployed, your company site, anything you can open in a browser — and something about it bugs you. You want to fix it by describing the fix, not by learning CSS.

Before you start

• A bot with VCA. VCA ships with GATE; if your bot says it can't open editing channels, ask your org's admin to check its tool access.
• The page open in your browser — you'll watch it change live.
• For the pull-request ending: the page should belong to a GATE-hosted project. Any other site still works — you'll get a handoff list instead.

Steps

1. Open a channel. Tell your bot which page: "Let's fix the design on acme.com — open a visual editing channel." It replies with a one-word password and the widget snippet.

2. Put the widget on the page. Two routes:

   • Editing right now: paste the one-liner your bot gives you into the browser's developer console on the open page (open dev tools, paste, press enter).
   • Editing a page you'll come back to: ask your bot to add the snippet to the page's code — for a GATE-hosted project it can do that and push on its own.

3. Connect. The page shows a small password prompt. Enter the channel password. You'll see a banner confirming the live connection and a mini chat box pinned to the page.

4. Direct the changes. Talk to your bot — in your normal chat or the on-page box: "Tighten the spacing under the nav." "Make the testimonials three columns." "Swap the hero image for the one I sent you this morning." Each change lands on the page as it's made. If a request is ambiguous, your bot can highlight candidate elements on the page and let you pick.

5. Iterate fearlessly. "Undo that." "Actually, redo it." "Show me a screenshot of how the top of the page looks now." The change record keeps everything reversible.

6. Build it. Happy? Say "build these changes."

   • GATE-hosted project: your bot opens a code session, applies the diff to the real source, and raises a pull request. Review and merge like any other change.
   • Other sites: your bot produces a numbered change list — hand it to whoever maintains the site.

7. Close the channel when you're done: "close the editing channel on acme.com." The widget locks out immediately; you can reopen the channel later.

What you'll see

• In chat: the password and snippet at open, screenshots on request, the pull-request link or change list at build.
• On the page: your edits landing live, the connection banner, the mini chat box.
• In the dashboard: the channel, its password, and its status on the VCA page.

Troubleshooting

• The widget won't accept the password. Check the dashboard's VCA page for the current word — if someone rolled it, the old one is dead. Several wrong tries in a row trigger a short lockout for that browser; wait a few minutes.
• The password prompt never appears. The channel may be closed — ask your bot for the channel's status, and to reopen it if needed.
• Edits stopped landing. The widget lost its connection — reload the page, reconnect with the password, and continue; the recorded changes survive a reload.
• The build PR touches the wrong files. Make sure the channel was opened in project mode against the right project — ask your bot which project the channel is bound to.

Going deeper

• Editing live pages (VCA) — the concept page
• Launch a landing page — get the page live first
• Build & deploy an app