> ## Documentation Index
> Fetch the complete documentation index at: https://docs.prisme.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas

> Master the collaborative content creation workspace in Chat

<Frame>
  <img src="https://mintcdn.com/prismeai/8xFvWBRROT1C5VcB/images/securechat-conversation-active.png?fit=max&auto=format&n=8xFvWBRROT1C5VcB&q=85&s=e598a13bcd99ec17232ce396384fc0a9" alt="Chat Canvas" width="1200" height="813" data-path="images/securechat-conversation-active.png" />
</Frame>

Prisme.ai Canvas is Chat’s powerful collaborative workspace for content creation—keeping all data securely within your infrastructure. It provides a rich environment for drafting, editing, and refining content with AI assistance, whether you're creating written documents, code, or visual presentations.

## Overview

Canvas transforms AI Agents from a conversational interface into a full-featured workspace where you can:

* Create polished documents and content
* Develop and test code
* Collaborate with colleagues
* Get AI assistance throughout the creative process

## Key Features

<CardGroup cols={2}>
  <Card title="Rich Content Editor" icon="text-size">
    Create formatted text with advanced styling options
  </Card>

  <Card title="AI-Assisted Editing" icon="wand-magic-sparkles">
    Get contextual suggestions and assistance as you work
  </Card>

  <Card title="Code Workspace" icon="code">
    Develop, test, and visualize code with syntax highlighting
  </Card>

  <Card title="Collaborative Editing" icon="users">
    Work together with colleagues in real-time
  </Card>

  <Card title="Multiple Export Options" icon="file-export">
    Save your work in various formats
  </Card>

  <Card title="Version History" icon="clock-rotate-left">
    Track changes and revert when needed
  </Card>

  <Card title="Content Templates" icon="rectangle-list">
    Start from pre-designed formats for common content types
  </Card>

  <Card title="Seamless Chat Integration" icon="comments">
    Switch between conversation and Canvas modes
  </Card>
</CardGroup>

## Accessing Canvas

<Steps>
  <Step title="Open Canvas from conversation">
    Click the Canvas button in the message input area of any AI agent conversation.
  </Step>

  <Step title="Select workspace type">
    AI detects the type of Canvas workspace you want to open depending on your request.

    Options include:

    * **Document** - For text-focused content
    * **Code** - For programming and development
    * **Visual** - For design-oriented content (where available)
  </Step>
</Steps>

## Canvas for Non-Technical Users

Canvas provides a rich environment for creating and editing text documents:

<Frame>
  <img src="https://mintcdn.com/prismeai/8xFvWBRROT1C5VcB/images/securechat-canvas-heatmap.png?fit=max&auto=format&n=8xFvWBRROT1C5VcB&q=85&s=ba32b8232c18094cbf4d8a084ddd1e56" alt="Canvas Workspace" width="1728" height="940" data-path="images/securechat-canvas-heatmap.png" />
</Frame>

### Document Creation Features

<Tabs>
  <Tab title="Text Formatting">
    Canvas offers comprehensive text formatting options:

    * Headings and subheadings
    * Bold, italic, underline, strikethrough
    * Bullet and numbered lists
    * Block quotes and code blocks
    * Tables and dividers
    * Text alignment and indentation
    * Font selection and sizing
    * Text and background colors
  </Tab>

  <Tab title="Layout Options">
    Control the structure and appearance of your documents:

    * Multiple columns
    * Page breaks
    * Headers and footers
    * Margins and spacing
    * Embedded content blocks
    * Collapsible sections
    * Sidebars and callouts
  </Tab>

  <Tab title="Content Elements">
    Enhance your documents with various elements:

    * Images and illustrations
    * Charts and graphs
    * Dividers and spacers
    * Embedding links and references
    * Call-out boxes and sidebars
    * File attachments
    * Footnotes and endnotes
  </Tab>

  <Tab title="Document Structure">
    Organize complex documents effectively:

    * Automatic table of contents
    * Section navigation
    * Document outline view
    * Heading hierarchy
    * Page numbering
    * Cross-references
  </Tab>
</Tabs>

### AI Assistance for Content Creation

Access AI capabilities through the context menu (right-click or use the ⋮ button):

