Canvas

Canvas mode in MultitaskAI transforms your chat experience into a collaborative development environment where you can build and run interactive mini-applications using HTML, CSS, and JavaScript, or create rich markdown documents. This virtual file system allows AI agents to autonomously create, modify, and enhance your projects in real-time.

What is Canvas Mode?

Canvas mode provides a virtual file system where you can:

• Build Interactive Mini-Apps: Create fully functional HTML, CSS, and JavaScript applications
• Write Rich Markdown: Develop documentation, notes, and formatted content
• Collaborate with AI: Let AI agents autonomously build, modify, and enhance your projects
• Real-time Development: See your changes and improvements happen instantly
• File Management: Organize your projects with a complete virtual file structure

Enabling Canvas Mode

Canvas mode can only be enabled when creating a new chat session. Once a chat is started without Canvas mode, this option becomes unavailable for that conversation.

To enable Canvas mode:

1. Start a New Chat
   Click on New Chat or use the keyboard shortcut to create a fresh conversation.

2. Enable Canvas Before First Message
   Before sending your first message, look for the Canvas button in the chat input area at the bottom and click it to enable Canvas mode.

3. Begin Your Project
   Once enabled, you can start requesting AI assistance to build applications, create files, or develop markdown content.

Important: Canvas mode must be enabled at the start of a new chat. You cannot activate it mid-conversation or in existing chats.

Building with Canvas

Canvas mode enables several types of development workflows:

HTML/CSS/JavaScript Applications

Create interactive web applications directly within the chat:

Create a simple calculator app with HTML, CSS, and JavaScript

The AI will autonomously:

• Generate the HTML structure
• Style the interface with CSS
• Implement functionality with JavaScript
• Test and refine the application

Markdown Documents

Develop rich, formatted documents:

Create a project documentation with sections for setup, API reference, and examples

The AI can:

• Structure your content with proper headings
• Add code blocks, tables, and lists
• Format complex documentation
• Include links and references

File Organization

The virtual file system allows for proper project structure:

• Create multiple files and folders
• Organize related components
• Maintain clean project architecture
• Reference files across your project

Working with AI Agents in Canvas

In Canvas mode, AI agents become your development partners:

Autonomous Development: Agents can independently create, modify, and improve your code without constant direction.

Real-time Collaboration: Watch as the AI builds your application step by step, making improvements and adjustments.

Intelligent Suggestions: The AI can propose enhancements, fix bugs, and optimize your code automatically.

Context Awareness: Agents understand your project structure and maintain consistency across files.

Tips for Effective Canvas Use

To maximize your Canvas mode experience:

Start with Clear Goals
Define what you want to build before beginning. The clearer your initial request, the better the AI can assist.

Iterate and Improve
Don't hesitate to ask the AI to enhance, modify, or completely restructure your project.

Leverage AI Autonomy
Let the AI take initiative in suggesting improvements, optimizations, and new features.

Organize Your Project
Use proper file organization from the start to maintain clean project structure.

Canvas mode represents the future of AI-assisted development, where artificial intelligence becomes a true collaborative partner in creating interactive applications and rich content.