Training course · Model Context Protocol (MCP) · Web Development

Model Context Protocol (MCP) for Web Developers

Build and connect MCP servers securely: tools, resources and prompts for Claude Code, Cursor, Copilot and your own AI agents.

Duration
2 days (14 hrs)
Format
Online or on-site
Language
German or English
Participants
open dates or exclusive for your team
Certificate
Certificate of attendance

Overview

“Model Context Protocol (MCP) for Web Developers” is designed for roles such as Web developers in agencies and in-house teams, Freelancers building websites and web applications and Developers on CMS projects using WordPress, TYPO3 or headless CMS and shows step by step how to use Model Context Protocol (MCP) productively, safely and transparently in Web Development – from the fundamentals to advanced workflows.

The Model Context Protocol is an open standard that gives AI applications a uniform way to access external tools, data sources and workflows. Instead of building separate integrations for every assistant, you implement an MCP server once and use it in Claude Code, Claude Desktop, Cursor, GitHub Copilot, VS Code and your own agents. In this two-day course you learn the host, client and server architecture, the three core primitives of tools, resources and prompts, and the stdio and Streamable HTTP transports, applying each of them directly in your own code.

On day one you use the official TypeScript or Python SDK to build an MCP server that exposes internal APIs, databases or files to AI assistants in a controlled way, and you test it with the MCP Inspector. Day two covers remote servers, OAuth-based authorisation, security risks such as prompt injection and tool poisoning, and operations, logging and governance in an enterprise setting. You learn to write tool descriptions that models use reliably, and you leave knowing how to integrate MCP servers safely into your development and agent landscape.

Web development today covers far more than HTML, CSS and a bit of JavaScript: responsive layouts, accessibility, SEO, performance, forms, content management systems, APIs, hosting and deployment are all part of the job. In small teams and agencies especially, web developers have to cover all of it. AI coding assistants and agents are a huge lever here: they turn designs into layouts, write semantic HTML and modern CSS with grid and container queries, audit pages for accessibility and Core Web Vitals, build CMS templates and automate deployments. Vibe coding also makes rapid prototypes possible that used to take days. This course teaches you to combine that speed with clean structure, maintainability and quality assurance.

The course is delivered live – either online in a virtual classroom or on-site in our training rooms in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart and Kaiserslautern. We can also run it exclusively for your team.

Who is this course for?

  • Web developers in agencies and in-house teams
  • Freelancers building websites and web applications
  • Developers on CMS projects using WordPress, TYPO3 or headless CMS
  • Career changers with a grounding in HTML, CSS and JavaScript

Typical challenges we address

  • A broad remit from layout and SEO to hosting in small teams
  • Rising expectations around accessibility, performance and privacy
  • Maintaining many client projects built on different technologies and versions
  • Time pressure on relaunches, landing pages and campaign sites

What you will be able to do

  • You explain the MCP architecture and choose between tools, resources and prompts for each use case.
  • You develop your own MCP server in TypeScript or Python and test it systematically.
  • You connect MCP servers to Claude Code, Cursor, Copilot and custom agents.
  • You run remote servers using Streamable HTTP and OAuth-based authorisation.
  • Deliver websites and web applications faster and with clean structure using AI support.
  • Use AI deliberately for accessibility, performance and technical SEO.
  • Turn vibe-coded prototypes into maintainable, secure and privacy-compliant projects.

Course outline

Day 1

Module 1 Architecture and core concepts
  • Roles of host, client and server and the lifecycle of a connection
  • JSON-RPC messages, capability negotiation and notifications
  • Tools, resources and prompts: choosing the right primitive
  • Client features such as sampling, roots and elicitation at a glance
Module 2 Building your own MCP server
  • Setting up a server with the official TypeScript or Python SDK
  • Defining tools cleanly with JSON Schema for inputs and outputs
  • Exposing resources and resource templates for documents, records and configuration
  • Testing and debugging with the MCP Inspector and meaningful error messages
Module 3 Connecting to Claude Code, Cursor, Copilot and agents
  • Configuring local stdio servers and remote servers in clients
  • Project-level and user-level configuration, approvals and permissions
  • Writing tool descriptions that models reliably select correctly
  • Integrating MCP servers into custom agents built with the Claude Agent SDK or OpenAI Agents SDK
Module 4 Transport, authorisation and operations
  • Streamable HTTP, session management and stateless servers
  • OAuth-based authorisation, token validation and integration with existing identity providers
  • Deploying as containers, on serverless platforms or behind a gateway
  • Logging, monitoring, rate limiting and versioning tool interfaces

Day 2

Module 5 Security and governance
  • Threats: prompt injection via tool results, tool poisoning, confused deputy
  • Least privilege, confirmation requirements and sandboxing
  • Reviewing and approving third-party servers within the organisation
  • Data protection, logging of personal data and requirements under GDPR and the EU AI Act
Module 6 Practice lab: Web Development
  • Turning designs into layouts
  • Accessibility audit
  • Performance and Core Web Vitals
  • CMS templates and extensions
  • Technical SEO
  • Forms and integrations
Module 7 Data protection, quality & transfer to daily work
  • Websites are subject to GDPR, ePrivacy rules and, in many cases, accessibility legislation under the European Accessibility Act: generated code must not embed tracking or external resources without consent and must be checked for accessibility. Also watch the licences of fonts, images and code snippets, and keep hosting and CMS credentials out of prompts.
  • Ground rules for safe AI use in your team
  • Checking results: facts, sources, tests and the four-eyes principle
  • Personal action plan for the next 30 days
  • Open questions, outlook and resources for further learning

