Vier op een Rij

Over deze applicatie

Deze applicatie is volledig gebouwd door een autonome AI-agent die zelfstandig draait zonder menselijke tussenkomst. De agent is gebaseerd op het "Effective Harnesses for Long-Running Agents" patroon van Anthropic, oorspronkelijk ontwikkeld voor het bouwen van React-applicaties.

Onze implementatie is aangepast voor het bouwen van Laravel-applicaties met PHP 8.3, MariaDB en Playwright voor browser-automatisering.

Two-Agent Architecture

De agent gebruikt een two-agent pattern om grote projecten te kunnen bouwen die niet in één context window passen:

  • Initializer Agent - Draait één keer aan het begin van het project. Leest de app-specificatie, creëert het Laravel-project, genereert een feature_list.json met alle te bouwen features, en zet de basis op (database, routes, layout).
  • Coding Agent - Draait in opeenvolgende sessies. Implementeert één feature per keer, test met Playwright browser-automatisering, markeert features als "passing" wanneer geverifieerd, en commit de voortgang.

Door incrementeel te werken en voortgang bij te houden in bestanden zoals claude-progress.txt en feature_list.json, kan de agent projecten bouwen die veel groter zijn dan één context window.

Claude Code SDK

De agent is gebouwd met de Claude Code SDK, die context management biedt via compaction capabilities. Dit stelt de agent in staat om over willekeurig lange tijdsperiodes te werken zonder dat de beschikbare context opraakt.

De SDK biedt ook MCP (Model Context Protocol) integratie, waardoor de agent tools kan gebruiken zoals Playwright voor browser-automatisering. Hiermee test de agent features zoals een eindgebruiker zou doen, in plaats van alleen te vertrouwen op unit tests.

Deployment

Deze applicatie wordt automatisch gedeployd met CapRover, een open-source Platform-as-a-Service (PaaS). CapRover maakt het eenvoudig om applicaties te deployen en beheren via een web-interface of CLI.

Over het spel

Vier op een Rij (ook bekend als Connect Four) is een strategisch bordspel voor twee spelers. Het spel wordt gespeeld op een verticaal bord van 7 kolommen en 6 rijen.

Spelregels:

  • Spelers laten om de beurt een schijf in een kolom vallen
  • De schijf valt naar de laagste beschikbare positie in die kolom
  • De eerste speler die vier schijven op een rij krijgt (horizontaal, verticaal of diagonaal) wint
  • Als het bord vol is zonder winnaar, eindigt het spel in gelijkspel

Moeilijkheidsgraden:

  • EASY - De AI speelt 66% van de tijd optimaal
  • MEDIUM - De AI speelt 90% van de tijd optimaal
  • HARD - De AI speelt altijd optimaal met minimax-algoritme en alpha-beta pruning

Technologie

Applicatie

Backend: Laravel 12.x (PHP 8.3)
Database: MariaDB 10.11
Frontend: Vanilla JavaScript, CSS3
Build tool: Vite

Agentic Build Tools

Agent SDK: Claude Code SDK (Python)
Browser Testing: Playwright MCP
Container: DevContainer (Docker)
Deployment: CapRover

AI Models

Initializer Agent: Claude Sonnet 4
Coding Agent: Claude Sonnet 4

Bronnen