Chat

Use Chat to ask the configured built-in provider to create a site or change a page. Choose an action or write a request, then check the private preview before publishing. Pages and mutable assets stay in the draft.

Chat needs provider configuration. For an external conversation, use Studio MCP; its authoring tools do not run the built-in provider or AI Router. Both workflows share the draft, so review external changes before continuing local edits.

The Chat panel uses a side-by-side layout - conversation on the left, live preview on the right. This requires a desktop or tablet screen. On mobile phones, the Studio directs you to content management views (Assets, Forms, Actions) instead.

Desktop example: Chat and the website preview. Fieldwork Studio is synthetic example data.

The conversation panel

The left side of the Studio is the conversation panel. It has three parts:

1. Context bar - shows which page the AI is targeting, plus quick action buttons
2. Message stream - the scrolling conversation with the AI
3. Prompt bar - where you type (or dictate) your instructions, with toolbar buttons for attachments, voice input, and send below

Type a message and press Enter or click the send button. Check the response, modified files and preview before publishing.

With AI Router on, a confident question route answers without changing files. An explicit no-change request can get an acknowledgement without generation. Editing requests still use the selected action and page scope.

Actions vs. free chat

VoxelSite offers two ways to interact with the AI:

Actions

Actions are guided flows for common tasks. Click the + button in the context bar to reveal them:

Use a guided action when you need help supplying the details for a new site or design change.

Free chat

Type anything directly into the prompt bar. Useful when you know exactly what you want:

Add a phone number to the footer: +44 7700 900123

Make the hero section taller with a gradient overlay

Change the heading font to Playfair Display

For prompt examples, see Prompting basics and Editing & modifying.

Image attachments

You can attach images to any chat message - screenshots, mood boards, color palettes, competitor sites, reference designs. The AI sees the image alongside your text and uses it as visual context.

Three ways to attach:

• Click the 📎 button in the prompt toolbar
• Drag and drop an image onto the prompt area
• Paste from clipboard - copy an image and press ⌘+V (Ctrl+V on Windows)

Attached images appear as a thumbnail strip above the textarea. Hover over a thumbnail to reveal the ✕ remove button.

Limits: Up to 5 images per message, max 5MB each. Supported formats: JPEG, PNG, GIF, WebP.

Image-only messages: You can send images without text. Add an instruction when the image alone does not identify the change you need.

History: Tiny thumbnails of your attached images are saved with each message, so you still see them when you return to a conversation after refreshing.

Provider support: Image attachments work with Claude, OpenAI, Gemini, and OpenAI-compatible providers. DeepSeek does not support vision - your text will still be sent, but the images won't be visible to the AI.

Website references

You can attach any public website URL as a design reference. VoxelSite interprets the site's visual language - colors, typography, spacing, layout - and uses it as inspiration when creating or restyling your site.

Click the globe icon (🌐) in the prompt toolbar to open the reference sheet. Enter a URL, click Add, and hit send - no text prompt required. The AI understands the reference and gets to work. You can optionally add extra instructions alongside the reference.

Website references work for both new sites and restyling existing sites. A restyle uses your existing content as context. Review the result for unintended text or layout changes.

For the full guide, see Website References.

Voice input

Click the microphone button in the prompt toolbar to dictate your message instead of typing. The button turns red and pulses while listening - click it again to stop, or pause until the browser ends recognition.

Your speech is transcribed and appended to the textarea. If there is already text in the prompt, the transcript is added after a space - nothing is replaced. You can combine typed and spoken input freely.

Browser support: Voice input uses the Web Speech API. The microphone button appears when the browser exposes speech recognition. Availability depends on the browser and device.

Requirements: HTTPS is required (or localhost for development). If the page is served over plain HTTP, clicking the button shows a toast: "Voice input requires HTTPS."

Privacy: The browser controls speech recognition and may process audio through a remote service. VoxelSite receives the transcript when you send the message. Check your browser's speech-recognition terms before dictating private information.

