Connect with us

Entwicklung & Code

Model Context Protocol: Anwendungsbeispiel in TypeScript


Das KI-Unternehmen Anthropic, das 2021 von ehemaligen OpenAI-Mitarbeitern gegründet wurde, hat das Model Context Protocol (MCP) mit dem Ziel einer Standardisierung der Kommunikation zwischen Large Language Models und externen Datenquellen entwickelt. Beim sogenannten Tool Calling hat das LLM die Möglichkeit, auf vordefinierte Schnittstellen zuzugreifen. Diese lassen sich parametrisieren und erlauben so große Flexibilität. Die meisten LLM-Anbieter unterstützen dieses Feature. Jede Datenquelle braucht dabei eine Verknüpfung über eine eigene Funktion, was in der Regel eine Anpassung am Programmcode erforderlich macht.


Sebastian Springer

Sebastian Springer

Sebastian Springer weckt als Dozent für JavaScript, Sprecher auf zahlreichen Konferenzen und Autor die Begeisterung für professionelle Entwicklung mit JavaScript.

Das Model Context Protocol soll die Verknüpfung externer Datenquellen deutlich vereinfachen und es erlauben, externe Schnittstellen, Datenbanken, Unternehmenssysteme oder Dateisysteme ohne zusätzliche Anpassung direkt anzubinden. Dieser Artikel widmet sich den technischen Details der Funktionsweise des MCP und zeigt anhand eines konkreten Beispiels mit dem MCP-TypeScript-SDK, wie eine Integration in eine Applikation gelingen kann.

Die zentrale Anlaufstelle für Ressourcen zum Thema MCP sind zum einen die offizielle Website des Projekts und zum anderen das GitHub-Repo. Dort stehen die Dokumentation, die Spezifikation und eine ganze Reihe von Software Development Kits (SDKs) für verschiedene Programmiersprachen wie Python, TypeScript, C# oder Kotlin zur Verfügung.

Eine Applikation, die das MCP nutzt, besteht aus verschiedenen Komponenten:

  • MCP-Server: Der Server ist die Stelle bei MCP, die ihre Funktionalität über das MCP zur Verfügung stellt. Das können Daten aus einer Datenbank, aber auch Suchergebnisse aus dem Internet sein. Die Schnittstellen des Servers sind exakt definiert und lassen sich von der Clientseite verwenden.
  • MCP-Client: Die Gegenseite zum Server ist der Client. Er kommuniziert mit dem Server und führt die verfügbaren Operationen über die Schnittstellen aus. Dabei gibt es sowohl lesende als auch schreibende Operationen.
  • MCP-Host: Die Applikation, mit der die Benutzer interagieren. Das kann eine Web-Applikation, eine klassische Desktop-Applikation (wie Claude Desktop), eine Entwicklungsumgebung (wie Cursor) oder ein eigener, auf Frameworks wie Langchain basierender Agent sein. In diese Applikation ist der Client eingebettet, sodass der Host nicht direkt über MCP mit dem Server, sondern über den Umweg des Clients kommuniziert.

Ein MCP-Server kann direkt in eine Applikation integriert, aber auch, und das wird der häufigere Fall sein, ein eigenständiger Dienst sein. Die MCP-Initiative stellt eine Reihe von SDKs in unterschiedlichen Programmiersprachen bereit, die die Grundlage für die Serverimplementierung bilden. Der Server selbst ist modular aufgebaut und erlaubt verschiedene Transportmechanismen, über die er mit den Clients kommuniziert. Das TypeScript-SDK sieht aktuell die Transportmechanismen Streamable HTTP, SSE und stdio vor. Streamable HTTP und SSE basieren auf HTTP, wobei die MCP-Spezifikation vom 26.03.2025 den SSE-Transport als veraltet (deprecated) markierte und die Version vom 18.06.2025 (latest) SSE bereits nicht mehr erwähnt.

