Chat Drawer

AI-powered chat interface for generating custom artwork that feeds into ProductImage.

See It In Action

The best way to experience the Chat Drawer is to try the full working example in the Art Generator demo. Open it at localhost:8203 to see:

  • AI-powered artwork generation from text prompts
  • Generated artwork automatically appearing in the gallery
  • Artwork applied to products in real-time
  • Full chat history and conversation flow
Open Art Generator Demo →

Demo

Click the sparkle button in the artwork gallery below to open the chat drawer. After generating artwork, you'll see it appear in the list:

Artwork Gallery

Try generating artwork by describing what you want. The AI will create custom designs that appear in the gallery and can be applied to products.

How It Works

The Chat Drawer enables users to generate custom artwork via AI and apply it to products. The integration has two key steps:

  1. Generate and host the image - Call your AI image generation API (Nano Banana, OpenAI, Midjourney, etc.) and upload the result to public storage (Cloudflare R2, Google Cloud Storage, AWS S3, etc.) to get a public URL.
  2. Add artwork to your state - Create an ArtworkData object with the public URL and add it to your artwork list. The artwork automatically appears in the gallery and can be applied to products.

Core Integration

Here's the essential code showing the two-step process:

Complete Example

Full implementation with ChatProvider, SharedChatDrawer, and product integration:

Reference Implementation

The ChatDrawer is a complete recipe example showing how to integrate AI-generated artwork into your Merchify application. It's not a standalone installable component, but rather a reference implementation you can adapt to your needs.

Full Working Example

See the complete implementation with AI generation, chat history, and product integration:

To build your own, you'll need to set up an AI image generation API (Nano Banana, OpenAI, Midjourney, etc.) and cloud storage for hosting generated images (Cloudflare R2, Google Cloud Storage, AWS S3, etc.).