The AI Assistant

Geppetto's AI lives in four specific places in the app and can only edit what you have open in those areas. This is by design, if you ask for another field in your form it won't make your headlines another color.

Site Generation
In onboarding, when you create a site. Builds a starter homepage and theme from a short chat.

Block Generation
In the "Create Block" modal. One-shot: turn an image, a description, or pasted code into a block.

Block Chat
A panel inside the block editor. Refines the block you're editing, conversationally.

Theme Chat
A panel inside the theme editor. Adjusts your colors and typography, conversationally.

When you first create a site, Geppetto opens with a chat: "Hey, I'm Geppetto. I build websites."

A few questions about your project, your voice, and your colors, and it generates a starter homepage and a matching theme. That's a one-time kickoff to get you off a blank page. From there you shape and refine it: edit content in the sidebar, refine blocks with block chat, tune the look with theme chat.

In the Blocks section, click Create. The modal has a few starting points.

Clean slate
An empty block you build yourself.

From prompt
Describe the block in words ("a pricing table with three tiers and a highlighted middle plan") and the AI writes the template and fields.

From code
Paste existing HTML and Geppetto turns it into a block, wiring up fields as it goes.

From image
Upload a screenshot or a design (any image file, resized automatically) and the AI rebuilds it as a themed block.

Tips

Blocks are generated with theme classes, so they match your site. Even if your image of a pricing table is a sketch on a napkin the generated block will use your theme colors and typography.

Generation is one-shot. It gives you a starting point, not a finished conversation. To take it further, open block chat (below) and start refining.

For a step-by-step walkthrough of each starting point, see Creating Blocks.

Inside the block editor there's a small AI Chat button (look for the sparkle icon). Ask for changes in plain language.

"Make the headline use heading-xl and center it."

"Add an eyebrow label above the headline."

"Turn the three features into a repeatable Items field."

Block chat prefers to write blocks using theme classes. If you want to make something a color outside your theme colors tell the AI this, or add the color to your theme. The AI isn't allowed to modify the theme from block chat.

When the AI changes your block, it doesn't overwrite your work. It shows a proposal. An explanation plus the edits it wants to make.

• Accept applies the change to your block.
• Reject throws it away and snaps the block back exactly as it was.

So you can experiment freely. A bad suggestion costs you one click to undo. A new message always supersedes the last proposal, so you're never stacking up half-applied changes.

Block chat can rewrite your HTML, but it can also manage the fields behind it: adding a new field, renaming one, changing a type, reordering them. When it does, the proposal lists the field changes explicitly so you can see exactly what's about to happen before you accept.

Every message you send carries your site's design system along with it. The AI sees your actual palette, your typography classes, your spacing scale (it knows that p-md means a specific number of pixels), and your partials like Section and Button. That's why generated blocks come out looking like your site instead of generic placeholders, and why "tighten the spacing" produces a sensible result. Set your Theme first and everything the AI makes inherits it.

Block chat remembers the back-and-forth while you're working, so follow-ups build on what came before. That history lives in your current editing session; it isn't saved permanently, so reloading the editor starts a fresh conversation. Your accepted changes are safe either way. They're part of the block once you save.

The block chat is trained to use patterns that are tidy and work well with the Geppetto editor. If you ask it to build a carousel it will use Embla and the same structure every time. Layout, animation and interactivity are all written with the same patterns consistently.

Open the theme editor and you'll find the same kind of AI Chat panel in the corner. This one shapes your site's look. Ask for a theme (e.g. "dark business-y", "warm editorial") or refine specific elements.

Describe a direction ("warmer, more editorial, swap the blue for a deep green") and it adjusts your existing color and typography tokens. Changes apply to the live preview right away so you can see them, then you commit them with the theme editor's Save button (or discard your unsaved edits and try again).

Use theme chat to make bulk changes or get a vibe, then jump in and make your own color and typography tweaks. When you find yourself asking AI to make a color "even more green" it's time to open up the color palette and finesse manually.

Theme chat tunes the design tokens you already have. It's for refining the palette and type, not for restructuring your blocks or pages.

Generate, then refine. The first output is a draft. Two or three follow-up messages get you somewhere a single prompt never will.

Be specific. "Make it nicer" is hard to act on. "Increase the gap between cards, make the headings bold, and add my accent color to the icons" is easy.

Learn from what it writes. The output is plain HTML and Handlebars. Reading the blocks it makes is one of the gentlest ways to pick up how templates work. See Templates.

Reject early. If a proposal isn't right, reject it and rephrase rather than accepting and patching. A clean starting point beats untangling a wrong one.

Claude code and other AI coding tools love to work with Geppetto because of it's simple structure and robust API. The API page goes into more detail.