Alle projecten
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.

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

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 zoeken

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

Prijsindicatie berekenen

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

Contact opnemen

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

Expertises resource

Gestructureerde 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

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

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 →

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 →

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 →

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 →

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 →

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
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

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