​

Design Studio

​

Overview

• Streaming AI responses via Vercel AI SDK
• Multi-image generation with automatic garment detection
• Design isolation for print-ready graphics
• Inline actions for saving, upscaling, and production

​

How It Works

​

Conversation Flow

1. Select a garment from /garments (optional but recommended)
2. Describe your design in natural language
3. AI generates mockups showing your design on the garment
4. Iterate with follow-up prompts (“make it bigger”, “change the color”)
5. Save designs you like to your Gallery

​

Example Prompts

Create a vintage surf shop logo with palm trees and waves

Add a small pocket-sized emblem on the left chest,
minimalist line art style

Design a 90s streetwear graphic with bold colors,
graffiti-style text saying "URBAN JUNGLE"

Make the text larger and move it to the center.
Change the background color to navy blue.

​

AI System Prompt

// lib/ai/systemPrompt.ts
You are GARMINT's senior print director.
- Always acknowledge the selected garment, fabric, and finish
- Use the generateMockup tool for visual changes
- Save iterations when the user approves output

DESIGN PLACEMENT & SIZING:
- SIZE: "large/oversized", "medium", "small/pocket-sized", "full/all-over"
- POSITION: "center chest", "left chest/pocket area", "back", etc.
- Default: medium size centered on chest

Respond in a concise, technical tone highlighting ink types,
print placements, and production readiness.

​

Two-Step Generation

​

Step 1: Design Graphic

• Isolated artwork on white/transparent background
• Square format (1:1 aspect ratio)
• Ready for print production

​

Step 2: Mockup Composite

• Design placed on the selected garment
• Professional product photography style
• Design stays within printable bounds

// The AI automatically:
const result = await generateUnified({
  prompt: userPrompt,
  garmentUrls: [selectedGarment.previewUrl],
  mockupCount: 1,
});

// Returns:
{
  mockups: ["https://...mockup.png"],     // Design on garment
  graphicUrl: "https://...graphic.png",   // Isolated design
  jobId: "job_xxx",
  provider: "replicate"
}

​

Garment Context

// From sessionStorage after garment selection
{
  title: "Classic Heavyweight Tee",
  color: "Black",
  fabric: "100% Cotton",
  previewUrl: "https://..."
}

• Reference the specific garment in responses
• Match design placement to garment style
• Consider fabric/color in design suggestions

​

Image Attachments

• Reference images: “Create something like this” + image
• Existing designs: “Put this logo on the shirt” + logo file
• Style guides: “Use colors from this palette” + image

• Design images: Existing artwork to place on garment
• Reference images: Style inspiration (not placed directly)

​

Inline Actions

​

Token Consumption

• Background removal: 3 tokens
• Upscale: 1 token

​

Thread Management

• Auto-save: Messages persist automatically
• History: Access previous threads from sidebar
• Archive: Hide threads without deleting
• Delete: Permanently remove thread and messages

​

Technical Details

​

API Endpoint

// POST /api/chat
{
  prompt: string;
  images?: string[];           // Legacy attachment format
  garmentUrls?: string[];      // Explicit garment images
  designUrls?: string[];       // Explicit design/reference images
  model?: "nano-banana" | "nano-banana-pro";
  threadId?: string;
}

​

State Management

const [messages, setMessages] = useState<Message[]>([]);
const [pendingAttachments, setPendingAttachments] = useState<Attachment[]>([]);
const [isStreaming, setIsStreaming] = useState(false);