Chat

The Chat panel is VoxelSite's primary interface. You describe what you want in plain language, and VoxelSite builds it. Every interaction — creating a site, editing pages, changing the design — happens through this conversation.

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.

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 your instructions, with an attach button and send button below

Type a message and press Enter or click the send button. VoxelSite processes your request, modifies the relevant files, and shows the result in the live preview on the right.

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:

Actions ask the right questions to get good results. They're the recommended way in, especially for bigger changes like creating a new site or redesigning the look.

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

Free chat gives you full control. For detailed prompting strategies, 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 any text. VoxelSite will analyze the image and apply what it sees.

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 (GPT-4o), 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. Your content is always preserved during a restyle. The result is an original interpretation in Tailwind CSS, not a pixel-perfect copy.

For the full guide, see Website References.

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) — the AI targets only that page

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 your current site — it sees all your pages, styles, data, design decisions, and data dependencies. The engine manages a context budget, prioritizing essential information when the model's context window is tight.
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, rather than asserting the finding is correct.

Site memory

VoxelSite remembers facts you share — phone numbers, opening hours, team members, brand details. These are stored in assets/data/memory.json and used automatically across all future edits. You never need to repeat yourself.

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 anything. Every AI change is tracked. 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
• 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