Ein MCP-Client kann die HTTP-basierten Transportmechanismen verwenden, um sich mit einem entfernten Server zu verbinden. Der stdio-Transport ist für lokale Anwendungen gedacht. Hierbei verbindet sich der Client über die Standard-Ein- und -Ausgabe mit dem Server. Dieser Weg arbeitet deutlich schneller, ist jedoch nur für die Verwendung auf einem System geeignet. Das Python-SDK definiert zusätzlich zu diesen Transporttypen noch weitere wie den ASGI-Transport (Asynchronous Server Gateway Interface), eine Schnittstelle aus der Python-Welt, die neben der Kommunikation über HTTP noch weitere Protokolle wie WebSockets oder benutzerdefinierte Protokolle unterstützt.

Die MCP-Spezifikation unterteilt die Features, die ein Server seinen Clients bietet, in drei Kategorien: Resources, Tools und Prompts.

Mit der Feature-Kategorie Resources stellt ein MCP-Server Daten zur Verfügung. Ein typisches Beispiel ist die Anbindung an eine Datenbank. Resources sollten Daten nur lesend zur Verfügung stellen, keine komplexen Berechnungen durchführen und keine Seiteneffekte wie Datenmanipulationen aufweisen. Sie sind parametrisierbar, um die Abfrage zu beeinflussen und eine höhere Flexibilität zu erreichen.

Die MCP-Spezifikation sieht vor, dass das Format [protocol]://[host]/[path] Resources spezifiziert. Ein Beispiel könnte folgendermaßen aussehen: postgres://database/users. Die Antwort auf eine Resources-Anfrage kann entweder im Textformat wie beispielsweise JSON oder als Binärdaten wie PDFs oder Bilder erfolgen.

Der MCP-Server stellt über den Endpunkt resources/list eine Liste der verfügbaren Resources zur Verfügung. Jeder Datensatz weist mindestens die URL der jeweiligen Resource und einen menschenlesbaren Namen auf. Hinzu kommen noch eine optionale Beschreibung und ein ebenfalls optionaler MIME-Type, der das Format der Rückmeldung spezifiziert.

Die Spezifikation sieht nicht nur den lesenden Zugriff auf Ressourcen vor, sondern auch einen Benachrichtigungsmechanismus, über den der Server registrierte Clients über Änderungen der verfügbaren sowie Datenänderungen einer einzelnen Resource benachrichtigen kann.

Die Features der Kategorie Tools dürfen Berechnungen durchführen und Seiteneffekte aufweisen. Clients müssen berücksichtigen, dass eine Toolausführung im Vergleich zu einer Ressourcenabfrage länger dauern kann. Diese Werkzeuge können Funktionen sein, die aufgrund einer Eingabe eine bestimmte Ausgabe produzieren, aber auch Schnittstellen zu Datenbanken und anderen Systemen, um dort gespeicherte Informationen zu manipulieren. Ähnlich wie Resources können Clients auch die verfügbaren Tools eines Servers über einen Endpunkt auslesen. Dieser lautet tools/list.

Die Beschreibung eines MCP-Tools ist etwas umfangreicher als die einer Resource. Sie enthält einen Namen und ein Input-Schema, um die Parameter des Tools zu beschreiben. Hinzu kommen noch dessen optionale Beschreibung und optionale Metadaten über die Tool-Annotations. Die Annotations liefern Clients beziehungsweise Hinweise für Entwicklerinnen und Entwicklern über das Verhalten eines Tools. Die meisten vordefinierten Annotations der MCP-Spezifikation sind Boolean-Werte. So sagt beispielsweise die readOnlyHint-Annotation aus, dass das Tool sein Umfeld nicht modifiziert. Wie auch bei den Resources kann ein Client sich beim Server registrieren, um über Änderungen benachrichtigt zu werden.

