Describe what you want to change or add to your P5.js sketch
Basic Shapes
๐ต In your codeโ Click when comfortable
Continue Learning?
๐ง Developer Console
Press Ctrl+` to toggle
Most Recent LLM Prompt
No prompt generated yet
Length: 0 charsGenerated: Never
Application State
Click refresh to load state
Learning Context
Click refresh to load ontology info
Console Logs
No logs captured yet
๐ Welcome to Vibe Coding Instructor
Learn to code creatively with P5.js and AI assistance! This tool helps you build visual coding skills progressively, starting with simple concepts and growing your abilities step by step.
๐
1. Set up your API key
Click the ๐ API Settings button in the top toolbar to configure your OpenAI API key. This enables AI-powered code generation.
๐ญ
2. Chat with the AI assistant
Use the chat panel to ask for help, request code changes, or learn new concepts. The AI will generate code appropriate to your current skill level.
๐จ
3. Create and experiment
Write code in the editor and see your creations come to life in the canvas. Use undo/redo, save your work, and build progressively more complex projects.
๐ก Quick Tips:
Start with simple requests like "draw a circle" or "add some colors"
The AI learns what you know and suggests appropriate next steps
Your progress is saved automatically in your browser
Use the menu for importing/exporting your projects
๐ API Settings
Current Status
No API key configured
Provider: Model: Key:
Choose Provider
Enter API Key
๐ Setup Instructions
Test Results
๐ Need Help?
Why do I need an API key?
API keys allow you to use your own account with AI providers. This gives you:
Control over your usage and costs
Access to the latest models
Better privacy and security
Security: Your API key is stored securely in your browser session and never saved permanently.
๐ฑ Choose Your Next Learning Adventure
๐
Network Connection Issues
Unable to load essential resources. Please check your internet connection and try refreshing the page.