Canvas for development
How to select Canvas
To use Canvas, open a new chat and select a model that supports Canvas. You’ll see Canvas availability indicated by icons in the model selector — if the Canvas icon is greyed out, that model doesn’t support Canvas.
Canvas works best with GPT-4.1 at the moment.
When using models that support Canvas, activate it by clicking the Canvas button in the input bar at the bottom of your screen. Once you activate Canvas, the button will highlight to confirm it’s active, and you can begin creating and editing in Canvas.
How to use Canvas
Canvas automatically opens on the right side after you send your prompt and the AI generates a response. You now have several options to continue.
In-line editing
You can edit the output directly in the Canvas editor on the right. You can type and modify text manually, or select specific sections to have the model reformat or rewrite just those parts.
Previewing and running code
You can execute your code directly in Canvas. Preview React components or run Python scripts without switching back to your IDE.
Look for the “Run Code” button or “Preview” toggle in the top right corner. Click either one to execute your code instantly. Canvas includes a sandboxed runtime environment that can handle both React rendering and Python execution.
Optimizing the whole text generally
Add Comments By clicking this button, the model will analyze your code structure and add inline comments explaining the logic, function purposes, and complex operations throughout your codebase.
Canvas 14 New Pn Add Logs By clicking this button, the model will automatically insert console.log statements at key execution points to help you debug your code.
Canvas 15 New Pn Fix Bugs By clicking this button, the model will analyze your code for common issues (syntax errors, logic bugs, security vulnerabilities) and automatically apply fixes where possible.
Canvas 16 New Pn Review Code By clicking this button, the LLM will analyze your code structure, and provide specific suggestions for improvement (like refactoring opportunities, performance enhancements, or best practices).
Canvas 17 New Pn
Versioning
On the top right, you’ll find a version selector that automatically saves each iteration as you refine your text. Navigate between versions to compare changes and restore any previous version that better fits your needs.
Copy and Export
Click the copy button (top right) to copy the entire text to your clipboard for pasting into your IDE or elsewhere. Alternatively, click “Export” to download the file in its native format (.py for Python scripts, .html for HTML files, .js for JavaScript, etc.).
Multiple Canvas in one Chat
You can open multiple Canvas instances in one chat session. Switch between them using the Canvas selector (top right, next to the share button) or scroll to find the specific Canvas in your chat history. Text Canvas display the Canvas icon, while Dev Canvas show a code icon for easy identification.
Related:
Canvas for writing: https://docs.langdock.com/product/chat/canvas-for-writing
Introduction to Assistants: https://docs.langdock.com/product/assistants/introduction
Responses are generated using AI and may contain mistakes.