Prompts sind Vorlagen, die dem MCP-Host die Arbeit mit dem Large Language Model (LLM) erleichtern. Damit kann eine MCP-Applikation nicht nur die Kommunikation zwischen Client und Server, sondern auch zum LLM hin standardisieren. Bei einer Applikation, die ein Code-Review-Feature anbietet, dient der Prompt beispielsweise dazu, den zu überprüfenden Code korrekt einzubetten. Laut der MCP-Spezifikation besitzen die Prompt-Templates einen eindeutigen Namen. Zusätzlich sieht die Spezifikation noch die optionalen Felder description für eine menschenlesbare Beschreibung und arguments mit einer Liste der unterstützten Argumente des Schemas vor.

Die Prompt-Endpunkte eines MCP-Servers kommen ähnlich wie Tools zum Einsatz. Der Client fragt nach dem eindeutigen Identifier und übermittelt die benötigten Werte. Der Server antwortet mit dem Prompt, in den die Werte integriert sind, sodass der Client beziehungsweise die Host-Applikation den Prompt direkt verwenden kann.Für eine Liste aller verfügbaren Prompts bietet der MCP-Server den Endpunkt prompts/list an.

Die SDKs, die die MCP-Initiative zur Verfügung stellt, implementieren die Spezifikation und dienen als Grundlage für die Implementierung von MCP-Servern und MCP-Clients. Das folgende Beispiel implementiert einen einfachen MCP-Server mit je einer Resource, einem Tool und einem Prompt mit dem TypeScript-SDK.


import {
  McpServer,
  ResourceTemplate,
} from '@modelcontextprotocol/sdk/server/mcp.js';
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
import { z } from 'zod';

const server = new McpServer({
  name: 'mcp-server',
  version: '1.0.0',
});

server.tool(
  'currency-converter',
  'Convert currency between EUR and USD',
  {
    amount: z.number(),
    from: z.enum(['EUR', 'USD']),
    to: z.enum(['EUR', 'USD']),
  },
  async ({ amount, from, to }) => {
    const exchangeRate =
      from === 'EUR' && to === 'USD'
        ? 1.1
        : from === 'USD' && to === 'EUR'
        ? 0.91
        : 1;
    const convertedAmount = amount * exchangeRate;
    return {
      content: [
        {
          type: 'text',
          text: `${amount} ${from} is ${convertedAmount.toFixed(2)} ${to}`,
        },
      ],
    };
  }
);

server.resource(
  'price-list',
  new ResourceTemplate('price-list://products/{category}', {
    list: undefined,
  }),
  async (uri, { category }) => {
    const priceList = [
      { name: 'Apple', category: 'Fruit', price: 1.2 },
      { name: 'Banana', category: 'Fruit', price: 0.8 },
      { name: 'Carrot', category: 'Vegetable', price: 0.5 },
      { name: 'Bread', category: 'Bakery', price: 2.5 },
      { name: 'Milk', category: 'Dairy', price: 1.5 },
    ];

    const filteredList =
      category !== 'all'
        ? priceList.filter(
            (item) => item.category.toLowerCase() === category.toLowerCase()
          )
        : priceList;

    return {
      contents: [
        {
          uri: uri.href,
          text: JSON.stringify(filteredList),
          json: filteredList,
        },
      ],
    };
  }
);

server.prompt(
  'get-product-description-prompt',
  {
    productName: z.string().describe('The name of the product.'),
    length: z
      .enum(['short', 'medium', 'long'])
      .optional()
      .describe('The desired length of the description.'),
  },
  async (input) => {
    const { productName, length } = input;

    let promptInstructions = `Please generate a compelling product description.`;

    let promptCore = `The product is named "${productName}". `;
    promptCore += `Focus on its general benefits and appeal. `;

    let refinements = '';

    if (length) {
      let lengthGuidance = '';
      if (length === 'short')
        lengthGuidance = 'Keep it concise, around 1-2 sentences. ';
      if (length === 'medium')
        lengthGuidance = 'Aim for a paragraph of about 3-5 sentences. ';
      if (length === 'long')
        lengthGuidance =
          'Provide a detailed description, potentially multiple paragraphs. ';
      refinements += lengthGuidance;
    }

    const fullPrompt = `${promptInstructions}\n\nProduct Details:\n${promptCore}\n\nStyle and Constraints:\n${refinements.trim()}`;

    return {
      messages: [
        {
          role: 'user',
          content: {
            type: 'text',
            text: fullPrompt,
          },
        },
      ],
    };
  }
);

