The AI Engine.
How VoxelSite turns a conversation into a working website. No templates. No drag-and-drop. Just describe what you want.
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.
What gets generated:
- Complete HTML pages with semantic markup and Tailwind CSS utility classes
- A design system —
style.csswith custom properties (colors, typography, spacing) unique to your site - Shared partials —
_partials/header.php,nav.php,footer.phpfor 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
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.
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
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: the current page content, site structure, conversation history
- Important — included if space allows: form schemas, data files, cross-file dependencies, active actions
- Optional — included last: CSS design tokens, 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.jsonviaoptions_from - Pages — a page might
json_decodethe data file and render its contents - AEO files —
llms.txt,mcp.php, andschema.phppropagate 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
- 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
Ready to build?
One-time purchase. Self-hosted. Own every file forever.