AVCodex Sites

AVCodex Sites lets you generate a landing page for your agent directly inside the Builder. Describe the page, and The Alchemist builds a multi-page site with navigation, responsive layout, and a built-in link to the chat. Sites publish to {slug}.sites.app.avcodex.com or a custom domain you control.

Each site is a self-contained, server-rendered page that includes:

• AI-generated HTML and CSS tailored to your agent's purpose.
• Multi-page support with automatic navigation (Home, About, Pricing, etc.).
• Same-origin chat: the agent lives on the same domain as the site, which avoids cross-origin cookie problems.
• SEO-ready markup with proper meta tags.
• Responsive design for mobile, tablet, and desktop.
• Version history so you can roll back at any time.
• Stripe Connect integration for pricing pages with real checkout buttons.

1. Open the Site Tab

Open your agent in the Builder and click the Site tab. You'll see an empty state prompting you to create your first site.

2. Describe Your Site

Open The Alchemist panel and describe the landing page. Be specific about purpose, audience, and content:

• "Create a landing page for a Crestron SIMPL programming help agent. Sections for what it covers, how it works, and a CTA to start chatting."
• "Build a marketing site for my managed-services AV firm's QR-code room support service. Include testimonials from corporate IT directors and three pricing tiers."
• "One-page site with a hero section and a 'Ask the design engineer' CTA. Audience: integrators responding to RFPs for higher-ed classroom refreshes."
• "Internal portal page for our AV programmers. Links to our SIMPL module agent, our Q-SYS Lua agent, and our spec-sheet lookup agent."

3. Watch the Progressive Build

The Alchemist generates the site in phases. As each phase completes, the live preview updates with a smooth transition so you can see the site take shape.

4. Iterate

Ask The Alchemist for changes:

• "Add a pricing section with three tiers."
• "Change the hero background to a gradient."
• "Make the testimonials section more prominent."
• "Update the copy to target AV directors at universities."

Each refinement saves a new draft automatically.

5. Publish

Click Publish Site in the toolbar. Your site goes live at your vanity subdomain.

Sites can have multiple pages, each with its own content and navigation. The home page (/) is always present. Additional pages live in tabs above the preview.

Adding Pages#

Click the + button in the page tabs bar, enter a title (e.g. "Services" or "Pricing"), and the slug auto-generates from the title. Then ask The Alchemist to generate content for the new page.

Removing Pages#

Click the x button on any page tab (except the home page) to remove it.

Navigation#

When your site has multiple pages, a navigation bar is automatically included with links to each page. The Alchemist generates the nav items from your page structure.

When you publish, the site is served at your agent's vanity subdomain:

https://{your-slug}.sites.app.avcodex.com

The toolbar shows a LIVE badge and the full URL with copy and edit buttons when published.

Note: Your agent's vanity subdomain is shared between your site and the chat. The site is served at the root URL, while the chat interface is reached via the CTAs on your site or direct chat links.

Connect your own domain to serve the site at a branded URL. Click the Domain button in the toolbar to open the custom domain drawer.

Requirements:

1. A Builder plan or higher.
2. A CNAME DNS record pointing to fallback.app.avcodex.com.
3. SSL provisions automatically via Cloudflare.

See the Custom Domains guide for detailed DNS configuration instructions.

If your site includes a pricing page with checkout buttons, those buttons create real Stripe Checkout sessions for your users. This requires Stripe Connect to be configured.

Warning: If your site has a pricing page but Stripe Connect is not set up, a warning banner appears in the Builder. Checkout buttons will not work until you connect a Stripe account in your billing settings.

The checkout flow:

1. The user clicks a pricing button on your published site.
2. They are redirected to Stripe Checkout (an anonymous user record is created if needed).
3. After payment, Stripe redirects them back to your site.
4. Credits are fulfilled automatically via webhook.

See the Selling Access guide for details on configuring credit packages and pricing tiers.

Every draft save and publish creates a version. Click History in the toolbar to open the version history drawer.

From version history you can:

• View all previous versions with timestamps.
• Restore a previous version, which makes it the current live version.
• Compare changes between versions.

This is your safety net when iterating. Roll back to a version that was working well.

Under the hood, site content is stored as a structured JSON object with:

• Pages array: each page has a slug, title, and html body.
• Navigation config: automatically generated link items, with optional CTA styling.
• CSS: site-specific styles separate from your agent's custom CSS.
• Base styles: a shared CSS foundation for consistent typography and responsive behavior.

The Alchemist generates semantic HTML with proper heading hierarchy, accessible markup, and responsive layouts.

1. Start with the agent's purpose: "This agent helps Crestron programmers troubleshoot SIMPL# code" gives The Alchemist strong content direction.
2. Name your audience: "Target AV directors at corporate firms" reads very differently from "target field techs and integrators." Be specific.
3. Ask for specific sections: "Include a features grid, a comparison table against manual support, and an FAQ for managed-services buyers" gets more structured results than "make a landing page."
4. Iterate on copy separately: After the initial generation, ask The Alchemist to refine specific text without changing the layout.
5. Add pages incrementally: Start with the home page, publish it, then add Pricing and About pages one at a time.

*AVCodex · Your AV expertise. Amplified by AI.*