Schulung · Model Context Protocol (MCP) · Webentwicklung

Model Context Protocol (MCP) für Webentwickler:innen

MCP-Server entwickeln und sicher anbinden: Tools, Resources und Prompts für Claude Code, Cursor, Copilot und eigene KI-Agenten.

Dauer
2 Tage (14 Std.)
Format
Online oder vor Ort
Sprache
Deutsch oder Englisch
Teilnehmende
offene Termine oder exklusiv für Ihr Team
Abschluss
Teilnahmebescheinigung

Überblick

Das Training „Model Context Protocol (MCP) für Webentwickler:innen“ richtet sich an Rollen wie Webentwickler:innen in Agenturen und Inhouse-Teams, Freelancer:innen, die Websites und Webanwendungen umsetzen und Entwickler:innen von CMS-Projekten mit WordPress, TYPO3 oder Headless-CMS und zeigt Schritt für Schritt, wie Model Context Protocol (MCP) im Bereich Webentwicklung produktiv, sicher und nachvollziehbar eingesetzt wird – von den Grundlagen bis zu fortgeschrittenen Workflows.

Das Model Context Protocol ist ein offener Standard, über den KI-Anwendungen einheitlich auf externe Werkzeuge, Datenquellen und Workflows zugreifen. Statt für jeden Assistenten eigene Integrationen zu bauen, implementieren Sie einen MCP-Server einmal und nutzen ihn in Claude Code, Claude Desktop, Cursor, GitHub Copilot, VS Code und eigenen Agenten. In dieser zweitägigen Schulung lernen Sie die Architektur aus Host, Client und Server, die drei zentralen Bausteine Tools, Resources und Prompts sowie die Transportwege stdio und Streamable HTTP kennen – und setzen sie direkt in eigenem Code um.

Am ersten Tag bauen Sie mit den offiziellen SDKs für TypeScript oder Python einen eigenen MCP-Server, der interne APIs, Datenbanken oder Dateien kontrolliert für KI-Assistenten verfügbar macht, und testen ihn mit dem MCP Inspector. Der zweite Tag widmet sich Remote-Servern, Authentifizierung über OAuth, Sicherheitsrisiken wie Prompt Injection und Tool Poisoning sowie Betrieb, Logging und Governance im Unternehmen. Sie lernen, Tool-Beschreibungen so zu gestalten, dass Modelle sie zuverlässig nutzen, und wissen am Ende, wie Sie MCP-Server sicher in Ihre Entwicklungs- und Agenten-Landschaft integrieren.

Webentwicklung umfasst heute weit mehr als HTML, CSS und etwas JavaScript: Responsive Layouts, Barrierefreiheit, SEO, Performance, Formulare, Content-Management-Systeme, APIs, Hosting und Deployment gehören selbstverständlich dazu. Gerade in kleinen Teams und Agenturen müssen Webentwickler:innen all diese Themen abdecken. KI-Coding-Assistenten und Agenten sind hier ein enormer Hebel: Sie setzen Layouts aus Entwürfen um, schreiben semantisches HTML und modernes CSS mit Grid und Container Queries, prüfen Seiten auf Barrierefreiheit und Core Web Vitals, erstellen CMS-Templates und automatisieren Deployments. Vibe Coding macht zudem schnelle Prototypen möglich, die früher Tage gedauert hätten. Im Kurs lernen Sie, diese Geschwindigkeit mit sauberer Struktur, Wartbarkeit und Qualitätssicherung zu verbinden.

Das Training findet live statt – wahlweise online im virtuellen Klassenraum oder vor Ort in unseren Trainingsräumen in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart und Kaiserslautern. Auf Wunsch kommen wir auch exklusiv für Ihr Team zusammen.

Für wen ist das Training?

  • Webentwickler:innen in Agenturen und Inhouse-Teams
  • Freelancer:innen, die Websites und Webanwendungen umsetzen
  • Entwickler:innen von CMS-Projekten mit WordPress, TYPO3 oder Headless-CMS
  • Quereinsteiger:innen mit Grundkenntnissen in HTML, CSS und JavaScript

