---
title: "Coding Agency website: gebouwd om gevonden en begrepen te worden."
description: "Coding Agency website: Laravel 13, Tailwind v4, MCP server, geo-proof SEO en WCAG AAA toegankelijkheid — gebouwd om gevonden en begrepen te worden door mens én AI."
url: https://coding.agency/cases/coding-agency
source: Coding Agency (https://coding.agency)
language: nl
---

[ Alle projecten ](https://coding.agency/cases) Website MCP Server AI-ready RAG Chat WCAG AAA 

#  Coding Agency. 

AI-ready website — Meppel

 Onze eigen website is meer dan een visitekaartje. Een volledig AI-ready platform met MCP server, 190+ kennisbankartikelen, geautomatiseerde SEO, WCAG AAA toegankelijkheid en een light/dark kleurensysteem. Gebouwd als bewijs van wat we kunnen.

 [ Bekijk coding.agency ](https://coding.agency) 

 ![Coding Agency logo](https://d81nvrp7clvto.cloudfront.net/b1810ff2-cfdb-4e5c-a4bb-dea00b93ed94/svg/logo-white_animated.svg) ![Coding Agency logo](https://d81nvrp7clvto.cloudfront.net/b1810ff2-cfdb-4e5c-a4bb-dea00b93ed94/svg/logo-dark_animated.svg) 

   190+### Kennisbankartikelen

Diepgaande artikelen over Laravel, AI, API-koppelingen, SaaS, security en meer.

 MCP### AI Server

Model Context Protocol server zodat AI-agents direct met onze tools en kennis kunnen werken.

 AAA### WCAG Toegankelijkheid

Volledig toegankelijk voor screenreaders, toetsenbordnavigatie en verminderd contrast.

 100### Lighthouse Score

Perfecte scores op Performance, Accessibility, Best Practices en SEO.

  ## De website

Geen standaard brochure. Een volledig platform met kennisbank, MCP server en geautomatiseerde SEO.

 ![Coding Agency website homepage](https://d81nvrp7clvto.cloudfront.net/b1810ff2-cfdb-4e5c-a4bb-dea00b93ed94/images/cases/codingagency/dashboard.webp) 

  ## Waarom deze website?

 De meeste agency-websites zijn een statische brochure. Mooi, maar verder nutteloos. Wij wilden iets anders: een website die niet alleen laat zien wat we doen, maar het ook daadwerkelijk bewijst. Elke technische keuze, elk detail, elke optimalisatie is een demonstratie van onze werkwijze.

 Daarom is deze site gebouwd met dezelfde stack, dezelfde kwaliteitseisen en dezelfde architectuur als onze klantprojecten. Laravel 13, Tailwind CSS v4, serverless op AWS via Vapor, met een volledig geautomatiseerde CI/CD pipeline. Geen shortcuts.

 Het resultaat: een platform dat klaar is voor de toekomst. AI-agents kunnen via MCP rechtstreeks met onze kennisbank en tools communiceren. Zoekmachines krijgen gestructureerde data via JSON-LD en Markdown endpoints. En elke bezoeker, ongeacht beperking, kan de site volledig gebruiken.

## Gebouwd voor morgen

 AI verandert hoe mensen informatie vinden. Google is niet meer het enige kanaal. AI-agents van Claude, ChatGPT en Gemini doorzoeken websites op een fundamenteel andere manier. Daar moet je klaar voor zijn.

 Onze MCP server stelt AI-agents in staat om onze kennisbank te doorzoeken, een prijsindicatie te berekenen en direct contact op te nemen. Elke pagina is ook beschikbaar als Markdown; ideaal voor LLM-consumptie. Dat is geen experiment, dat is de nieuwe standaard.

 Tegelijkertijd vergeten we de basis niet. WCAG AAA toegankelijkheid, light en dark mode die het systeemthema respecteert, geo-optimalisatie voor lokale vindbaarheid, en security headers die A+ scoren. De fundamenten moeten solide zijn voordat je bouwt aan de toekomst.

  ## MCP Server — AI-ready

 De Coding Agency website draait een volwaardige Model Context Protocol (MCP) server. AI-agents zoals Claude, ChatGPT en andere LLM-tools kunnen hiermee rechtstreeks communiceren, zonder de website te hoeven scrapen.

  Kennisbank zoeken190+ artikelen doorzoekbaar op onderwerp, tag of trefwoord. Van Laravel en API-koppelingen tot AI-security en hosting.

  Prijsindicatie berekenenDirecte kostenschatting op basis van projecttype, complexiteit, koppelingen en extras. Inclusief doorlooptijd en hostingkosten.

  Contact opnemenAI-agents kunnen namens de gebruiker een contactverzoek indienen, compleet met projectdetails en budgetindicatie.

  Expertises resourceGestructureerde JSON-data van alle 9 expertisegebieden, inclusief technologieën, use cases en doelbranches.

// MCP Server configuratie

\#[Name('Coding Agency')]

\#[Version('1.0.0')]

Tools:

• Prijsindicatie berekenen

• Kennisbank doorzoeken

• Contact opnemen

Resources:

• Expertises (9 gebieden)

 [Meer over MCP servers](https://coding.agency/kennisbank/mcp-server-bouwen-website)

  ## Cody — RAG AI-assistent

 De chat-widget rechtsonder in de hoek is geen generieke chatbot. Cody combineert een beslisboom voor snelle navigatie met een volwaardige RAG-pipeline op basis van OpenAI. Bezoekers die zelf willen typen, krijgen een direct antwoord op basis van de volledige site-inhoud.

 RAG staat voor Retrieval-Augmented Generation: bij elke vraag worden de meest relevante pagina's opgehaald uit de kennisbank (snel keyword scoring over titel, tags, beschrijving en slug), meegestuurd als context in de system prompt, en dan streamt OpenAI het antwoord terug als SSE-stroom. Zo geeft Cody altijd een antwoord dat aansluit op de werkelijke inhoud van de site — niet op wat het model al wist.

 CodyKnowledgeBase Service die alle kennisbankartikelen en expertisepagina's indexeert. Zoekt op trefwoord met een scoringsalgoritme (titel +10, tag +8, beschrijving +3). 

 CodyController Zoekt de top-5 meest relevante pagina's op basis van de vraag, bouwt een context-blok voor het system prompt, en retourneert een StreamableAgentResponse van laravel/ai. 

 SSE Streaming De frontend leest text\_delta events via een ReadableStream. Cody typt letter voor letter, met een bounce-animatie zolang hij nog denkt. 

 Suggestie chips Bezoekers kunnen direct typen of een snelstart-chip kiezen. Elke doorverwijzing krijgt UTM-parameters zodat het gedrag meetbaar is. 

// RAG pipeline (vereenvoudigd)

$hits = $knowledgeBase->search($query, limit: 5);

$context = $this->formatContext($hits);

// Stuur context mee als system prompt

return agent($systemPrompt)

->stream($query,

provider: 'openai',

model: 'gpt-4o-mini',

);

// Frontend: SSE stream lezen

if (event.type === 'text\_delta') {

bubble.textContent += event.delta;

}

 [Meer over RAG voor bedrijfsdata](https://coding.agency/kennisbank/rag-bedrijfsdata-ai)

  ## Light & Dark Mode

 Niet zomaar een donker en licht thema. Een volledig doordacht kleurensysteem met CSS custom properties dat elke oppervlakte, elk contrast en elk interactie-element aanpast. Van warm olive en cream in light mode tot diepe donkere tinten in dark mode.

  Respecteert de systeemvoorkeur van de bezoeker (prefers-color-scheme) 

  Toggle in de navigatie voor handmatige overschrijving 

  Persistente voorkeur via localStorage, geen flicker bij laden 

  Alle kleuren voldoen aan WCAG AAA contrastverhouding (7:1) 

  Animated SVG’s passen mee in beide thema’s 

## WCAG AAA Toegankelijk

 Toegankelijkheid is geen checkbox, maar een ontwerpprincipe. Elke pagina is gebouwd met semantische HTML, ARIA-attributen en toetsenbordnavigatie. Getest met screenreaders en gevalideerd tegen de WCAG 2.1 AAA-richtlijnen.

  Skip-to-content link voor toetsenbordgebruikers 

  Semantische heading hiërarchie (h1 → h2 → h3) 

  Alle afbeeldingen met alt-teksten, decoratieve met aria-hidden 

  Focusindicatoren op alle interactieve elementen 

  Reduced motion support voor bezoekers met vestibulaire aandoeningen 

  Formulieren met labels, foutmeldingen en live regions 

  ## SEO & Geo-proof

 {}### Structured Data

JSON-LD schema voor elke paginatype: Organization, WebPage, Service, CreativeWork, BlogPosting en BreadcrumbList. Zoekmachines begrijpen exact wat elke pagina bevat.

 .md### Markdown Endpoints

Elke pagina is ook beschikbaar als .md bestand. Ideaal voor LLM-consumptie, web scrapers en AI-agents die gestructureerde tekst nodig hebben.

 📍### Geo-optimalisatie

Lokale SEO voor Meppel, Drenthe en Noord-Nederland. Schema met areaServed, lokale kennisbankartikelen en geo-specifieke landingspagina’s.

 ⚙️### Technische SEO

Canonical URLs, hreflang, XML sitemap, robots meta, OpenGraph en Twitter Cards. Alles geautomatiseerd vanuit de layout component.

 ⚡### Performance

Font preloading, lazy loading, async decoding, minimale CSS via Tailwind v4. Serverless hosting op AWS Vapor voor sub-100ms response times.

 📚### Content Authority

190+ diepgaande artikelen over softwareontwikkeling. Topical authority opbouwen in niches als Laravel, AI, API-koppelingen en SaaS.

  ## Security Headers

 Beveiliging begint bij de response headers. Elke pagina wordt geserveerd met een volledige set security headers die A+ scoren op securityheaders.com.

 HSTS Strict Transport Security met preload, 1 jaar max-age en includeSubDomains 

 CSP Content Security Policy met strikte whitelisting van scripts, styles en fonts 

 COOP Cross-Origin Opener Policy: same-origin voor isolatie 

 X-Frame-Options SAMEORIGIN tegen clickjacking aanvallen 

 Permissions-Policy Camera, microfoon, geolocatie en betaling geblokkeerd 

 Referrer-Policy strict-origin-when-cross-origin voor privacy 

## Privacy-first Analytics

 Geen Google Analytics, geen cookie banners. De site draait op ClearAnalytics, ons eigen privacy-first analytics platform. Onder 1KB script, gehost in de EU en volledig GDPR-compliant; zonder tracking cookies.

 Tracking cookies Geen 

 Cookie banner nodig Nee 

 Script grootte < 1 KB 

 Hosting EU (Hetzner) 

 GDPR-compliant Ja 

  ## Hoe het gebouwd is

### Laravel 13 + Blade

 [Webapplicaties →](https://coding.agency/expertises/webapplicaties) 

Server-rendered met Blade components en layouts. Geen SPA overhead, wel een razendsnelle first contentful paint. Component-based architectuur met herbruikbare layouts, schema builders en automatische Markdown generatie.

### Tailwind CSS v4

 [Websites →](https://coding.agency/expertises/website-ontwikkeling) 

De nieuwste versie met @theme directive en CSS custom properties voor het light/dark kleurensysteem. Minimale CSS bundle door purging, maximale design flexibiliteit door utility-first aanpak.

### MCP Server

 [AI →](https://coding.agency/expertises/artificial-intelligence) 

Eigen Model Context Protocol server met drie tools en een resource. AI-agents kunnen onze kennisbank doorzoeken, een prijsindicatie berekenen en direct contact opnemen. Gestructureerd en veilig.

### AWS Serverless (Vapor)

 [SaaS →](https://coding.agency/expertises/saas-development) 

Gehost op AWS Lambda via Laravel Vapor. Auto-scaling, zero-downtime deployments, CloudFront CDN en EU-regio. Geen servers om te beheren, wel enterprise-grade performance.

### Cody RAG Chat

 [AI →](https://coding.agency/expertises/artificial-intelligence) 

Decision-tree navigatie gecombineerd met een RAG-pipeline op OpenAI (gpt-4o-mini). CodyKnowledgeBase scoort en rangschikt pagina's op relevantie. CodyController bouwt de context en streamt het antwoord terug via SSE. UTM-tracking op alle doorverwijzingen.

  ## 190+ Kennisbankartikelen

 De kennisbank is het kloppend hart van de website. Meer dan 190 diepgaande artikelen over softwareontwikkeling, georganiseerd in categorieën als architectuur, koppelingen, betalingen, juridisch, strategie en hosting.

  Elk artikel met JSON-LD BlogPosting schema 

  Doorzoekbaar via MCP server voor AI-agents 

  Markdown endpoint voor LLM-consumptie 

  Interne linking naar expertises en cases 

  Geo-specifieke artikelen voor lokale SEO 

  Scoring-algoritme voor relevante zoekresultaten 

 [ Bekijk de kennisbank ](https://coding.agency/kennisbank) 

 25+#### Architectuur

Multi-tenancy, CI/CD, Feature flags

 30+#### Koppelingen

Exact Online, Mollie, PostNL, RDW

 15+#### AI & Machine Learning

RAG, Agents, Document analyse

 10+#### Security & Privacy

HSTS, Pentests, 2FA, ISO-proof

 10+#### E-commerce

Webshops, BTW, B2B portalen

 20+#### Strategie

Build vs buy, Kosten, Werkwijze

  ## Alle features

Alles wat deze website onderscheidt van een standaard agency-site.

 MCP Server voor AI-agents 

 Light & dark mode 

 WCAG AAA toegankelijkheid 

 JSON-LD structured data 

 Markdown endpoints (.md) 

 XML Sitemap 

 OpenGraph & Twitter Cards 

 Geo-optimalisatie 

 Security headers (A+) 

 HSTS met preload 

 Content Security Policy 

 Privacy-first analytics 

 Skip-to-content navigatie 

 Reduced motion support 

 ARIA labels & landmarks 

 Toetsenbordnavigatie 

 Laravel 13 + Blade 

 Tailwind CSS v4 

 AWS Serverless (Vapor) 

 Zero-downtime deployments 

 Font preloading 

 Lazy loading & async decoding 

 Responsive op elk device 

 Animated SVG illustraties 

 Prijsindicatie calculator 

 Contactformulier met validatie 

 Canonical URLs 

 Schema per paginatype 

 190+ kennisbankartikelen 

 Bug-meldformulier 

 Auteurspagina’s 

 CI/CD Pipeline 

 Cody AI chat-widget 

 RAG kennisbank koppeling 

 SSE streaming antwoorden 

 Meer cases##  Meer cases 

Andere projecten waarin software, website, shop of app niet als los kanaal is gebouwd, maar als onderdeel van een werkend proces.

 [ ![Cody logo](https://d81nvrp7clvto.cloudfront.net/b1810ff2-cfdb-4e5c-a4bb-dea00b93ed94/img/clients/cody.svg)

 SaaS 

### Cody

AI-gestuurd support- en projectmanagementplatform met e-mailintegratie en klantportaal.

 Bekijk case  

 ](https://coding.agency/cases/cody) [ ![Eventfull logo](https://d81nvrp7clvto.cloudfront.net/b1810ff2-cfdb-4e5c-a4bb-dea00b93ed94/img/clients/eventfull.webp)

 Platform + app 

### Eventfull

Eventplatform waarin inspiratie, klantportaal en iOS/Android-app als één proces werken.

 Bekijk case  

 ](https://coding.agency/cases/eventfull) [ ![RiskExplorer logo](https://d81nvrp7clvto.cloudfront.net/b1810ff2-cfdb-4e5c-a4bb-dea00b93ed94/img/clients/risk-explorer.svg)

 SaaS 

### RiskExplorer

Multi-tenant risicomanagement voor assurantieadviseurs.

 Bekijk case  

 ](https://coding.agency/cases/riskexplorer) 

 [ Bekijk alle cases ](https://coding.agency/cases) 

##  Wil jij dit ook? 

Een website die niet alleen mooi is, maar ook technisch klaar voor de toekomst? Laten we het erover hebben.

 [ Start het gesprek ](https://coding.agency/contact)

---
*Bron: [Coding Agency](https://coding.agency/cases/coding-agency)*