snowcone docs

Chat Drawer

AI-powered chat interface for generating custom artwork that feeds into ProductImage.
This is an optional React convenience layer over the mockup URL primitive — the same render works as a plain <img> src in any language. See Get started.
Want the full conversational flow? This page wires a chat UI to the single-shot generate endpoint. For the complete snowcone.app/create experience — clarifying questions, catalog suggestions, mockups in the conversation, “now put it on a mug” — point a standard useChat at the chat orchestrator instead: Add an AI design chat.

See It In Action

The interactive demo below is the Chat Drawer in action. The full Art Generator recipe — wired to a real AI image generator and product gallery — ships as source you can run and adapt. It shows:

  • 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
See the next-ecommerce example →

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:

code

Complete Example

Full implementation with ChatProvider, SharedChatDrawer, and product integration:

code

Reference Implementation

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

Full Working Example

The complete implementation — AI generation, chat history, and product integration — ships as the next-ecommerce example you can run and adapt:

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.).