The AI Engine

VoxelSite's AI engine is the core of the product. It takes your description and generates a complete, working website.

Creating a site

During installation, you set your site name and tagline. When you open the Studio for the first time, the AI already knows what kind of business you are.

From there, just describe what you want in the chat. The AI reads the site name and tagline, infers your business type, and generates a complete website in one response:

• No wizard, no multi-step form. Type "Build a complete website" or pick it from the Prompts menu and the AI does the rest.
• It infers, not assumes. A site called "Brew & Bean" with tagline "Artisan Coffee" gets a menu section, warm photography, and location info - not a generic agency template.
• Start lean. The AI prioritizes one stunning homepage over multiple mediocre pages. Additional pages are created when they make sense for your business type.
• A drawn design direction. Before generating, the engine draws a creative brief so two similar businesses do not get the same site. See Design direction below.

What gets generated:

• Complete HTML pages with semantic markup and Tailwind CSS utility classes
• A design system - style.css with custom properties (colors, typography, spacing) unique to your site
• Shared partials - _partials/header.php, nav.php, footer.php for consistent layout
• Written content tailored to your specific business
• Contact forms with server-side validation and spam protection
• SEO metadata including Schema.org structured data
• Structured data files - JSON files in assets/data/ for machine-readable business info

Model and prompt routing

The optional AI Router uses TypeSafe's Jev to assess requests before generation. VoxelSite selects a Faster or Stronger model from your saved provider and uses a prompt recipe for the task. Small copy edits can use focused context; broader work keeps the context it needs.

Questions can use a read-only path. Some exact selected-text replacements need no writing-model call. If routing cannot select a route, VoxelSite reports that and uses your default model and normal instructions.

How changes work

After the initial generation, you can make changes by describing what you want:

• "Add a testimonials section to the homepage"
• "Change the color scheme to dark blue"
• "Add a new page for our team"
• "Make the header sticky"

VoxelSite figures out which files to modify, makes the changes, and shows you a live preview. Every change is tracked - you can undo anything.

Actions vs. free chat

VoxelSite offers two ways to interact:

Actions are guided flows for common tasks - creating a site, editing a page, changing the design, adding components, updating SEO. They ask the right questions to get the best results.

Free chat lets you type anything. Useful when you know exactly what you want or need something the actions don't cover.

Website references

Instead of describing a design from scratch, you can attach a public website URL as a design reference. VoxelSite fetches the page, cleans the HTML, and sends it to the AI alongside your prompt. The AI interprets the design language - colors, typography, spacing, layout patterns - and translates it into clean Tailwind CSS for your new or existing site. The result is an original interpretation, not a copy.

This works for both new sites and restyling existing ones. No text prompt is required - the URL alone is enough. The fetched HTML never leaves the VoxelSite engine - it's used as context only, never stored permanently. See Website References for the user-facing guide.

What gets generated

VoxelSite generates standard web files:

your-site/
├── index.php              # Homepage
├── about.php              # About page
├── contact.php            # Contact page
├── submit.php             # Form handler
├── _partials/
│   ├── header.php         # Shared <head>, fonts, styles, meta, opening wrapper
│   ├── nav.php            # Navigation (desktop + mobile)
│   ├── footer.php         # Footer + closing scripts
│   └── schema.php         # SEO structured data (Schema.org)
├── assets/
│   ├── css/
│   │   ├── style.css      # Design tokens (your colors, fonts, spacing) + overrides
│   │   └── tailwind.css   # Compiled utility classes
│   ├── js/                # JavaScript files
│   ├── images/            # Uploaded images
│   ├── icons/             # Lucide SVG icons (hydrated from placeholders)
│   └── data/              # Structured data (JSON)
├── sitemap.xml            # XML sitemap
├── robots.txt             # Crawler rules
├── llms.txt               # AI site map
└── mcp.php                # MCP server endpoint

These are real files. You can open them in any code editor, modify them by hand, or host them anywhere PHP runs.

Design direction

Asked for "a unique design", an AI model returns its most probable design, and that is the same design every time: the same body font, the same accent color, the same centered hero. VoxelSite does not leave variety to the model.

Before a new site is generated, the engine draws a creative brief and hands it to the AI as part of the context:

