What it does
The AI assistant (Fen — the same assistant as the dashboard's AI Assistance) sits on the left of the editor and reads your current HTML, CSS, JS, @keys, asset list, and data-sheet schemas — then writes or refines code based on your prompt, and can propose Data Sheet / row changes alongside the code. It runs on the model you've selected in My Account → AI assistant.
Two modes
- Description scaffold. When you create a playground with a description but no code, the assistant kicks off a one-shot scaffold the first time you open the editor. You'll see a "Generating from your description…" overlay.
- Chat refinement. Type into the chat panel any time. The assistant returns a complete replacement HTML / CSS / JS plus suggested @keys.
Review & approve (diff dialog)
Patches do not auto-overwrite your editor. When the assistant returns a code patch you get an inline Apply / Reject card and a Compare button that opens a side-by-side diff (Monaco) of every changed file, plus a Preview tab that renders both the current and proposed playground in the sandbox so you can sanity-check before applying. Approving the patch writes it to the editor (the Save button glows so you can persist it to the server); rejecting leaves your editor untouched.
For Data Sheet / row mutations and SEO metadata the assistant returns a Pending Changes card listing each proposed change (create a sheet, add columns, remove columns, add rows, update rows, delete rows; or set a page's or the home page's title, description and keywords). Nothing persists until you click Approve — at which point each change is dispatched to the matching endpoint.
Resumable jobs
AI runs execute server-side as a job. If you refresh the tab, navigate away and back, or briefly lose your connection while the assistant is thinking, the chat panel resumes the same job on reload and you'll see its current phase (queued → analyzing → drafting → reviewing → applying) instead of starting over.
Attachments
The paperclip icon on the chat input lets you attach images (PNG, JPEG, WEBP or GIF, up to a small per-message limit) to your message. Thumbnails appear in the bubble and the image is forwarded inline to the model provider for that request. Useful for "match this screenshot", "this is the brand mark, use it", or pasting an error screenshot for the assistant to diagnose.
Targeted edits
From the bottom drawer's Inspect tab (or from Inspect mode in the preview) click Refine with AI to pin a specific element. Your next message gets a [Targeting ...] tag prepended, and the assistant focuses changes on that element instead of rewriting unrelated regions.
Choosing which part of the site to edit
Above the chat input is a surface dropdown that points the assistant at a single part of your site — Home, the shared Server code, or any of your pages. Switching it focuses the assistant on that surface so your request only touches it.
On a multi-page playground the dropdown also offers All as its first option. With All selected the assistant considers your whole site at once — the home page, your shared CSS/JS, the server code, and every sub-page — which is handy for site-wide requests like "add the same footer to every page" or "use a dark theme everywhere". Edits to home, shared styles and server code apply directly; changes to each other page come back as Pending Changes you preview and approve one at a time. For a site-wide look it will usually prefer your shared CSS/JS (or a reusable component) so one edit covers every page.
Writing your SEO
Ask the assistant to "write the SEO" (or a page title, meta description, or keywords) and it drafts them for the home page and any sub-page, returning each as a Pending Change you approve one at a time. It only fills the searchable title, description, and keywords — it never turns search visibility on. To actually be indexed you still enable Search visibility yourself, on a bound subdomain or custom domain (see Playgrounds overview).
How it uses your data
- Assets. The assistant sees the filename, content type, and URL of every asset you've uploaded. Asking "use my logo" works without copy-pasting URLs.
- @keys. Existing keys are sent so the assistant can re-use them or suggest new ones for added DOM.
- Sheets (schema only). The assistant sees a schema-only summary of each Data Sheet — slug, column keys, column names, column types, and the row count. Row contents are not sent to the model. The assistant can both read sheets in the JS it writes (
flowfn.data.get('users')) and propose sheet/column/row mutations through the Pending Changes flow described above.
Switching models
Click the AI icon in the dashboard header to choose between platform AI (FlowFn's bundled OpenAI / Anthropic / Gemini / Grok), team-default BYOK, or your own API key. The choice applies to all AI features including the playground assistant.
Costs
Platform-AI usage burns credits at the rate your plan publishes for platform-AI tokens. Bring-your-own-key (BYOK) usage is billed by the provider directly — FlowFn just relays the request. Failed AI calls are not charged.