const transport = new StdioServerTransport();
await server.connect(transport);


Listing 1: MCP-Serverimplementierung

Die Grundlage für das Beispiel bildet das TypeScript-SDK, das mit dem Kommando npm install @modelcontextprotocol/sdk installiert wird. Das Paket stellt mit der McpServer-Klasse die Grundlage für die Serverimplementierung zur Verfügung. Auf der Server-Instanz sind die Methoden tool, resource und prompt implementiert, die die Schnittstelle zur Registrierung der verschiedenen MCP-Features darstellen. Nachdem die Applikation alle Features registriert hat, ruft sie die connect-Methode der Serverinstanz auf und übergibt ein Transport-Objekt. Das kann wie im Beispiel eine Instanz der StdioServerTransport-Klasse für den Stdio-Transport sein oder auch eine Instanz der StreamableHTTPServerTransport-Klasse für eine Remote-Schnittstelle über Streamable-HTTP. Alternativ dazu unterstützt das TypeScript-SDK auch noch die SSEServerTransport-Klasse für Server Sent Events als Transportmethode.

Für die Implementierung der einzelnen Features des MCP-Servers gelten einige Regeln, die das SDK mit einer sehr strikten Schemavalidierung absichert. Folgt die Implementierung nicht diesen Regeln, lässt sich der Serverprozess nicht starten. Die Validierung stellt auch die Konsistenz der Argumente beim Aufruf sicher und spielt damit eine wichtige Rolle bei der Sicherheit in der Applikation.

Zur Definition von Resources sieht das SDK die resource-Methode des Serverobjekts vor. Diese Methode akzeptiert die Bezeichnung der Resource, die zugehörige URL und eine Callback-Funktion, die das Ergebnis produziert. Die Callback-Funktion darf asynchron sein, sodass auch der Anbindung einer Datenbank nichts im Wege steht. Eine Besonderheit gibt es bei der Registrierung von Resources allerdings: Ist die URL als Zeichenkette angegeben, darf sie keine dynamischen Parameter enthalten. Für diesen Fall akzeptiert die resource-Methode eine ResourceTemplate-Instanz. Hier werden die Parameter im Pfad mit geschweiften Klammern gekennzeichnet. Die Callback-Funktion kann über ihr zweites Argument auf die Parameter der URL zugreifen und das Ergebnis entsprechend modifizieren.

Im Beispiel ist die Resource eine statische Preisliste für eine Reihe von Produkten. Sie trägt die Bezeichnung price-list und ist über die URL price-list://products/{category} erreichbar, wobei category für eine Kategorie steht, nach der die Callback-Funktion die Datensätze filtert. Das TypeScript-SDK arbeitet mit Zod als Validierungsbibliothek und nutzt diese beispielsweise für die Überprüfung des Rückgabewerts der Resource-Callback-Funktion, sodass diese verpflichtend eine gewisse Struktur zurückgeben muss. Das contents-Array im Rückgabewert kann eine Reihe von Objekten aufweisen, die mindestens über die Eigenschaften uri und text verfügen müssen. Zusätzlich akzeptiert das SDK noch weitere Eigenschaften wie json, in der die Daten als JSON-Objekt vorliegen dürfen.



Source link

Entwicklung & Code

Angular 21 vollzieht den Abschied von zone.js


Angular 21 ist erschienen. Die neue Hauptversion des Webframeworks bietet experimentelle Signal Forms, eine Developer-Preview für Angular Aria für barrierefreie Headless-Komponenten und weitere Neuerungen. Die Bibliothek zone.js ist zugunsten der Zoneless Change Detection in neuen Angular-Anwendungen nicht mehr enthalten.