Typische Herausforderungen, die wir adressieren

  • Breites Aufgabenspektrum von Layout über SEO bis Hosting in kleinen Teams
  • Steigende Anforderungen an Barrierefreiheit, Performance und Datenschutz
  • Wartung vieler Kundenprojekte mit unterschiedlichen Technologien und Ständen
  • Zeitdruck bei Relaunches, Landingpages und Kampagnenseiten

Das können Sie nach dem Training

  • Sie erklären die MCP-Architektur und wählen für jeden Anwendungsfall zwischen Tools, Resources und Prompts.
  • Sie entwickeln einen eigenen MCP-Server in TypeScript oder Python und testen ihn systematisch.
  • Sie binden MCP-Server in Claude Code, Cursor, Copilot und eigene Agenten ein.
  • Sie betreiben Remote-Server mit Streamable HTTP und OAuth-basierter Autorisierung.
  • Sie setzen Websites und Webanwendungen mit KI-Unterstützung schneller und in sauberer Struktur um.
  • Sie nutzen KI gezielt für Barrierefreiheit, Performance und technisches SEO.
  • Sie überführen Vibe-Coding-Prototypen in wartbare, sichere und datenschutzkonforme Projekte.

Inhalte & Ablauf

Tag 1

Modul 1 Architektur und Grundkonzepte
  • Rollen von Host, Client und Server und der Lebenszyklus einer Verbindung
  • JSON-RPC-Nachrichten, Capability-Aushandlung und Benachrichtigungen
  • Tools, Resources und Prompts: wann welcher Baustein passt
  • Client-Funktionen wie Sampling, Roots und Elicitation im Überblick
Modul 2 Eigenen MCP-Server bauen
  • Server mit dem offiziellen TypeScript- oder Python-SDK aufsetzen
  • Tools mit JSON-Schema für Ein- und Ausgaben sauber definieren
  • Resources und Resource-Templates für Dokumente, Datensätze und Konfigurationen bereitstellen
  • Testen und Debuggen mit dem MCP Inspector und aussagekräftigen Fehlermeldungen
Modul 3 Anbindung an Claude Code, Cursor, Copilot und Agenten
  • Lokale stdio-Server und Remote-Server in Clients konfigurieren
  • Projekt- und nutzerbezogene Konfiguration, Freigaben und Berechtigungen
  • Tool-Beschreibungen formulieren, die Modelle zuverlässig richtig auswählen
  • MCP-Server in eigene Agenten mit Claude Agent SDK oder OpenAI Agents SDK einbinden
Modul 4 Transport, Authentifizierung und Betrieb
  • Streamable HTTP, Sitzungsverwaltung und zustandslose Server
  • Autorisierung mit OAuth, Token-Validierung und Anbindung an bestehende Identity Provider
  • Deployment als Container, auf Serverless-Plattformen oder hinter einem Gateway
  • Logging, Monitoring, Rate Limiting und Versionierung von Tool-Schnittstellen

Tag 2

Modul 5 Sicherheit und Governance
  • Bedrohungen: Prompt Injection über Tool-Ergebnisse, Tool Poisoning, Confused Deputy
  • Prinzip der minimalen Rechte, Bestätigungspflichten und Sandboxing
  • Prüfung und Freigabe von Drittanbieter-Servern im Unternehmen
  • Datenschutz, Protokollierung personenbezogener Daten und Anforderungen aus DSGVO und EU AI Act
Modul 6 Praxislabor: Webentwicklung
  • Layouts aus Entwürfen umsetzen
  • Barrierefreiheits-Audit
  • Performance und Core Web Vitals
  • CMS-Templates und -Erweiterungen
  • Technisches SEO
  • Formulare und Integrationen
Modul 7 Datenschutz, Qualität & Transfer in den Alltag
  • Websites unterliegen DSGVO, TTDSG und vielerorts dem Barrierefreiheitsstärkungsgesetz: Generierter Code darf keine Tracking-Dienste oder externen Ressourcen ohne Einwilligung einbinden und muss barrierefrei geprüft werden. Achten Sie zudem auf Lizenzen von Schriften, Bildern und Code-Snippets sowie darauf, dass Zugangsdaten zu Hosting und CMS nicht in Prompts gelangen.
  • Spielregeln für den sicheren KI-Einsatz im Team
  • Ergebnisse prüfen: Fakten, Quellen, Tests und Vier-Augen-Prinzip
  • Persönlicher Umsetzungsplan für die nächsten 30 Tage
  • Offene Fragen, Ausblick und Ressourcen zum Weiterlernen

