p5.js AI Editor is a web-based creative coding environment that lets you build and interact with p5.js sketches with real-time AI assistance powered by the Model Context Protocol (MCP). It combines a full editor, live preview, console output, file management, and AI control via natural language through Claude Desktop, enabling a conversational coding experience.
The p5.js AI Editor is designed to bridge creative coding and AI interaction. Users can write, run, and manage p5.js code in the browser while an AI agent controls the editor through defined MCP tools. This lets you describe changes in plain language—such as “add a bouncing ball animation” or “create a new file”—and have the environment update your sketch accordingly. It includes multi-file support, tabbed editing, live sketch previews, and a real-time console. The AI integration uses an MCP server that exposes editor actions over WebSockets so Claude Desktop can directly modify code, run sketches, manage files, and clear output. The project explores the future of AI-augmented coding workflows and demonstrates how conversational agents can act as collaborators within development tools.
