How heldernoid/openstitch works
OpenStitch is a locally runnable AI UI design and prototyping tool. Users create a project, generate screens from text, screenshots, or sketches, then edit and preview the results on a canvas, link screens into flows, and export them. Full-app generation adds a shared design system and multi-screen plan; follow-up prompts support iteration. The graph reflects documented capabilities and sampled frontend/backend entry points; several backend router-to-repository and generation internals are unsampled, so uncertain internal call links are omitted.
Main entry points: App.tsx Application shell · api.ts Frontend API client · main.py FastAPI application · generate.py Screen generation
Components 25
Design workspace
- Application shell
frontend/src/App.tsx - Project sidebar
frontend/src/sidebar/ProjectSidebar.tsx - Infinite canvas
frontend/src/canvas/CanvasRoot.tsx - Code workspace
frontend/src/editor/WorkspacePanel.tsx - Screen preview
frontend/src/preview/ScreenPreview.tsx - Play mode
frontend/src/preview/PlayModeRunner.tsx - Screen export
frontend/src/modals/ExportModal.tsx
AI generation
- Generation input
frontend/src/generation/LandingView.tsx - Screen iteration
frontend/src/generation/IterationChat.tsx - Generation stream
frontend/src/generation/GenerationStream.tsx
Backend services
- Screen generation
backend/src/routers/generate.py - App generation
backend/src/routers/generate_app.py - Prompt templates
backend/src/prompts - Model registry
backend/src/models/registry.py - Frontend API client
frontend/src/lib/api.ts - FastAPI application
backend/src/main.py - Project routes
backend/src/routers/projects.py - Screen routes
backend/src/routers/screens.py - Design systems
backend/src/routers/design_systems.py - Generation skills
backend/src/routers/skills.py
Project data
- Data repositories
backend/src/db/repositories - SQLite database
backend/src/db/database.py
Other components
- Designer
- Ollama
- Cloud models
Connections 35
- Designer → Application shell: uses
- Application shell → Project sidebar: shows
- Application shell → Infinite canvas: hosts
- Application shell → Generation input: hosts
- Application shell → Code workspace: hosts
- Application shell → Play mode: opens
- Application shell → Screen export: opens
- Generation input → Frontend API client: requests generation
- Screen iteration → Frontend API client: requests refinement
- Frontend API client → Screen generation: sends screen requests
- Frontend API client → App generation: sends app requests
- Screen generation → Prompt templates: uses templates
- App generation → Prompt templates: uses templates
- Screen generation → Model registry: selects model
- App generation → Model registry: selects model
- Model registry → Ollama: dispatches
- Model registry → Cloud models: dispatches
- Screen generation → Generation stream: streams output
- App generation → Generation stream: streams progress
- Generation input → Design systems: loads design systems
- Generation input → Generation skills: uses skills
- Project sidebar → Frontend API client: manages projects
- Code workspace → Frontend API client: saves edits
- Infinite canvas → Screen preview: renders screens
- Infinite canvas → Play mode: starts prototype
- Application shell → Frontend API client: loads project data
- FastAPI application → Screen generation: mounts routes
- FastAPI application → App generation: mounts routes
- FastAPI application → Project routes: mounts routes
- FastAPI application → Screen routes: mounts routes
- FastAPI application → Design systems: mounts routes
- FastAPI application → Generation skills: mounts routes
- Project routes → Data repositories: accesses data
- Screen routes → Data repositories: accesses data
- Data repositories → SQLite database: reads and writes