<AccordionGroup>
  <Accordion title="Generate Content">
    Ask the AI to create new content based on your instructions:

    Example prompts:

    ```
    Write an introduction about renewable energy trends

    Create a professional bio based on these key points

    Generate three different conclusions for this report

    Draft email announcing the new product launch
    ```

    The AI will generate content directly in your document where you can further edit and refine it.
  </Accordion>

  <Accordion title="Edit & Improve">
    Get AI help to enhance your existing content:

    Editing options include:

    * **Rewrite** - Completely rework the selected text
    * **Improve** - Enhance clarity and quality while preserving meaning
    * **Summarize** - Create a shorter version of the selected content
    * **Expand** - Add more detail and depth to brief content
    * **Fix grammar & spelling** - Correct errors while preserving style
  </Accordion>

  <Accordion title="Change Style & Tone">
    Adjust the voice and style of your content:

    You can modify content to be:

    * More formal or casual
    * Technical or simplified
    * Persuasive or informative
    * Concise or detailed
    * Enthusiastic or reserved

    You can also specify target audiences like "executives," "technical audience," or "general public."
  </Accordion>

  <Accordion title="Translate">
    Convert your content to different languages:

    Features include:

    * Translation to major world languages
    * Preservation of formatting during translation
    * Ability to specify formality level
    * Culturally appropriate adaptations (optional)
  </Accordion>
</AccordionGroup>

### Intelligent Context Menu

The context menu provides intelligent suggestions based on your selected canvas:

For example:

* When selecting a canvas, you might see options for rewriting or improving
* When selecting a canvas, you might see options for generating content beneath it
* When selecting an canvas, you might see options for completing it
* When selecting a canvas, you might see options for polish it for a final version

## Canvas for Technical Users

The Code workspace in Canvas is optimized for software development and technical content:

<Frame>
  <img src="https://mintcdn.com/prismeai/8xFvWBRROT1C5VcB/images/securechat-conversation-active.png?fit=max&auto=format&n=8xFvWBRROT1C5VcB&q=85&s=e598a13bcd99ec17232ce396384fc0a9" alt="Canvas Code Workspace" width="1200" height="813" data-path="images/securechat-conversation-active.png" />
</Frame>

### Code Development Features

<Tabs>
  <Tab title="Editor Capabilities">
    The code editor includes:

    * Syntax highlighting for multiple languages
    * Line numbering and code folding
    * Automatic indentation
    * Bracket matching
    * Error and warning indicators
    * Code completion suggestions
    * Multi-cursor editing
    * Find and replace functionality
  </Tab>

  <Tab title="Execution Environment">
    Test your code within Canvas:

    * Interactive REPL for supported languages
    * Output console for viewing results
    * Execution environment for JavaScript/TypeScript
    * Variable inspection
    * Performance timing information
  </Tab>

  <Tab title="Live Preview">
    For web development:

    * Real-time HTML/CSS/JavaScript preview
    * Responsive design simulation
    * Interactive elements testing
    * DOM inspection
    * Console output
  </Tab>

  <Tab title="Visual Tools">
    Visualize data and concepts:

    * Chart and graph rendering
    * Data visualization tools
    * Diagram generation (UML, ERD, etc.)
    * Color pickers and design aids
  </Tab>
</Tabs>

### AI Assistance for Code Development

The specialized context menu for code offers:

<AccordionGroup>
  <Accordion title="Generate Code">
    Create new code based on your specifications:

    Example prompts:

    ```
    Write a function to calculate the Fibonacci sequence

    Create a React component for a responsive navigation bar

    Implement a sorting algorithm that handles duplicates efficiently

    Build an API endpoint for user authentication
    ```

    The AI will generate functional code that you can directly test in the execution environment.
  </Accordion>

  <Accordion title="Improve Code">
    Enhance existing code quality and functionality:

    Improvement options include:

    * **Optimize** - Make code more efficient
    * **Refactor** - Restructure for better readability and maintainability
    * **Debug** - Find and fix errors
    * **Complete** - Finish partial implementations
    * **Add Error Handling** - Implement robust error checking
  </Accordion>

  <Accordion title="Documentation">
    Generate documentation for your code:

    Documentation features:

    * Generate comments for functions and classes
    * Create JSDoc/Docstring style documentation
    * Write README files
    * Explain complex algorithms
    * Generate usage examples
  </Accordion>

  <Accordion title="Testing">
    Create tests for your code:

    Testing capabilities:

    * Generate unit tests
    * Create test cases for edge conditions
    * Build integration tests
    * Implement mocks and fixtures
    * Write test documentation
  </Accordion>

  <Accordion title="Convert & Adapt">
    Transform code between languages and frameworks:

    Conversion options:

    * Port code to different programming languages
    * Convert between frameworks (e.g., React to Vue)
    * Update code to newer language versions
    * Transform between paradigms (e.g., imperative to functional)
  </Accordion>
</AccordionGroup>

### Specialized Code Tools

