Schulung · Model Context Protocol (MCP) · React & Frontend

Model Context Protocol (MCP) für React- und Frontend-Entwickler: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 React- und Frontend-Entwickler:innen“ richtet sich an Rollen wie React-Entwickler:innen in Produkt- und Agenturteams, Frontend-Engineers mit Next.js, Vite oder vergleichbaren Frameworks und Maintainer von Design-Systemen und Komponentenbibliotheken und zeigt Schritt für Schritt, wie Model Context Protocol (MCP) im Bereich React & Frontend 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.

Frontend-Entwicklung bedeutet heute komponentenbasierte Architekturen, State Management, Server Components, Design-Systeme, Barrierefreiheit und Performance-Budgets – oft gleichzeitig. KI-Coding-Assistenten und Agenten beschleunigen genau die Arbeit, die viel Zeit frisst: Komponenten aus Designvorgaben ableiten, Class Components auf Hooks umstellen, Storybook-Stories und Tests mit der Testing Library schreiben, ARIA-Fehler beheben oder unnötige Re-Renderings aufspüren. Weil Frontend-Code stark von Konventionen lebt, kommt es auf guten Kontext an: Design Tokens, Ordnerstruktur, Styling-Ansatz und bevorzugte Bibliotheken müssen dem Assistenten bekannt sein. Im Kurs lernen Sie, diese Leitplanken zu setzen und Ergebnisse visuell wie technisch zuverlässig zu prüfen.

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?

  • React-Entwickler:innen in Produkt- und Agenturteams
  • Frontend-Engineers mit Next.js, Vite oder vergleichbaren Frameworks
  • Maintainer von Design-Systemen und Komponentenbibliotheken
  • Fullstack-Entwickler:innen mit Frontend-Schwerpunkt
  • UI-Engineers mit Verantwortung für Barrierefreiheit und Performance

Typische Herausforderungen, die wir adressieren

  • Inkonsistente Komponenten und Styles trotz vorhandenem Design-System
  • Schwer nachvollziehbare Re-Renderings, aufgeblähte Bundles und schwache Core Web Vitals
  • Lückenhafte Barrierefreiheit und wachsender Druck durch gesetzliche Anforderungen
  • Legacy-Code mit Class Components, veralteten Patterns und fehlenden Tests

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 lassen KI-Agenten Komponenten, Stories und Tests passend zu Ihrem Design-System erzeugen.
  • Sie nutzen KI gezielt, um Barrierefreiheit, Performance und Legacy-Code systematisch zu verbessern.
  • Sie prüfen generierten Frontend-Code visuell, funktional und hinsichtlich Wartbarkeit, bevor er ausgeliefert wird.

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: React & Frontend
  • Komponenten aus Designvorgaben bauen
  • Tests mit der Testing Library
  • Barrierefreiheit prüfen und verbessern
  • Legacy-Code modernisieren
  • Performance optimieren
  • Formulare und Datenabruf
Modul 7 Datenschutz, Qualität & Transfer in den Alltag
  • Seit Geltung des Barrierefreiheitsstärkungsgesetzes müssen viele digitale Angebote barrierefrei sein – generierter UI-Code muss entsprechend geprüft werden. Achten Sie zudem auf Lizenzen übernommener Komponenten und Icons, auf keine Secrets im Client-Bundle und darauf, dass Tracking- oder Consent-Logik den Vorgaben von DSGVO und TTDSG entspricht.
  • 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

Komponenten aus Designvorgaben bauen

Aus Screenshots, Design-Spezifikationen oder Figma-Exporten erzeugt der Assistent typisierte React-Komponenten, die vorhandene Design Tokens und Bibliotheken nutzen, und ergänzt passende Storybook-Stories für alle Zustände. Abweichungen vom Design werden iterativ korrigiert.

Tests mit der Testing Library

Die KI schreibt nutzerzentrierte Komponententests mit React Testing Library und Vitest oder Jest, simuliert Interaktionen, mockt API-Aufrufe und deckt Lade-, Fehler- und Leerzustände ab. Implementierungsdetails bleiben dabei bewusst außen vor.

Barrierefreiheit prüfen und verbessern

