How we built valgard.com — the stack, the AI, and what it actually takes

This site was built to prove a point: you can ship a fast, modern, AI-powered website without a big team or a big budget. Here's exactly how it's put together, so you can copy the parts that fit your business.

The stack

Nothing exotic. Every piece here is well-documented and mostly free to start.

• Next.js (React) — the framework for the pages and the small API routes.
• Tailwind CSS — the styling, so the whole site shares one visual system.
• Vercel — hosting. You connect a GitHub repo and every push deploys automatically.
• GitHub — the code lives here; it's also the deploy trigger.
• OpenRouter — a single API that lets us call cheap AI models on demand.

The whole front end is static where it can be, which makes it fast and cheap. The only server-side pieces are a few small API routes for the AI features and the contact form.

The live demos

The CRM, inventory, and project demos aren't videos or screenshots — they're real, working apps. The trick is that each visitor gets their own private copy of the sample data, stored in their browser. You can add, edit, and delete freely; it resets on its own, and it never touches anyone else's session. That keeps them safe to expose publicly with zero backend to abuse.

And they go deep — not toy CRUD. Click any record and it opens a full workspace. In the CRM (bid pipeline), a job has its own email thread (the ITB, RFIs, addenda, the proposal, the award), an activity timeline, notes, linked plans and planroom links, follow-up tasks, and contacts you can call or email — you can even draft the follow-up with AI and log it back to the thread. Inventory items carry cost-history charts, side-by-side vendor pricing, a real purchase-order lifecycle (draft → ordered → received, which adds stock), a movement ledger, and which jobs are consuming them. Project jobs have a tap-to-advance schedule, punch lists, RFIs, change orders that roll up their value, and a daily field-log feed. It's what the software actually feels like to run a company on — not a table.

The Accounting demo goes a step further: it actually simulates the QuickBooks Online API, with real server-side API calls that persist each visitor's session in a fast datastore (and reset on a timer). Same private-per-visitor idea, but it shows how a genuine integration behaves — not just a table in your browser. It runs like real books, too: invoices, bills, and expenses roll up into a live Profit & Loss statement, a balance sheet that always balances, a chart of accounts, and a general-ledger transaction register. You can record partial payments against an invoice and watch A/R, cash, and net income all move together — the way connected accounting actually works.

The AI features

There are a few. An assistant trained on our podcast (the Powerhouse Fence Show) answers questions on demand. Inside each live demo, an 'AI insight' panel summarizes a record, recommends the next action, flags risks, and drafts the follow-up email, purchase order, or daily report. And a rewriter, floating on every page, restyles the whole page — or any blog post — live: pick a vibe (simpler, witty, sarcastic, cowboy, pirate) or type your own instruction, and it rewrites in place, just for you.

All of them run on a small, fast, cheap model — not an expensive frontier model — because the job doesn't need one. A cheap model does a great job at summarizing a record, drafting a note, or restyling a sentence.

Every AI call is rate-limited and capped in length, so a public page can't run up a surprise bill. The rule of thumb: use the cheapest model that clears the bar for the task, and put a hard ceiling on tokens and requests.

What it costs

Hosting starts free on Vercel. The AI calls run fractions of a cent each on a small model. For a marketing site with interactive AI, you can operate for the price of a couple of coffees a month until real traffic shows up — and even then it scales gently.

How we made it easy to find

A great site nobody finds is worthless, so it's built to be discovered — by search engines and by AI. Clean titles and descriptions, a sitemap, an RSS feed, and structured data (so Google can show rich results) cover classic SEO. For the AI side, the site openly welcomes AI crawlers and ships an llms.txt plus clear, factual, quotable copy — the kind of thing ChatGPT, Claude, and Perplexity cite when someone asks a question we can answer. Privacy-friendly analytics runs in the background so we can see what's actually working.

The takeaway

The hard part of an 'AI website' isn't the AI. It's making choices that keep it fast, cheap, findable, and safe: static pages, per-visitor demo data, a cheap model with tight limits, structured data for search and AI, and a host that deploys itself. Get those right and the AI is the easy 10%.