What are Canvas apps?

Canvas apps are interactive web applications hosted on Poe. Unlike chat-based bots, Canvas apps provide custom visual interfaces for any kind of interactive experience. They can interact with the Poe environment in various ways - including calling models on Poe and using their responses in the app - enabling creators to develop applications ranging from simple tools and games to advanced AI-powered experiences. And using the App Creator bot, anyone can bring their ideas to life just by describing them - no coding required.

Examples of Canvas apps

• Simple (non-AI-powered) tools or games
  • Example: ColorPicker - Pick any color from your images and instantly get its HEX and RGB values.

• Custom interfaces for single AI models
  • Example: MagicErase - Remove unwanted objects from images using AI! Powered by Bria-Eraser.

Advanced AI workflows involving multiple models

• Example: Chibify - Transform any image into 3D Chibi art! Powered by GPT-4o and FLUX Pro 1.1.

• Example: MemeGenBattle - Pit AI models against each other in a meme generation showdown!

Getting started

Let's walk through the process of creating your first Canvas app:

1. Initial setup

   1. Click on the “Create” button in the left sidebar or visit poe.com/create_bot
   2. Select "Canvas app" as the type

2. Choose your creation method
   1. Generate with a bot (Recommended - the following steps assume choosing this option)
      1. Chat with App Creator and describe what you want to create
   2. Build manually
      1. Provide your own application code

3. Describe your idea to App Creator and iterate as needed

   1. Example: “Create an interactive color picker tool that allows users to upload their own images”
   2. Potential followups could be:
      1. “Add a smooth transition animation when an image is uploaded”
      2. “Show the history of chosen colors below the image”
      3. “Add a feature that uses an AI model to suggest complementary colors”
         1. or specifically e.g. “@GPT-4o-mini” instead of “an AI model”

4. Publish your app on Poe

   1. Click “Publish” in the Canvas to share your application with others

5. Editing your app
   1. To edit your app after publishing, click “Edit app” in the overflow menu of your app
   2. Click “Edit with @App-Creator” to use App Creator to iterate on the app
   3. When you’re ready to publish the application again, click “Publish” in the Canvas to update your app.

Canvas app development UI

The Canvas app development environment has two key components:

1. Chat Interface (left)
   1. Chat with App Creator here to create and iterate on your application using natural language
2. Canvas UI (right)
   1. View and interact with the application you created using App Creator immediately
   2. The top tool bar and overflow menu provides several tools such as showing the console (for viewing error or logging messages), fullscreen mode, and minimizing the Canvas UI

Working effectively with App Creator

Think of App Creator as your personal developer who can:

• Understand natural language
• Implement features within seconds or minutes
• Provide immediate feedback
• Suggest improvements

To get the best results from App Creator, clear communication is key. Here are several examples of good requests and less effective requests:

• Good requests:
  • "Create a calculator with a modern design that can perform basic math operations"
  • "Add a dark mode toggle button in the top right corner"
  • "Make the submit button larger and match the header color"
  • “Use @FLUX-pro-1.1 instead of @FLUX-schnell”
• Less effective:
  • "Make it better" (too vague)
  • "Add all the usual calculator features" (too broad)
  • "Use JavaScript to handle clicks" (unnecessarily technical)

💡

Brainstorm with App Creator

You can ask App Creator to help you brainstorm or evaluate various ideas! Try asking questions like:

• "What features would make this app more useful?"
• "What other ways could we display this data?"
• "How could we make this interface more intuitive?"

Integration with the Poe environment

Canvas apps can interact with the Poe environment via the Poe Embed API. They can:

• Trigger messages to Poe bots on behalf of the user
  • When doing this, the application can optionally open the Chat UI (if the user was in fullscreen Canvas view)
• Receive bot responses to those messages and use them in the application
  • These bot responses can be streamed back to the Canvas application without waiting for the entire response to be completed.

For example, a Canvas app could send a message to @Claude-3.5-Sonnet asking it to analyze an image, and then display that analysis within the application.

Any specific behavior - e.g. which bot to use, whether to open the chat, or whether to stream the bot response - can be specified in natural language to App Creator, which will then implement the desired behavior.

Troubleshooting

Describing issues

If you notice any issues in your application, you can generally fix them by describing the issue to App Creator. To get the best results, be as clear and specific as possible regarding the issue.

• Bad example: “It’s not working.”
• Better example: "After clicking submit, the form clears but I don't see any response from @Claude-3.5-Sonnet in the output area"

Sharing console errors

If you see any errors in the application’s console (which can be opened in the Canvas overflow menu), you can copy and paste the exact error in a message to App Creator to ask it to fix the issue. For best results, describe the steps to reproduce the error, e.g. “When I click the submit button, I see this error: …”.

Examining your application’s messages to bots

You can examine the messages that your application sends to bots by looking at the chat. This can help you identify any issues in e.g. prompting that you can ask App Creator to fix.