• Hero - all typography, a full-bleed photograph, a split, an asymmetric layout, a statement line with the image below the fold, or an editorial kicker
• Type - a family with a suggested Google Fonts pairing, from high-contrast serifs to condensed display faces to monospace accents
• Palette and accent hue - warm or cool neutrals, near-monochrome, two strong hues, a dark ground, or ink on light, with one of twelve accent hues
• Layout, corners, and motion - grid discipline, band rhythm, magazine columns, or tiles; square to pill corners; from near-static to slow and cinematic
• One signature move - the thing a visitor could describe afterwards: oversized numerals, a split screen, a marquee, editorial rules, a color-block navigation, a giant footer

Your own words always win. If you ask for "dark and moody" or pick a style in the create flow, the draw is constrained to match, and anything you have rejected in conversation ("no serif fonts", "not dark") is remembered and never drawn again. The direction only fills the gaps you left open.

The AI records how it applied the brief in Design Intelligence under direction, together with a short seed, so later edits stay coherent with the original decision. Edits, website references, and restyles never draw a new direction - the existing site or the reference is the direction.

Site Memory

VoxelSite remembers what it learns about your business. When you mention your phone number, opening hours, or team members, the AI stores these facts in assets/data/memory.json. On future edits, it uses this knowledge to keep your site consistent - no need to repeat yourself.

Design Intelligence

The AI also tracks its design decisions in assets/data/design-intelligence.json - which fonts it chose and why, what color temperature suits your brand, the spacing rhythm it established. This means design changes stay coherent even across multiple editing sessions.

Cross-page awareness

VoxelSite sees the structure of every page on your site - not just the one you're editing. For each page, the AI knows which sections exist, what headings they contain, and how the page is composed.

This means cross-page prompts work naturally:

• "Make the About page match the style of the Home page"
• "Add a testimonials section similar to what's on the homepage"
• "Make sure every page has a consistent CTA at the bottom"

The AI compares the structural outline of each page against the design tokens and typography decisions it has on file. It doesn't need to see the full HTML of every page - a lightweight section summary is enough to harmonize layouts, heading patterns, and visual rhythm across your entire site.

Context budget management

The normal generation path budgets context as follows. Focused Router edits keep the complete selected source and return to normal generation if it cannot fit.

Every AI model has a finite context window - the total amount of information it can process at once. VoxelSite manages this as a structured budget.

When building the context for a request, the engine categorizes information into three priority tiers:

• Essential - always included: site information, design tokens, Site Memory, Design Intelligence, site structure, and the current page content
• Important - included if space allows: form schemas, data files, cross-file dependencies, active actions
• Optional - included last: the full stylesheet, available icon list

If the combined context exceeds the model's budget, the engine progressively trims from the bottom up - optional sections are dropped first, then important sections, keeping essential information intact. For focused actions like section edits and inline code edits, the budget is capped even tighter - single-file operations don't need the full image library or compiled CSS, so the engine deliberately restricts context to keep generation fast and precise.

You never need to manage this yourself. The engine logs which sections were included and which were trimmed, so you can check _studio/logs/ if you're curious about context composition for a specific request. See How Prompting Works for a deeper look at action routing and budget management.

Data dependency tracking

When you ask the AI to edit a data file - rename a service in services.json, update a menu item, change a FAQ question - VoxelSite tells the AI which other files depend on that data:

• Forms - a dropdown field might pull its options from services.json via options_from
• Pages - a page might json_decode the data file and render its contents
• AEO files - llms.txt, mcp.php, and schema.php propagate data to public discovery endpoints

This prevents the silent breakage that occurs when one file is updated but its dependents are not - dropdown options going blank, pages rendering stale content, or structured data falling out of sync with the live site.

AI providers

VoxelSite supports multiple AI providers:

• Anthropic - recommended
• OpenAI
• Google
• DeepSeek
• Any provider with an OpenAI-compatible API

You select your provider and model in Settings. Anthropic is recommended for the best results. You can switch providers at any time.

Related

• How Prompting Works - What happens between pressing Enter and seeing your website
• Chat - The AI conversation interface
• Website References - Design from any public URL
• Design System - How colors, typography, and tokens work
• Visual Editor - Click-and-edit refinements