WordPress Playground WebMCP: ChatGPT's browser can build a WordPress site with site tools, plus GPT Image 2.5 in Lovable apps

ChatGPT's browser can now build a WordPress site while you watch

WordPress Playground now registers its site tools through WebMCP, so an agent inside ChatGPT's desktop browser can list sites, run PHP, and write files in a throwaway sandbox while you follow each call in the tab. Plus GPT Image 2.5 cutouts inside Lovable apps and one menu for everything you attach.

playground.site_toolsTooling1 item

The tab now advertises its own tools

WordPress Playground registers site tools through WebMCPMake WordPress Playground, 5 September

WebMCP is a proposed browser API that lets a web page expose its actions as tools an agent can discover, each with typed inputs. Playground, the in-browser WordPress that runs on WebAssembly, now registers its own set through a small proxy, because the sandbox lives in an iframe and ChatGPT's built-in browser only looks for tools on the top-level page.

The path is short: open Playground in ChatGPT's desktop browser, choose Site tools in the address bar, then Available site tools. The list covers site management, PHP execution, navigation, and filesystem operations across eight categories, with names like playground_execute_php and playground_list_sites. The agent calls them inside the live session, and Fellyph Cintra's description of the loop is the design story: you keep using the interface, inspect the result, and guide the next step. The demos are a landing page, a testing dashboard, and a plugin walkthrough, all inside a site that disappears when the tab closes.

Fine print for now. The proxy merged on 3 September and works today, but WebMCP itself is still a W3C Community Group draft, the same one that landed in Vercel's mcp-handler yesterday. OpenAI recommends GPT-5.6 Sol or Terra, site tools are unavailable with Luna and in Enterprise and Edu workspaces, and rollout varies by workspace.

app.image_generateTechnique1 item

Cutouts from the app's own image call

Lovable apps can call both GPT Image 2.5 modelsLovable changelog, 15 September

An app built in Lovable can now generate images with OpenAI's Flare model for fast previews and its Sunburst model for final assets, both with transparent backgrounds as PNG or WebP, billed per generation. For a product page or a menu, that is the difference between a photo in a white box and a subject that sits on the page's own ground. Prompt the subject only, no floor and no shadow, and let the layout supply the light.

chat.add_contextWorkflow1 item

One menu for everything you attach

Lovable groups skills, designs, connectors, and files under Add contextLovable changelog, 16 September

The plus button beside the chat input now opens a single Add context section, and typing an at sign or a slash opens the same menu, so a brief, a Figma frame, a skill, and a PDF all arrive the same way. It follows a week of connector work in the same changelog, including Canva as a chat connector on 10 September. The pattern matters beyond Lovable: the composer is where the design brief enters the build, and a tool that treats attachments as first-class context is telling you what to prepare before you type.

A quiet week, and one pattern that stuck

Two sweeps of the usual sources turned up almost nothing new this week, which is its own signal in a September that has been mostly announcements. The Playground post earned the lead because it shows the shape of the next builder surface: the agent working inside a site you can see, one named call at a time, with you holding the address bar.

The tool-call row

Begin each section of a product page with one identical log line: a machine-style name in mono on the left, the plain-word section title beside it, and a filled label on the right that states what the section delivers, such as a count of items or a status. It is a console line doing the work of a section marker, and a reader can skim the full page as a run of operations before reading a word of it.

Use it on pages that describe an automated workflow, an API, an integration, or a changelog, where the audience already reads logs. Keep it honest: the name on the left should map to a real capability the section covers, the label on the right must be true content rather than decoration, and the row stays a heading device, so no fake spinners, timers, or toggles.

Build a one-page website for a browser-based developer tool that lets AI agents operate a sandboxed site. Page archetype: a web-native editor shell, laid out like the product's own workspace, with a hero, three feature sections, a design note, and a footer. Do not build a generic template; follow this structure exactly. Ground: a deep warm umber, #221A16, with a faint dot grid across the whole page (1px dots of the text colour at 7 percent opacity on a 24px spacing). Panels sit one step lighter at #2C2320; recessed surfaces one step darker at #1C1512. Text is warm off-white #EFE6DC, secondary text #D6CBC0, labels #A8988C. The single accent is lavender #B9A6E6, used for the kicker, tool names, filled count labels, link hover, and one button; italic prose uses a paler lavender #C9BAEC. No cyan, no neon, no glow, no gradients. Type: Familjen Grotesk 700 for the headline (72px desktop, line-height 1.0, tracking -0.02em), section titles, and item titles; Source Serif 4 for all body prose at 19px with line-height 1.7 in a 66ch measure; JetBrains Mono for the byline, tool names, labels, captions, and the prompt block. The logic: a tight grotesque for the product chrome against a book serif for the reading, the way a docs page sets its interface in sans and its prose in serif. App bar: brand on the left, three text links, and an inline byline on the right in mono (issue or version number, date, read time) instead of a boxed metadata table. Hairline below. Hero: a mono kicker in lavender, then a two-column row with the headline at 15ch max width on the left and a 420px deck at 19.5px in the secondary text colour aligned to the baseline on the right, then a full-width canvas figure: a recessed panel with a denser dot grid holding a screenshot of the product's window, with a two-part mono caption (figure description left, dimensions right). The screenshot must be real or rendered from real HTML; no fake blurred text. Workspace: a two-column grid, main column flexible with a 66ch measure, plus a 400px sticky inspector on the right that also holds a field-note panel and a sources panel. On screens under 980px the inspector drops below the main column. Section opener: a tool-call row, a three-column hairline-bounded line in 13.5px mono with a small triangle then a lavender machine-style name on the left (for example playground.site_tools), the plain section name in uppercase muted mono in the middle, and a filled panel-coloured label on the right stating the item count. Each section then has a 31px grotesque title and one or more items, each with a 22px item title, a mono date line, and one to three serif paragraphs. Items are separated by hairlines, never cards. Inspector: one bordered panel titled with a mono label, a 24px name, an italic one-line summary, a short paragraph, then a definition list of property rows (Ground, Accent, Display, Body, Mono, Motif) and a row of small mono tags on recessed chips. Design note: a two-column block, text left with its own tool-call row and a 31px title, and a 460px screenshot right with a mono caption. Prompt or code block: a full-width bordered panel styled as the product's composer: a header row with the title and a mono label, an intro paragraph, the pre block in 14.5px mono, and a recessed footer row of attachment-style links. Footer: a hairline-bounded previous/index/next row in mono, then a short colophon in 15.5px muted text. Guardrails: body text never below 18px; line-height at least 1.6; small mono labels at least 12px and WCAG AA against their actual surface; no justified text; radius 4 to 12px, nothing pill-shaped; one shadow at most; no accent left-border stripes; no fake toggles, search fields, or spinners; hover and focus states on every link at about 150ms; a prefers-reduced-motion guard; semantic landmarks and no skipped heading levels.