p5js-ai-editor

Name: p5js-ai-editor
Availability: InStock
Author: Adil Moujahid

A modern, web-based IDE for creating and editing p5.js sketches with AI assistance and Model Context Protocol (MCP) integration for Claude Desktop.

GitHub

GitHub Stars

User Rating

Not Rated

Forks

Issues

Views

Favorites

README

p5.js AI Editor

A modern, web-based IDE for creating and editing p5.js sketches with AI assistance and Model Context Protocol (MCP) integration for Claude Desktop.

Demo: Claude Desktop controlling the p5.js editor through natural language prompts via MCP server

Features

🎨 Full-Featured p5.js Editor

Live preview with instant code execution
File management (create, delete, rename files and folders)
Tabbed interface for multiple files
Start/Stop execution controls with visual indicators
Auto-save functionality

🔍 Development Tools

Real-time console with error display and console.log output
Color-coded log messages (errors, warnings, info)
Resizable panels with optimal workflow layout
Auto-scroll console with clear functionality

📁 Project Management

Multi-project support with dashboard view
Project cards with preview, metadata, and actions
Duplicate and delete projects
Auto-save to localStorage with project isolation
Dynamic routing (/ for dashboard, /project/[id] for editing)

🤖 Claude Desktop Integration (MCP)

TypeScript MCP Server: Control your editor directly from Claude Desktop
13 AI Tools: Code updates, execution control, file management, UI control
Natural Language Commands: "Update the code to create a bouncing ball"
Real-time WebSocket Bridge: Instant communication between Claude and your editor
Project State Sharing: Claude can see and modify your current project

Getting Started

Prerequisites

Node.js 18+
npm, yarn, pnpm, or bun
Claude Desktop app

Installation

Clone the repository

git clone <repository-url>
cd p5js-ai-editor

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
Open the application
- Navigate to http://localhost:3000
- The dashboard will show your projects or allow you to create a new one

Claude Desktop Integration Setup

1. Build the MCP Server

cd p5js-mcp-server-ts
npm install
npm run build

2. Configure Claude Desktop

Generate configuration:

cd p5js-mcp-server-ts
node setup-claude.cjs

Copy the configuration output
Add to Claude Desktop:
- Open Claude Desktop
- Go to Settings (Claude menu → Settings)
- Click Developer tab
- Click "Edit Config"
- Paste the configuration
- Save and restart Claude Desktop

3. Complete Workflow

Start all components in this order:

Start the webapp:

npm run dev  # Runs on http://localhost:3000

Start the WebSocket bridge:

node websocket-bridge-server.js  # Runs on port 3001

Open your project:
- Go to http://localhost:3000
- Open or create a project
- Click "Enable MCP" button
Use Claude Desktop:
- Open Claude Desktop
- Look for the hammer icon (🔨) in the chat input
- Try commands like:
  - "Update the code to create a bouncing ball animation"
  - "Clear the console and start execution"
  - "Create a new file called 'utils.js'"

MCP Tools Available in Claude Desktop

🛠️ Code Management

update_code: Update p5.js code in the editor
select_file: Switch to a specific file
create_file: Create new files
delete_file: Delete files

▶️ Execution Control

start_execution: Start code execution
stop_execution: Stop code execution
toggle_execution: Toggle execution state

📱 Console Management

clear_console: Clear console messages
add_console_message: Add custom messages to console

🎛️ Layout Control

toggle_sidebar: Show/hide file explorer
update_project_name: Change project name

🧭 Navigation & System

go_to_dashboard: Navigate back to dashboard
check_connection: Check WebSocket connection status

💬 Example Commands for Claude

"Update the code to create a colorful particle system"
"Clear the console and start execution"
"Create a new file called 'particles.js' with a basic particle class"
"Toggle the sidebar and check the connection status"
"Stop execution and update the project name to 'My Art Project'"

Architecture

Claude Desktop ↔ MCP Server (TypeScript) ↔ WebSocket Bridge ↔ p5.js Editor

Claude Desktop: Connects to MCP Server via stdio transport
MCP Server: Translates natural language into WebSocket commands
WebSocket Bridge: Forwards commands between MCP server and webapp
p5.js Editor: Receives commands and updates UI/code in real-time

WebSocket Testing (Development)

For testing without Claude Desktop, use the interactive test server:

node test-websocket-server.js

Test Commands

Command	Description
`1-6`	Send predefined p5.js code samples
`start/stop/toggle`	Control execution
`clearconsole`	Clear console messages
`sidebar`	Toggle file explorer
`status`	Show connection status

Project Structure

p5js-ai-editor/
├── app/                          # Next.js app directory
│   ├── project/[id]/            # Dynamic project routes
│   └── page.tsx                 # Dashboard page
├── components/
│   ├── dashboard-ui/            # Dashboard components
│   ├── editor-ui/               # Editor components
│   │   └── WebSocketListener.tsx # MCP WebSocket client
│   └── ui/                      # Shared UI components
├── p5js-mcp-server-ts/          # TypeScript MCP Server
│   ├── src/index.ts             # Main MCP server
│   ├── dist/                    # Compiled output
│   └── setup-claude.cjs         # Claude Desktop setup script
├── websocket-bridge-server.js   # WebSocket bridge server
├── test-websocket-server.js     # Development test server
└── README.md

Development

Architecture

Frontend: Next.js 14 with App Router
UI Framework: Shadcn UI + TailwindCSS
State Management: React useState with localStorage persistence
WebSocket: Socket.IO client/server
MCP Integration: TypeScript SDK with stdio transport
Code Editor: HTML textarea (ready for Monaco/CodeMirror integration)
Preview: Iframe with p5.js CDN injection

Key Components

ProjectDashboard: Main landing page with project overview
ProjectManager: Core editor with file management and layout
WebSocketListener: Handles MCP server connections and code updates
Console: Real-time log display with message categorization
Preview: Sandboxed p5.js execution environment

API Reference

WebSocket Events

MCP Server → WebSocket Bridge → Webapp

Code Updates:
- codeUpdate: Update editor code
```
{ code: string }
```
Execution Control:
- startExecution, stopExecution, toggleExecution

Console Control:

clearConsole

addConsoleMessage: Add console message

{ type: 'info'|'warn'|'error', message: string, timestamp: number }

File Control:
- selectFile: Switch to file ("sketch.js")
- createFile: Create new file ({ name: string, content: string })
- deleteFile: Delete file ("filename.js")
Layout Control:
- toggleSidebar, updateProjectName, backToDashboard

localStorage Schema

interface Project {
  id: string;
  name: string;
  files: { [filename: string]: string };
  openTabs: string[];
  activeTab: string;
  createdAt: string;
  lastModified: string;
}