Weiterlesen nach der Anzeige


enterJS 2026 in Mannheim

enterJS 2026 in Mannheim

(Bild: jaboy/123rf.com)

Die enterJS 2026 wird am 16. und 17. Juni in Mannheim stattfinden. Das Programm wird sich rund um JavaScript und TypeScript, Frameworks, Tools und Bibliotheken, Security, UX und mehr drehen. Vergünstigte Blind-Bird-Tickets sind bis zum Programmstart erhältlich.

Als Developer-Preview ist Angular Aria enthalten. Diese Bibliothek für gängige UI-Pattern legt den Fokus auf Accessibility – für barrierefreie Headless-Komponenten gemäß der Webstandard-Suite WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) des World Wide Web Consortium (W3C).

Derzeit umfasst Angular Aria ein Set aus acht UI-Pattern – Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar und Tree – mit 13 Komponenten. Diese sind nicht gestylt und lassen sich nach Belieben mit eigenen Styles versehen.

Angular Aria lässt sich mit npm i @angular/aria installieren. Für dieses neue Feature steht ein Guide bereit, der Codebeispiele für alle Komponenten, Skins zum Ausprobieren und weitere Informationen enthält.

Weiterlesen nach der Anzeige

Angular-Entwickler können nun Signal Forms ausprobieren, eine experimentelle Bibliothek für das Verwalten von Form-State auf Basis der reaktiven Signals. Sie soll sowohl eine gute Developer Experience als auch vollständige Typsicherheit für den Zugriff auf Formularfelder ermöglichen und zentraler, Schema-basierter Validationslogik folgen.

Für den Einsatz der experimentellen Signal Forms halten der entsprechende Guide und die Dokumentation alle Details bereit.

Vitest ist in Angular 21 zum Standard-Test-Runner gewählt worden. Das gilt für neue Projekte, während die bisher genutzten Technologien Karma und Jasmine weiterhin vollständigen Support durch das Angular-Team genießen, sodass Entwicklerinnen und Entwickler noch nicht zu Vitest migrieren müssen. Wer es allerdings testen möchte, kann die experimentelle Migration durchführen.

Und schließlich verabschiedet sich Angular 21 endgültig von zone.js – ein Prozess, der sich schon seit Angular 18 abzeichnete. Die eigenständige Bibliothek zone.js, die von Beginn an in Angular zum Einsatz kam, ist nun nicht mehr standardmäßig enthalten. Neue Angular-Anwendungen nutzen demnach das Zoneless-Verfahren, während für bestehende Anwendungen eine Migrationsanleitung zur Verfügung steht.

Die Zoneless Change Detection bietet laut dem Angular-Team zahlreiche Vorteile: verbesserte Core Web Vitals, natives async/await, Ökosystem-Kompatibilität, verringerte Bundle-Größe, vereinfachtes Debugging und eine verbesserte Kontrolle. Dennoch habe zone.js eine wichtige Rolle bei der Gestaltung von Angular gespielt, hebt das Entwicklungsteam hervor.

Weitere Informationen zu den Updates in Angular 21 hält der Angular-Blog bereit.


(mai)



Source link

Weiterlesen

Entwicklung & Code

software-architektur.tv: Digitale Souveränität in der Softwarearchitektur


Digitale Souveränität ist aktuell ein sehr heiß diskutiertes Thema und im Mainstream der Gesellschaft angekommen. In dieser Episode spricht Eberhard Wolff mit Sven Müller über den Einfluss von digitaler Souveränität auf Softwarearchitektur. Ziel ist es, die digitale Handlungsfähigkeit unserer Organisationen zu stärken. Aspekte sind nicht nur die häufig genannte Unabhängigkeit von US-Cloud-Anbietern, sondern vor allem gezielte Make-or-buy-Enscheidungen, der Einsatz von offenen Standards oder Open Source nicht nur zum Sparen von Lizenzkosten.

