Technologie
AI-development en Umbraco: slimme ontwikkeling binnen je CMS
Vincent is .NET/Azure developer en werkt veel met CMS’en zoals Umbraco en Sitecore. In dit artikel neemt hij je mee hoe je een AI-ontwikkeltool kunt verbinden met Umbraco en hoe je daar in de praktijk productiever van wordt. Hij houdt het concreet en begrijpelijk, ook als je geen developer bent. In dit artikel gebruikt hij Claude als AI-tool.
Weet je niet wat Umbraco is? Het is een flexibel opensource CMS (Content Management System) gebaseerd op Microsoft .NET. Het is robuust genoeg voor enterprise omgevingen en tegelijk eenvoudig genoeg om snel en efficiënt mee te werken.
De connectie leggen tussen AI en Umbraco
We beginnen met de kernvraag: hoe krijg je toegang tot de Umbraco-context binnen jouw Claude AI assistent? Een gestandaardiseerde manier om te verbinden is via het Model Context Protocol (MCP). Umbraco heeft een paar maanden geleden een eigen MCP-server gelanceerd. Inmiddels zijn er meerdere updates verschenen en is er officiële documentatie beschikbaar.
De AI-tool naar keuze, in dit geval Claude, verbindt met deze server. Die server legt vervolgens de koppeling met het platform, in dit geval Umbraco. Je kunt ook andere AI-tools gebruiken, zoals Codex of Github Copilot. Dat klinkt misschien ingewikkeld, maar in de praktijk valt het mee. Je hoeft weinig te configureren en de MCP-server draait gewoon op de achtergrond.
Het instellen van je ontwikkelomgeving is eenvoudig. Op het moment van schrijven is de MCP-server beschikbaar voor Umbraco 16 en inmiddels ook voor Umbraco 17. Het inschakelen van de MCP-verbinding bestaat uit twee stappen. Je voegt een API-gebruiker toe in Umbraco, via het reguliere tabblad voor gebruikersbeheer. Daarna voer je één opdracht uit om de MCP-server toe te voegen aan je AI-tool.
Het is geen goed idee om direct verbinding te maken met een productieomgeving. Gebruik hiervoor altijd je ontwikkel of staging omgeving. De volledige documentatie voor instellen van je AI-assistent is hier te vinden.
Tijdens het configureren is het belangrijk rekening te houden met het volgende:
- De MCP-setup heeft alleen een Umbraco hostnaam en een ClientID en Secret nodig. De ClientID is de volledige ClientID van de Umbraco API gebruiker, bijvoorbeeld “umbraco-back-office xxx.” De rechten die je aan deze API-gebruiker toekent, zijn ook de rechten die de AI-tool binnen Umbraco gebruikt.
- Bij het toevoegen van de MCP-server aan je AI-tool kies je expliciet welke tools, oftewel functionaliteit endpoints, beschikbaar zijn. Een overzicht van alle beschikbare tools en functionaliteit vind je in de Umbraco documentatie.
Wil je ook logdata en gebruikers kunnen bekijken? Dan kun je dit eenmalige MCP-setup command gebruiken:
claude mcp add umbraco-mcp --env UMBRACO_CLIENT_ID="your-id" --env UMBRACO_CLIENT_SECRET="your-secret" --env UMBRACO_BASE_URL="https://your-domain.com" --env NODE_TLS_REJECT_UNAUTHORIZED="0" --env UMBRACO_INCLUDE_TOOL_COLLECTIONS="document,dictionary,media,document-type,data-type,log-viewer,user,user-data" -- npx @umbraco-cms/mcp-dev@16
Projectrichtlijnen en conventies instellen
Als de connectie staat, kun je de kracht ervan benutten. Een logische eerste stap is het maken van een instructiebestand voor projectrichtlijnen en conventies. Een voorbeeld daarvan vind je hier.
Wat kun je met deze setup?
Als alles werkt, wil je natuurlijk weten wat je ermee kunt doen. Een aantal praktische voorbeelden ter inspiratie:
- Data importeren vanuit lokale CSV of JSON-bestanden in Umbraco via prompts. Handig bij migraties of het aanmaken van bulkcontent.
- Automatisch vertalen van content, zoals dictionary labels.
- Realistische testcontent maken voor componenten en pagina’s.
- Documenttypen, datatemplates, aanmaken vanuit JSON-bestanden of andere structuren in plaats van via de Umbraco Back Office interface.
- Kwaliteitscontroles uitvoeren op je oplossing.
- Logbestanden direct vanaf de command line opvragen en monitoren.
- Media items aanmaken of wijzigen.
- Umbraco functionaliteiten activeren vanaf de command line, zoals het herbouwen van gegenereerde codemodellen of zoekindexen.
- Snellere onboarding bij bestaande projecten door vragen te stellen over de setup en structuur.
- En nog een stap verder: volledige componenten en pagina’s maken, of bestaande frontendcomponenten implementeren, door reguliere Claude code te combineren met documenttypen en Umbraco templates volgens de richtlijnen van je project.
Voorbeeld: een nieuw documenttype aanmaken
Als concreet voorbeeld voegen we een blogfunctionaliteit toe aan een website. Ik vroeg om een nieuw documenttype met de benodigde velden, zoals een publicatiedatum en een afbeelding, en om een view bestand op de schijf om deze velden op de website te tonen.
Claude start met het zoeken naar de juiste datatypen en velden en vraagt eerst om toestemming. Daarna zoekt hij automatisch een passend pictogram voor in de content editor. Vervolgens wordt de ‘create’ actie uitgevoerd. Het resultaat is een nieuw documenttype binnen Umbraco.
Kort samengevat
Zoals je ziet biedt het integreren van een op developers gerichte AI-tool in Umbraco veel mogelijkheden. Taken waarvoor je normaal complexe scripts, maatwerkcode of handmatig werk nodig hebt, kun je nu eenvoudig laten uitvoeren door je AI-assistent.
Blijf daarbij wel bewust van wat je deelt. Als je project gevoelige content bevat, kan een deel daarvan naar de AI-service worden verzonden. En zoals altijd geldt: zorg voor goede database back-ups. Deze tools zijn krachtig en zonder voorbereiding kan er snel iets misgaan.
Ben je geïnteresseerd in meer informatie over het volledige Umbraco MCP project, dan kun je de code hier vinden. Dit is niet nodig voor installatie of het draaien van de MCP.
Dit artikel is gebaseerd op een oorspronkelijk Engelstalig artikel dat Vincent eerder op zijn LinkedInpagina publiceerde. De inhoud is vertaald en bewerkt voor deze publicatie. Aan deze vertaling kunnen geen rechten worden ontleend. Tekst: Vincent van Middendorp. Vertaling: Jesper Oskam