<Tabs>
  <Tab title="Version Comparison">
    Compare different versions of your code:

    * Side-by-side diff view
    * Highlighted changes
    * Change history tracking
    * Conflict resolution assistance
  </Tab>

  <Tab title="Dependency Management">
    Manage project dependencies:

    * Suggest appropriate packages
    * Update dependency versions
    * Check for security vulnerabilities
    * Generate package configuration files
  </Tab>

  <Tab title="Debugging Assistance">
    Get help with code troubleshooting:

    * Explanation of error messages
    * Runtime issue analysis
    * Step-by-step debugging guidance
    * Fix suggestions for common problems
  </Tab>
</Tabs>

## Multimodal Capabilities in Canvas

When using Canvas with compatible LLM models, you can work with images and visual content:

### Working with Images

<Steps>
  <Step title="Import images">
    Add images to your Canvas workspace using the import button or by pasting directly.

    Supported image formats include PNG, JPG, JPEG, GIF, and SVG.
  </Step>

  <Step title="Analyze visual content">
    Get AI assistance understanding and working with images:

    Image analysis capabilities:

    * Detailed descriptions of image content
    * Text extraction from images (OCR)
    * Chart and graph data extraction
    * Object and entity recognition
    * Visual concept explanation
  </Step>

  <Step title="Edit and transform">
    Modify images or generate new visual content:

    Basic image operations supported:

    * Cropping and resizing
    * Simple adjustments (brightness, contrast)
    * Text addition to images
    * Image generation from textual descriptions (with compatible models)
    * Basic diagram creation
  </Step>
</Steps>

## Collaboration Features

Work together with colleagues in the Canvas workspace:

### Real-Time Collaboration (available soon)

<Steps>
  <Step title="Share your Canvas">
    Invite others to collaborate on your Canvas workspace:

    Sharing options:

    * View-only access
    * Comment access
    * Edit access
    * Time-limited collaboration
  </Step>

  <Step title="Collaborate in real-time">
    Work simultaneously with colleagues:

    Collaboration features:

    * See others' cursors and selections
    * View changes as they happen
    * User presence indicators
    * Collision prevention
  </Step>

  <Step title="Comment and discuss">
    Add comments and feedback directly in the document:

    Comment capabilities:

    * Add comments to any part of the content
    * Tag specific collaborators
    * Reply to existing comments
    * Resolve comment threads
    * Comment notifications
  </Step>
</Steps>

### Version Control

<Accordion title="Track changes">
  Keep a history of all modifications to your Canvas content:

  Version history features:

  * Automatic saving at regular intervals
  * Named versions for significant milestones
  * Complete change history
  * Author tracking for each change
  * Timestamp information
</Accordion>

<Accordion title="Restore previous work">
  Revert to earlier versions when needed:

  Restoration options:

  * Restore the entire document to a previous state
  * Selectively restore specific sections or elements
  * Create a new branch from an older version
  * Merge changes from different versions
</Accordion>

## Exporting Canvas Content

Save your work in various formats for use outside of Chat:

### Document Export Formats

<CardGroup cols={3}>
  <Card title="Word (.docx)" icon="file-word">
    Editable Microsoft Word document
  </Card>

  <Card title="Markdown" icon="markdown">
    Text-based markup for maximum compatibility
  </Card>

  <Card title="HTML" icon="file-code">
    Web page format for online sharing
  </Card>

  <Card title="Plain Text" icon="file-lines">
    Simple text format without formatting
  </Card>
</CardGroup>

### Presentation Export Formats

When an agent with the **Deck Designer** capability builds a slide deck, the canvas renders a live preview and exports it client-side:

<CardGroup cols={2}>
  <Card title="PowerPoint (.pptx)" icon="file-powerpoint">
    Editable native shapes and text — open in PowerPoint, Google Slides, or Keynote
  </Card>

  <Card title="PDF" icon="file-pdf">
    Pixel-perfect, landscape 16:9, one page per slide
  </Card>
</CardGroup>

See [Slides & Deck Designer](/products/agent-factory/slides) for how to add deck building to any agent and customize themes.

### Code Export Formats

<CardGroup cols={3}>
  <Card title="Source Files" icon="file-code">
    Raw source code files (.js, .py, etc.)
  </Card>

  <Card title="GitHub Gist" icon="github">
    Share code snippets via GitHub
  </Card>

  <Card title="CodePen/JSFiddle" icon="codepen">
    Interactive web code environments
  </Card>

  <Card title="Markdown" icon="markdown">
    Code with documentation in markdown format
  </Card>

  <Card title="Executable Script" icon="terminal">
    Runnable scripts with appropriate shebangs
  </Card>