Weiterlesen nach der Anzeige

Sven Müller ist Softwareentwickler, -architekt und Berater bei synyx. Seine Leidenschaft gilt der modernen agilen Softwareentwicklung an der Schnittstelle zwischen Fachbereich, Entwicklung, Anwender und Betrieb, die am Ende einen echten Mehrwert fürs Unternehmen schafft.

Lisa Maria Schäfer malt dieses Mal keine Sketchnotes.

Die Ausstrahlung findet am Freitag, 21. November 2025, live von 13 bis 14 Uhr statt. Die Folge steht im Anschluss als Aufzeichnung bereit. Während des Livestreams können Interessierte Fragen via Twitch-Chat, YouTube-Chat oder anonym über das Formular auf der Videocast-Seite einbringen.

software-architektur.tv ist ein Videocast von Eberhard Wolff, Blogger sowie Podcaster auf iX und bekannter Softwarearchitekt, der als Head of Architecture bei SWAGLab arbeitet. Zum Team gehören außerdem Lisa Maria Schäfer (Socreatory) und Ralf D. Müller (DB Systel). Seit Juni 2020 sind über 250 Folgen entstanden, die unterschiedliche Bereiche der Softwarearchitektur beleuchten – mal mit Gästen, mal Wolff, Schäfer oder Müller solo. Seit mittlerweile mehr als zwei Jahren bindet iX (heise Developer) die über YouTube gestreamten Episoden im Online-Channel ein, sodass Zuschauer dem Videocast aus den Heise Medien heraus folgen können.

Weitere Informationen zur Folge finden sich auf der Videocast-Seite.

Weiterlesen nach der Anzeige


(mdo)



Source link

Weiterlesen

Entwicklung & Code

Stack Overflow: Kuratierte Knowledge Base für KI-Agenten im Unternehmen


Das Entwicklerforum Stack Overflow stellt ein Knowledge-Base-Tool für Unternehmen vor. Es verbindet kuratiertes Wissen mit KI-Unterstützung und Microsoft-365-Anbindung. So soll es als zuverlässiger Informations-Pool im Unternehmen dienen.

Weiterlesen nach der Anzeige

Stack Internal soll das verteilte Wissen im Unternehmen in einer einheitlichen, von Menschen geprüften Basis zusammenführen, die den Qualitätsansprüchen und Compliance-Regeln der Firma entspricht. KI kommt beim Zusammenstellen der Informationen aus Quellen wie Confluence oder Teams zum Einsatz. Die Maschine klassifiziert die Daten beim Einlesen und präsentiert sie den menschlichen Prüferinnen und Prüfern in sortierter und vorbewerteter Form. Die Kuratoren korrigieren die Vorschläge und geben sie frei.

Die Inhalte von Stack Internal dienen einerseits als Basis für den KI-Chat in Microsoft-Tools, also Office 365, Teams und dem Coding-Copiloten für Entwicklerinnen und Entwickler. Ein MCP-Server ermöglicht andererseits die Anbindung an weitere GenAI-Modelle und Agenten. Umgekehrt sollen Interaktionen mit der Knowledge Base das Wissen darin verbessern und erweitern. Auf welche Art das geschehen soll, erklärt der Anbieter nicht.

Stack Internal ist eine Weiterentwicklung von Stack Overflow for Teams und läuft auf Azure. Es gibt Cloud- und On-Premises-Varianten, darunter eine kostenlose für bis zu fünfzig Mitglieder.

Stack Overflow macht mit Stack Internal aus der Not eine Tugend: Gestartet als Forum für Entwicklerinnen und Entwickler, war Stack Overflow mit der Verbreitung von Coding-Assistenten zu einer reinen Trainingsfundgrube für KI-Modelle abgesunken. Dass solide Trainingsdaten aber einen Wert eigener Art darstellen, vermarktet der Anbieter Stack Exchange nun.


(who)



Source link

Weiterlesen

Beliebt