Der Agent analysiert Komponenten auf semantisches HTML, ARIA-Attribute, Fokusführung und Kontraste, wertet axe-Ergebnisse aus und behebt Befunde nachvollziehbar entlang der WCAG-Kriterien. Dazu gehören auch Tastaturbedienung und Screenreader-Ausgaben.

Legacy-Code modernisieren

Class Components werden auf Funktionskomponenten mit Hooks umgestellt, Prop-Drilling durch Context oder ein State-Management-Konzept ersetzt und PropTypes durch TypeScript-Typen abgelöst – mit Tests als Sicherheitsnetz.

Performance optimieren

Die KI identifiziert unnötige Re-Renderings, schlägt Memoization, Code Splitting und Lazy Loading vor, analysiert Bundle-Reports und erklärt, wie sich Maßnahmen auf Kennzahlen wie LCP und INP auswirken.

Formulare und Datenabruf

Komplexe Formulare mit Validierungsschemas, Fehlermeldungen und optimistischen Updates entstehen ebenso wie Datenabruf-Logik mit Caching, Retry und sauberem Umgang mit Lade- und Fehlerzuständen. Bestehende Bibliotheken für Formulare und Datenabruf werden konsequent genutzt.

Mögliche Praxisprojekte im Kurs

Interaktives KPI-Dashboard

Ein React-Dashboard mit Diagrammen, Filtern und responsivem Layout, das Daten aus einer REST-API lädt und vollständig per KI-Agent aus einer kurzen Spezifikation entsteht.

Komponentenbibliothek mit Storybook

Eine kleine, barrierefreie Komponentenbibliothek mit Buttons, Dialogen und Formularfeldern, inklusive Design Tokens, Storybook-Dokumentation und automatisierten Tests. Sie dient als Grundlage für einheitliche Oberflächen in mehreren Projekten.

Accessibility-Checker für Pull Requests

Ein Skript, das Storybook-Stories automatisiert mit axe prüft und die Befunde als übersichtlichen Bericht für Pull Requests aufbereitet. Neue Barrierefreiheitsprobleme fallen so schon vor dem Merge auf.

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. Praktische Erfahrung mit React und modernem JavaScript oder TypeScript sowie Grundkenntnisse in CSS, npm und Git.

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

Seit Geltung des Barrierefreiheitsstärkungsgesetzes müssen viele digitale Angebote barrierefrei sein – generierter UI-Code muss entsprechend geprüft werden. Achten Sie zudem auf Lizenzen übernommener Komponenten und Icons, auf keine Secrets im Client-Bundle und darauf, dass Tracking- oder Consent-Logik den Vorgaben von DSGVO und TTDSG entspricht.

Terminvorschläge

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

  • Do, 26. November 2026 – Fr, 27. November 2026 Online Anfragen
  • Do, 10. Dezember 2026 – Fr, 11. Dezember 2026 Stuttgart Anfragen
  • Do, 14. Januar 2027 – Fr, 15. Januar 2027 Online Anfragen
  • Mi, 27. Januar 2027 – Do, 28. Januar 2027 Berlin Anfragen
  • Mo, 1. Februar 2027 – Di, 2. Februar 2027 Online Anfragen
  • Mi, 17. Februar 2027 – Do, 18. Februar 2027 München 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 die KI Designs pixelgenau umsetzen?

KI-Assistenten setzen Layouts aus Screenshots oder Spezifikationen inzwischen erstaunlich gut um, besonders wenn sie Ihre Design Tokens und Komponenten kennen. Pixelgenauigkeit entsteht aber erst durch Iteration: Im Kurs lernen Sie, visuelle Abweichungen gezielt zurückzumelden und Storybook sowie visuelle Tests als Kontrollinstanz einzusetzen.

Spielt das verwendete Framework eine Rolle?

Der Kurs ist auf React ausgerichtet, die Arbeitsweisen lassen sich aber auf Next.js, Remix oder Vite-basierte Setups übertragen. Wir zeigen, wie Sie Framework-spezifische Regeln wie Server- und Client-Komponenten oder Routing-Konventionen in Anweisungsdateien festhalten, damit der Assistent passenden Code erzeugt. Die Grundprinzipien bleiben dabei gleich.

Was kostet die Schulung „Model Context Protocol (MCP) für React- und Frontend-Entwickler: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 React- und Frontend-Entwickler: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