</CardGroup>

## Best Practices for Canvas

<CardGroup cols={2}>
  <Card title="Start with a Clear Structure" icon="sitemap">
    Begin with an outline or template to organize your content effectively.
  </Card>

  <Card title="Use AI Throughout the Process" icon="robot">
    Leverage AI assistance at different stages, not just for initial generation.
  </Card>

  <Card title="Iterate and Refine" icon="arrows-rotate">
    Use multiple rounds of feedback and improvement rather than expecting perfection immediately.
  </Card>

  <Card title="Combine Human and AI Strengths" icon="handshake">
    Provide creative direction and critical thinking while letting AI handle repetitive tasks.
  </Card>

  <Card title="Save Versions at Milestones" icon="flag-checkered">
    Create named versions at significant points to track progress and enable rollback if needed.
  </Card>

  <Card title="Test Code Thoroughly" icon="vial-circle-check">
    Use the execution environment to verify that generated code works as expected.
  </Card>

  <Card title="Customize Output for Your Brand" icon="paintbrush">
    Adapt AI-generated content to match your organization's voice and style.
  </Card>

  <Card title="Export in Multiple Formats" icon="file-export">
    Save your work in different formats for various use cases and platforms.
  </Card>
</CardGroup>

## Canvas vs. Chat Mode: When to Use Each

<Tabs>
  <Tab title="Use Canvas When...">
    <CheckList>
      <Check>Creating longer, structured content like reports or articles</Check>
      <Check>Developing code that requires testing and iteration</Check>
      <Check>Collaborating with others on a document or project</Check>
      <Check>Working on content that requires precise formatting</Check>
      <Check>Building something that will be exported for external use</Check>
      <Check>Creating templates for repeated use</Check>
      <Check>Working on multi-stage creative projects</Check>
      <Check>Needing to preserve version history</Check>
    </CheckList>
  </Tab>

  <Tab title="Use Chat Mode When...">
    <CheckList>
      <Check>Asking quick questions or getting brief information</Check>
      <Check>Having a flowing conversation about a topic</Check>
      <Check>Brainstorming initial ideas</Check>
      <Check>Getting help troubleshooting a problem</Check>
      <Check>Processing documents for information extraction</Check>
      <Check>Needing rapid back-and-forth interaction</Check>
      <Check>Working across multiple unrelated topics</Check>
      <Check>Conducting research or exploration</Check>
    </CheckList>
  </Tab>
</Tabs>

## Troubleshooting Common Canvas Issues

<AccordionGroup>
  <Accordion title="Performance slowdowns">
    If Canvas becomes slow or unresponsive:

    * Reduce the amount of content in a single Canvas (break into smaller documents)
    * Close other browser tabs and applications
    * Disable real-time preview for large code projects
    * Limit the number of embedded images and complex elements
    * Consider saving your work and starting a fresh Canvas
  </Accordion>

  <Accordion title="Formatting problems">
    If you experience issues with formatting:

    * Try selecting the problematic content and applying formatting again
    * Use the "Clear formatting" option and reapply styles
    * Check for conflicting style settings
    * For persistent issues, copy the content to a new Canvas
    * Use simpler formatting for better compatibility
  </Accordion>

  <Accordion title="Code execution errors">
    When code fails to execute properly:

    * Check the console for specific error messages
    * Verify syntax for the specific language you're using
    * Ensure all dependencies are properly imported
    * Try running smaller code segments to isolate the issue
    * Use the AI to help debug by selecting the error and asking for assistance
  </Accordion>

  <Accordion title="Collaboration conflicts">
    If multiple users experience editing conflicts:

    * Establish clear sections for different collaborators
    * Use the comments feature instead of simultaneous editing in the same area
    * Take turns editing sensitive parts of the document
    * Save versions frequently during collaborative sessions
    * Consider using Canvas sharing with view/comment permissions for larger groups
  </Accordion>
</AccordionGroup>

## Next Steps

Now that you understand Canvas in Chat, explore related features:

<CardGroup cols={3}>
  <Card title="Document Handling" icon="file-lines" href="./document-handling">
    Work with uploaded documents and files
  </Card>

  <Card title="Conversation Management" icon="messages" href="./conversation-management">
    Organize and manage your chat interactions
  </Card>

  <Card title="Multimodal" icon="photo-film" href="./multimodal">
    Explore image processing capabilities
  </Card>

  <Card title="Slides & Deck Designer" icon="file-powerpoint" href="/products/agent-factory/slides">
    Build on-brand decks with editable PPTX/PDF export
  </Card>
</CardGroup>