Praxisszenarien aus Ihrem Bereich

Layouts aus Entwürfen umsetzen

Der Assistent erzeugt aus Screenshots oder Designdateien semantisches HTML und modernes CSS mit Grid, Flexbox und Custom Properties, responsiv für alle Breakpoints und konsistent mit vorhandenen Stylesheets.

Barrierefreiheits-Audit

Die KI prüft Seiten auf Überschriftenstruktur, Alternativtexte, Formularbeschriftungen, Tastaturbedienbarkeit und Kontraste, wertet automatisierte Testergebnisse aus und behebt Befunde entlang der WCAG-Kriterien. Kritische Befunde werden priorisiert behandelt.

Performance und Core Web Vitals

Lighthouse-Berichte werden ausgewertet, Bilder in moderne Formate mit responsiven Quellen überführt, kritisches CSS extrahiert, Skripte verzögert geladen und Layoutverschiebungen gezielt beseitigt. Jede Maßnahme wird mit einer erneuten Messung belegt.

CMS-Templates und -Erweiterungen

Der Agent erstellt Themes, Blöcke oder Plugins für WordPress, TYPO3 oder Headless-CMS, inklusive Inhaltsmodellen, Templates und Absicherung gegen typische Sicherheitslücken. Bestehende Coding Standards des Systems werden eingehalten.

Technisches SEO

Die KI ergänzt strukturierte Daten, Meta-Tags, hreflang-Angaben, sprechende URLs und XML-Sitemaps und prüft interne Verlinkung sowie Canonicals auf Konsistenz. Fehlerhafte Weiterleitungen und Duplicate Content werden aufgedeckt.

Formulare und Integrationen

Kontakt- und Anfrageformulare entstehen mit Validierung, Spam-Schutz und serverseitiger Verarbeitung, ebenso Anbindungen an Newsletter-, CRM- oder Buchungssysteme über deren APIs. Fehlerfälle und Zeitüberschreitungen werden sauber abgefangen.

Mögliche Praxisprojekte im Kurs

Statische Website mit Generator

Eine mehrsprachige Firmenwebsite mit einem Static Site Generator, strukturierten Daten, Sitemap und automatischem Deployment über eine CI-Pipeline. Inhalte werden in Markdown gepflegt und versioniert.

Barrierefreiheits-Checker

Ein kleines Tool, das eine Liste von URLs automatisiert prüft, Befunde nach Schweregrad sortiert und einen verständlichen HTML-Bericht erzeugt. Er eignet sich für regelmäßige Prüfungen.

Terminbuchungs-Widget

Ein einbettbares Widget, das freie Termine aus einer API lädt, Buchungen entgegennimmt und Bestätigungen per E-Mail auslöst. Das Widget ist barrierefrei und responsiv gestaltet.

Voraussetzungen

Solide Programmierkenntnisse in TypeScript/JavaScript oder Python sowie Grundverständnis von HTTP-APIs und JSON. Erste Erfahrung mit KI-Assistenten im Entwicklungsalltag ist hilfreich. Gute Kenntnisse in HTML, CSS und JavaScript sowie erste Erfahrungen mit Git, einem CMS oder einem Frontend-Framework.

Technische Voraussetzungen

Laptop mit Node.js oder Python, Git und einem Code-Editor; Zugang zu mindestens einem MCP-fähigen Client wie Claude Code, Claude Desktop, Cursor oder VS Code mit Copilot.

Datenschutz & Compliance

Websites unterliegen DSGVO, TTDSG und vielerorts dem Barrierefreiheitsstärkungsgesetz: Generierter Code darf keine Tracking-Dienste oder externen Ressourcen ohne Einwilligung einbinden und muss barrierefrei geprüft werden. Achten Sie zudem auf Lizenzen von Schriften, Bildern und Code-Snippets sowie darauf, dass Zugangsdaten zu Hosting und CMS nicht in Prompts gelangen.

Terminvorschläge

