In der heutigen Welt der Softwareentwicklung gewinnt die Integration von Künstlicher Intelligenz immer mehr an Bedeutung. Besonders spannend ist die Nutzung von großen Sprachmodellen, wie Anthropics Claude, die nun nicht nur als reine Chatbots fungieren, sondern aktiv Software steuern und bedienen können. Ein herausragendes Beispiel dafür ist ein P5.js Editor, der komplett über natürliche Sprache durch Claude Desktop gesteuert wird – realisiert mithilfe eines Model Context Protocol Servers, kurz MCP Server. P5.
js ist eine weit verbreitete JavaScript-Bibliothek, die speziell für kreative Programmierung und generative Kunst entwickelt wurde. Sie richtet sich an Künstler, Designer und Programmieranfänger, indem sie komplexe Grafik- und Animationsaufgaben vereinfacht. Doch trotz aller Benutzerfreundlichkeit bleibt das Programmieren für manche Nutzende eine Hürde, da es Wissen zu API-Funktionen, Parameterordnungen und Koordinatensystemen verlangt. Hier setzt die innovative Idee an: Was, wenn diese Hürden komplett durch eine dialoggestützte Steuerung ersetzt würden? Claude Desktop ist die native Applikation von Anthropic, die das KI-Modell Claude direkt auf dem Desktop eines Anwenders lauffähig macht. Das Modell kann nicht nur auf natürliche Sprache reagieren, sondern durch sogenannte Tools verschiedene externe Programme und Server ansteuern.
Das Model Context Protocol, das im November 2024 eingeführt wurde, stellt dabei den technischen Standard dar, der die Verbindung zu solchen Werkzeugen standardisiert und ihre Nutzung weitgehend automatisiert. MCP ermöglicht es, Werkzeuge dynamisch zu entdecken, mit standardisierten Schnittstellen zu kommunizieren und Ablaufsteuerungen zu realisieren – all das, ohne dass der Entwickler jedes Tool manuell integrieren muss. Anstatt einfache Anwendungen wie Wetter-APIs oder Rechnerfunktionen über MCP anzubinden, wurde hier ein ambitioniertes Projekt umgesetzt: ein vollwertiger P5.js Editor, der via natürlicher Sprache gesteuert wird. Das bedeutet, man muss keinen Code mehr selbst schreiben.
Wenn man zum Beispiel „zeichne einen springenden Ball“ sagt, übersetzt Claude die Anweisung in JavaScript-Code und spielt das Ergebnis live auf der Zeichenfläche ab. Die sonst üblichen Codezeilen wie ellipse(50, 50, 80, 80) werden so unnötig. Die technische Architektur hinter diesem System besteht aus mehreren Komponenten, die nahtlos zusammenarbeiten. Claude Desktop kommuniziert mittels eines stdio-basierten Protokolls mit dem MCP Server, der verschiedene Werkzeuge zur Steuerung des Editors bereitstellt. Diese Werkzeuge umfassen vielfältige Funktionen wie das Erzeugen und Verwalten von Dateien, das Aktualisieren von Code, das Starten und Stoppen der Ausführung und die Verwaltung der Konsolenausgabe.
Die Befehle werden dann im MCP Server in WebSocket-Kommandos umgewandelt und über einen Brückendienst – den sogenannten WebSocket Bridge Server – an den Web-basierten P5.js Editor weitergeleitet. Dieses Setup erlaubt eine Echtzeit-Interaktion, die dem Nutzer das direkte Feedback seiner Anweisungen direkt im Editor liefert. Der P5.js Editor selbst ist als moderne Webanwendung entwickelt, die Funktionen wie Mehrdateien-Support, Live-Vorschau im iframe, eine Echtzeitkonsole, Projektverwaltung und eine tab-basierte Oberfläche bietet.
Damit entspricht die Benutzererfahrung dem offiziellen P5.js Editor, erhält aber eine völlig neuartige Steuerungsmöglichkeit durch KI. Auch die Speicherung der Projekte erfolgt lokal mittels localStorage, womit einfache Persistenz gewährleistet ist. Ein besonders spannender Aspekt ist die sogenannte „Vibe Coding“-Methode, eine vom KI-Spezialisten Andrej Karpathy geprägte Arbeitsweise, bei der Programmieraufgaben mit natürlichen Beschreibungen an die KI delegiert werden, die daraufhin den Code generiert. Dieses Vorgehen erlaubt schnelle Iterationen und erspart das manuelle Eintauchen in Details der Programmiersprachen oder Frameworks.
Die Entwickler können sich so auf ihre kreativen Ideen konzentrieren, während die KI die technische Umsetzung übernimmt. Die Brücke zwischen dem MCP Server und dem Web-Editor ist essentiell, da die beiden Umgebungen unterschiedliche Kommunikationsprotokolle verwenden – Claude Desktop nutzt stdio, während der Editor WebSocket-Kommunikation erwartet. Der Bridge Server verbindet diese Welten, indem er als Relay fungiert und alle MCP-Befehle mitsamt Parametern an die richtige Stelle weiterleitet. Dadurch entsteht eine skalierbare, modulare Architektur, die nicht nur den P5.js Editor, sondern prinzipiell jede Webanwendung mit MCP Steuerung erweitern könnte.
Durch die Offenlegung des Quellcodes und die detaillierten Aufbereitung der einzelnen Systemkomponenten bietet dieses Projekt eine wichtige Referenz für Entwickler, die KI-gestützte Softwareentwicklung ausprobieren wollen. Insbesondere in der kreativen Szene könnten solche Lösungen den Zugang zu komplexen Programmierwerkzeugen revolutionieren und neue Formen des interaktiven Codings ermöglichen. Darüber hinaus zeigt das Projekt exemplarisch, wie MCP als Technologie die bisherigen Ansätze von Function Calling ergänzt und erweitert. Während Function Calling fest verdrahtete Schnittstellen und manuelle Integration erfordert, eröffnet MCP eine flexible, dynamische Infrastruktur für Tool-Discovery und Workflow-Orchestrierung über verschiedene Modelle und Anwendungen hinweg. Für Unternehmen und Entwickler, die skalierbare KI-gesteuerte Systeme aufbauen möchten, liefert MCP damit ein zukunftsweisendes Framework.
Nicht zuletzt hebt der P5.js Editor mit Claude-Unterstützung die Schwelle zwischen Ideation und technischer Umsetzung auf und demonstriert, wie durch die Verschmelzung von natürlichen Sprachbefehlen mit leistungsfähigen KI-Modellen kreative Prozesse effizienter und intuitiver gestaltet werden können. Dies betrifft nicht nur generative Kunst, sondern könnte auch Bildungsanwendungen, Prototyping und Rapid Development in vielen Feldern fördern. Future-Work-Perspektiven umfassen die Erweiterung der AI-gestützten Werkzeugsammlung um intelligentes Codeverständnis, automatische Fehlerbehebung, Integration von Medienassets und optimierte Projektverwaltung mittels persistenter Datenbanken. Ein weiterer signifikanter Schritt wäre der Aufbau eines nativen MCP Clients innerhalb der Webanwendung, der weitere UI-Verbesserungen und eine schnellere Reaktionszeit ermöglicht.
Abschließend verdeutlicht die Umsetzung des P5.js Editors gesteuert von Claude Desktop über MCP Server, dass moderne KI nicht nur Assistenten sind, sondern umfassende „Co-Developer“ sein können. Durch innovative Protokolle und architektonische Konzepte lassen sich komplexe kreative Umgebungen schaffen, in denen die Interaktion über Sprache funktioniert und traditionelle Barrieren von Syntax und Technologie verschwinden. Wer sich mit kreativer Programmierung, generativer Kunst oder fortschrittlichen AI-gesteuerten Tools beschäftigt, findet hier einen spannenden Ausblick auf die Entwicklung von morgen.