Page scope

The scope selector in the context bar tells the AI which page to focus on:

• All Pages - the AI decides which files to modify based on your request
• A specific page (e.g., Homepage, About) - focuses the context on that page; it does not restrict all writes to that file

Click the Scope dropdown to switch. When your request is clearly about one page, targeting it explicitly gives better results.

How the AI responds

After you send a message, the AI:

1. Reads site context for the request - page source, styles, data and design decisions can inform generation. AI Router can select focused context and a different writing model for the task. The engine manages a context budget, prioritizing the page and site context when the model's context window is tight. For a brand-new site it also receives a drawn design direction to guide its layout, typography and colors.
2. Plans the changes - decides which files to modify
3. Streams the output - you see progress in real time
4. Updates the preview - the live preview refreshes automatically

Changed files are listed at the bottom of each AI message so you know exactly what was modified. A Save to Designs shortcut appears below the file list - click it to save your current design to the Design Library.

Expert review

If Expert review after generation is enabled in Settings, an additional AI call runs after each generation to check for common HTML, accessibility, and SEO issues. Results appear in a collapsible "Expert Review" panel below the file list.

Each suggestion shows the severity (error, warning, or info), the affected file and line, a description, and a recommended fix. Info-level suggestions are collapsed by default under an "additional suggestions" header.

Click Add to chat → on any suggestion to append a follow-up prompt to the chat input. The prompt is advisory - it asks the AI to review and apply the change if appropriate, so you can check the finding before applying it.

Design review

If Design review after generation is enabled, a second reviewer looks at the finished page the way a design studio would. It sees only the result - never your prompt or the conversation - and returns a score out of 10, a one-sentence verdict, the three gaps that would move the score most, and any patterns that read as machine-made.

The results appear in the same Expert Review panel. The score and the gaps show as warnings when the page scored under 8 and as suggestions otherwise. Click Add to chat → on a gap to turn it into your next prompt. Nothing is changed automatically.

Site memory

During generation, the AI can save business facts in the private draft’s assets/data/memory.json. This file and design-intelligence.json are excluded from publication and portable export. Later requests can include those saved values. Check the stored facts in AI Knowledge and review their use in generated pages.

Tips

• Be specific. "Add a testimonials section with 3 cards" gives better results than "add testimonials."
• Iterate. Don't try to get everything perfect in one prompt. Build up in steps - create the section, then adjust the design, then fine-tune the copy.
• Use page scope. If you're editing a specific page, select it in the scope dropdown for more focused results.
• Check the preview. The live preview updates after every AI response. Scroll through it to verify the changes look right.
• Undo an edit. AI changes enter the revision history. Use the undo button or restore from Snapshots if something goes wrong.

During generation

While the AI is generating, the Studio enters a protected state:

• A progress overlay appears on the preview. For new sites, it reads "Building your site - Generating a new website can take more than 5 minutes." For updates to an existing site, it reads "Applying your changes - This may take a few minutes."
• The navigation bar, status bar buttons, and preview toolbar (including the Save button) are dimmed and disabled
• The prompt area is locked - you cannot type or send new messages until generation finishes
• The chat panel remains scrollable, and the Stop button stays active if you need to cancel

This prevents accidental clicks (undo, navigation, publish) that could corrupt the generation in progress.

Starting a new design

Below the chat messages, the Start a new design from scratch button lets you clear the workspace and begin fresh. A confirmation modal asks whether to save your current work to the Designs library first.

Related

• Prompting Basics - How to write effective prompts
• Creating Sites - The guided site creation flow
• Editing & Modifying - Prompts for changing content, layout, and design
• How Prompting Works - What happens under the hood when the AI processes your prompt
• The AI Engine - How VoxelSite's AI works under the hood
• Visual Editor - Click-and-edit alternative for quick changes
• Website References - Use any website as design inspiration
• Designs - Save and switch between different website designs