Practical scenarios from your field

Turning designs into layouts

From screenshots or design files, the assistant produces semantic HTML and modern CSS using grid, flexbox and custom properties, responsive across all breakpoints and consistent with existing stylesheets.

Accessibility audit

The AI checks pages for heading structure, alt text, form labels, keyboard operability and contrast, interprets automated test results and fixes findings against WCAG success criteria.

Performance and Core Web Vitals

Lighthouse reports are analysed, images converted to modern formats with responsive sources, critical CSS extracted, scripts deferred and layout shifts eliminated in a targeted way.

CMS templates and extensions

The agent builds themes, blocks or plugins for WordPress, TYPO3 or a headless CMS, including content models, templates and protection against common security flaws. The system’s coding standards are respected.

Technical SEO

The AI adds structured data, meta tags, hreflang annotations, readable URLs and XML sitemaps, and checks internal linking and canonicals for consistency. Broken redirects and duplicate content are uncovered.

Forms and integrations

Contact and enquiry forms are built with validation, spam protection and server-side processing, alongside integrations with newsletter, CRM or booking systems via their APIs. Errors and timeouts are handled cleanly.

Possible hands-on projects

Static website with a generator

A multilingual company website built with a static site generator, structured data, a sitemap and automated deployment through a CI pipeline.

Accessibility checker

A small tool that automatically audits a list of URLs, sorts findings by severity and generates a readable HTML report.

Appointment booking widget

An embeddable widget that loads available slots from an API, accepts bookings and triggers confirmation emails. The widget is accessible and fully responsive on all devices.

Prerequisites

Solid programming skills in TypeScript/JavaScript or Python and a basic understanding of HTTP APIs and JSON. Some experience using AI assistants in day-to-day development is helpful. Good knowledge of HTML, CSS and JavaScript plus some experience with Git, a CMS or a front-end framework.

Technical requirements

A laptop with Node.js or Python, Git and a code editor, plus access to at least one MCP-capable client such as Claude Code, Claude Desktop, Cursor or VS Code with Copilot.

Data protection & compliance

Websites are subject to GDPR, ePrivacy rules and, in many cases, accessibility legislation under the European Accessibility Act: generated code must not embed tracking or external resources without consent and must be checked for accessibility. Also watch the licences of fonts, images and code snippets, and keep hosting and CMS credentials out of prompts.

Suggested dates

All dates are suggestions – your preferred date is always possible.

  • Thu, 26 November 2026 – Fri, 27 November 2026 Online Request
  • Tue, 8 December 2026 – Wed, 9 December 2026 Berlin Request
  • Mon, 14 December 2026 – Tue, 15 December 2026 Online Request
  • Tue, 12 January 2027 – Wed, 13 January 2027 Stuttgart Request
  • Thu, 21 January 2027 – Fri, 22 January 2027 Online Request
  • Tue, 2 February 2027 – Wed, 3 February 2027 Hanover Request

Frequently asked questions

Why would I need my own MCP server?

Whenever AI assistants need access to internal systems such as ticketing tools, databases, documentation or line-of-business applications. Your own server defines precisely which actions and data are available and can then be reused across several clients. That avoids isolated one-off integrations and keeps access firmly under your control.

Which programming language does the course use?

You can choose between TypeScript and Python, both of which have official SDKs. The concepts are identical and all exercises are available in both versions. Developers working in other languages still benefit, because the protocol is language-agnostic and SDKs for other languages follow a similar structure.

How secure is MCP for enterprise use?

The protocol provides mechanisms for authorisation and permissions, but real-world security depends on implementation and operations. Risks such as prompt injection through tool results or over-privileged servers are genuine. We cover concrete countermeasures, approval processes for third-party servers and how to handle personal data.

Can AI build an entire website for me?

For prototypes and simple sites, yes – and remarkably quickly. Production websites, however, need structure: clean components, verified accessibility, privacy compliance, performance and a well-designed deployment. On the course you learn to move AI-generated output into a maintainable project structure and safeguard it systematically.

Is the course suitable for career changers?

Yes, provided you have a grounding in HTML, CSS and JavaScript. AI explains code and concepts clearly and helps close knowledge gaps quickly. We make sure you understand the generated solutions and can evaluate them independently, rather than simply accepting whatever the assistant produces.

How much does “Model Context Protocol (MCP) for Web Developers” cost?

The course costs a flat €949 plus VAT per participant – whether online or on-site. This includes 2 training day(s) with a live trainer, course materials, a lab environment and a certificate of attendance.

Can I suggest my own date?

Yes. Our suggested dates are just a guide. In the request form you can always describe your preferred date or period in free text – we check availability and confirm within one working day.

Is the course online or on-site?

Both are possible: live online in a virtual classroom or on-site in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart or Kaiserslautern. We can also run the course exclusively for your team.

More courses for Web Developers

More Model Context Protocol (MCP) courses

All 29 Model Context Protocol (MCP) courses

Model Context Protocol (MCP) · MunichModel Context Protocol (MCP) · SalzburgModel Context Protocol (MCP) · BerlinModel Context Protocol (MCP) · AugsburgModel Context Protocol (MCP) · HanoverModel Context Protocol (MCP) · BremenModel Context Protocol (MCP) · StuttgartModel Context Protocol (MCP) · KaiserslauternModel Context Protocol (MCP) · Online