chat

Module: Chat App

Generated by Cicadas Bootstrap on 2026-03-22.

Purpose

The chat app (apps/chat) is a standalone React SPA that provides a conversational interface for AI-powered widget generation and interaction. It uses Vercel's AI SDK for LLM integration and embeds Patchwork's compiler and editor for inline code editing and widget preview within chat messages.

Interfaces

Exports: None (standalone application, not a library)

Entry Points:

• src/main.tsx — React root mount
• src/App.tsx — Router/layout wrapper
• src/pages/ChatPage.tsx — Main chat interface

Dependencies:

• @ai-sdk/react + ai — Vercel AI SDK for useChat hook and streaming
• @aprovan/patchwork-compiler — Widget compilation
• @aprovan/patchwork-editor — Markdown editing and code extraction
• @aprovan/stitchery — Backend server (started via dev script)
• @tiptap/react — Rich text editing in message input
• Radix UI + Tailwind CSS — UI components (ShadCN pattern)

Subsystems

Pages

• pages/ChatPage.tsx — Primary interface: message thread, input area with TipTap editor, inline widget previews, service inspector

UI Components

• components/ui/ — ShadCN-style components: Button, Card, Dialog, Input, ScrollArea, Avatar, Badge, Collapsible

Development

• scripts/start-dev.ts — Development server startup script
• data/ — Static data directory

Configuration

• Vite + React + TypeScript build
• Tailwind CSS + PostCSS for styling
• .utcp_config.json — UTCP configuration for service connections

Key Decisions

• Vercel AI SDK: Chosen for its streaming-first design and React hooks (useChat), enabling real-time LLM response rendering.
• ShadCN component pattern: UI components are copied into the project (not imported from a library), allowing full customization while maintaining consistency with the broader Patchwork design language.
• Standalone SPA: The chat app runs independently from VS Code, providing an alternative entry point for users who prefer a web-based interface over IDE integration.