FairCTO
NL·EN·DE
← Alle cases

FairCTO — faircto.com

A trilingual marketing site with a live, embedded AI agent — where the site itself is the proof.

2026·Bekijk live →
FairCTO — faircto.com
Next.js 16TypeScriptTailwind v4VercelClaude APIi18nSEO

De uitdaging

To win AI and CTO work, I needed a site that doesn't just claim I build production AI — it had to demonstrate it. It also had to reach beyond the Dutch market (NL / EN / DE) and convert visitors into a booked call, all on a stack fast and cheap enough for a solo founder to run and maintain.

Wat ik bouwde

A statically-generated, trilingual marketing site with a live chat agent powered by Claude, per-locale SEO and social-share images, and a booking flow — deployed on Vercel with a preview URL for every commit.

Stack & waarom

Next.js 16 (App Router)
Static generation + SSR for speed and SEO, and file-based [locale] routing for clean internationalisation without pulling in a heavy i18n library.
TypeScript + typed dictionaries
All copy lives in per-language dictionaries typed against a single source of truth, so the three languages physically can't drift out of structure — a missing key is a build error.
Anthropic Claude (Haiku 4.5)
Cheap and fast enough for a public demo bot. A locale-aware system prompt makes it answer in the visitor's language, with a graceful fallback reply when no API key is set — so the demo never breaks.
Tailwind CSS v4
A tokenised design system: a consistent, on-brand look with almost no custom CSS — fast to build and even faster to change.
Vercel (EU region)
Zero-config edge deploys, a preview URL per commit to test before production, and EU data residency for GDPR.
next/og (Satori)
Generates a per-locale OpenGraph / Twitter share image at build time — no external design tool in the loop.
Custom proxy (Next 16 middleware)
Reads the browser's Accept-Language header and routes the bare / to the right locale automatically.

Hoe het werkt

  • Every page and component is fed by a getDictionary(locale) call; adding a language is a single file, and the type system flags anything left untranslated.
  • The demo agent posts to an /api/chat route handler that calls Claude with a locale-aware system prompt and sanitises input; without a key it returns a canned reply, so the agent is always live.
  • SEO is built in: per-locale canonical URLs + hreflang alternates, JSON-LD structured data (ProfessionalService + FAQ), and a sitemap covering all three languages.
  • Hardest part: getting i18n right on Next 16, where middleware was renamed to 'proxy', the root layout moves under [locale], and metadata plus OG images are generated per locale — solved by reading the framework's own docs and building a typed-dictionary system that keeps the languages in sync.

Resultaat

  • ✓A live AI agent that is the pitch — visitors try the exact assistant I build for clients, in their own language.
  • ✓Instrumented (analytics), discoverable (Search Console + hreflang across NL/EN/DE), and converting straight into a Cal.com booking.
  • ✓A new language or copy change ships in minutes, and every deploy is previewed before it reaches production.

Mijn rol

Sole engineer, designer and operator — from strategy to production.

Klaar om AI écht te laten werken?