Alle Termine sind Vorschläge – Ihr Wunschtermin ist jederzeit möglich.

  • Do, 26. November 2026 – Fr, 27. November 2026 Online Anfragen
  • Di, 8. Dezember 2026 – Mi, 9. Dezember 2026 Berlin Anfragen
  • Mo, 14. Dezember 2026 – Di, 15. Dezember 2026 Online Anfragen
  • Di, 12. Januar 2027 – Mi, 13. Januar 2027 Stuttgart Anfragen
  • Do, 21. Januar 2027 – Fr, 22. Januar 2027 Online Anfragen
  • Di, 2. Februar 2027 – Mi, 3. Februar 2027 Hannover Anfragen

Häufige Fragen

Wofür brauche ich einen eigenen MCP-Server?

Immer dann, wenn KI-Assistenten auf interne Systeme zugreifen sollen, etwa auf Ticketsysteme, Datenbanken, Dokumentation oder Fachanwendungen. Ein eigener Server legt genau fest, welche Aktionen und Daten verfügbar sind, und lässt sich anschließend in mehreren Clients wiederverwenden. So vermeiden Sie Insellösungen und behalten die Kontrolle über Zugriffe.

Welche Programmiersprache wird im Kurs verwendet?

Sie können wahlweise mit TypeScript oder Python arbeiten, für beide gibt es offizielle SDKs. Die Konzepte sind identisch, die Übungen liegen in beiden Varianten vor. Wer in einer anderen Sprache entwickelt, profitiert trotzdem, da das Protokoll sprachunabhängig ist und SDKs für weitere Sprachen ähnlich aufgebaut sind.

Wie sicher ist MCP im Unternehmenseinsatz?

Das Protokoll selbst bietet Mechanismen für Autorisierung und Berechtigungen, die Sicherheit hängt aber von Implementierung und Betrieb ab. Risiken wie Prompt Injection über Tool-Ergebnisse oder überprivilegierte Server sind real. Wir behandeln konkrete Gegenmaßnahmen, Freigabeprozesse für Drittanbieter-Server und den Umgang mit personenbezogenen Daten.

Kann ich mit KI eine komplette Website bauen lassen?

Für Prototypen und einfache Seiten ja, und zwar erstaunlich schnell. Für produktive Websites brauchen Sie aber Struktur: saubere Komponenten, geprüfte Barrierefreiheit, Datenschutz, Performance und ein durchdachtes Deployment. Im Kurs lernen Sie, wie Sie KI-generierte Ergebnisse in eine wartbare Projektstruktur überführen und systematisch absichern.

Ist der Kurs auch für Quereinsteiger:innen geeignet?

Ja, sofern Grundkenntnisse in HTML, CSS und JavaScript vorhanden sind. Die KI erklärt Code und Konzepte verständlich und hilft, Wissenslücken schnell zu schließen. Wir achten darauf, dass Sie die generierten Lösungen nachvollziehen und eigenständig bewerten können, statt nur Ergebnisse zu übernehmen.

Was kostet die Schulung „Model Context Protocol (MCP) für Webentwickler:innen“?

Die Schulung kostet pauschal 949 € zzgl. gesetzl. MwSt. pro Teilnehmer:in – unabhängig davon, ob sie online oder vor Ort stattfindet. Enthalten sind 2 Trainingstag(e) mit Live-Trainer:in, Kursunterlagen, Übungsumgebung und Teilnahmebescheinigung.

Kann ich einen eigenen Wunschtermin angeben?

Ja. Unsere Terminvorschläge sind eine Orientierung. Im Anfrageformular können Sie jederzeit einen Wunschtermin oder Zeitraum im Freitext angeben – wir prüfen die Verfügbarkeit und bestätigen innerhalb eines Werktags.

Findet der Kurs online oder vor Ort statt?

Beides ist möglich: live online im virtuellen Klassenraum oder vor Ort in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart oder Kaiserslautern. Auf Wunsch führen wir das Training auch exklusiv für Ihr Team durch.

Weitere Kurse für Webentwickler:innen

Weitere Kurse zu Model Context Protocol (MCP)

Alle 29 Kurse zu Model Context Protocol (MCP)

Model Context Protocol (MCP) · MünchenModel Context Protocol (MCP) · SalzburgModel Context Protocol (MCP) · BerlinModel Context Protocol (MCP) · AugsburgModel Context Protocol (MCP) · HannoverModel Context Protocol (MCP) · BremenModel Context Protocol (MCP) · StuttgartModel Context Protocol (MCP) · KaiserslauternModel Context Protocol (MCP) · Online