# heldernoid/openstitch architecture

> Architecture diagram of the GitHub repository heldernoid/openstitch, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/heldernoid/openstitch
- Repository: https://github.com/heldernoid/openstitch

## Overview

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: [`frontend/src/App.tsx`](https://github.com/heldernoid/openstitch/blob/main/frontend/src/App.tsx) (Application shell), [`frontend/src/lib/api.ts`](https://github.com/heldernoid/openstitch/blob/main/frontend/src/lib/api.ts) (Frontend API client), [`backend/src/main.py`](https://github.com/heldernoid/openstitch/blob/main/backend/src/main.py) (FastAPI application), [`backend/src/routers/generate.py`](https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/generate.py) (Screen generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Design workspace"]
  node_app["Application shell<br/>[App.tsx]"]
  node_projects["Project sidebar<br/>[ProjectSidebar.tsx]"]
  node_canvas["Infinite canvas<br/>[CanvasRoot.tsx]"]
  node_workspace["Code workspace<br/>[WorkspacePanel.tsx]"]
  node_preview["Screen preview<br/>[ScreenPreview.tsx]"]
  node_play["Play mode<br/>[PlayModeRunner.tsx]"]
  node_export["Screen export<br/>[ExportModal.tsx]"]
end

subgraph group_generation["AI generation"]
  node_landing["Generation input<br/>[LandingView.tsx]"]
  node_iteration["Screen iteration<br/>[IterationChat.tsx]"]
  node_stream["Generation stream"]
end

subgraph group_backend["Backend services"]
  node_generation_api["Screen generation<br/>[generate.py]"]
  node_app_api["App generation<br/>[generate_app.py]"]
  node_prompts["Prompt templates"]
  node_registry["Model registry<br/>[registry.py]"]
  node_api_client["Frontend API client<br/>[api.ts]"]
  node_api["FastAPI application<br/>[main.py]"]
  node_project_routes["Project routes<br/>[projects.py]"]
  node_screen_routes["Screen routes<br/>[screens.py]"]
  node_design_routes["Design systems<br/>[design_systems.py]"]
  node_skill_routes["Generation skills<br/>[skills.py]"]
end

subgraph group_persistence["Project data"]
  node_repositories["Data repositories"]
  node_database[("SQLite database<br/>[database.py]")]
end

node_user(("Designer"))
node_ollama{{"Ollama"}}
node_cloud_models{{"Cloud models"}}

node_user -->|"uses"| node_app
node_app -->|"shows"| node_projects
node_app -->|"hosts"| node_canvas
node_app -->|"hosts"| node_landing
node_app -->|"hosts"| node_workspace
node_app -->|"opens"| node_play
node_app -->|"opens"| node_export
node_landing -->|"requests generation"| node_api_client
node_iteration -->|"requests refinement"| node_api_client
node_api_client -->|"sends screen requests"| node_generation_api
node_api_client -->|"sends app requests"| node_app_api
node_generation_api -->|"uses templates"| node_prompts
node_app_api -->|"uses templates"| node_prompts
node_generation_api -->|"selects model"| node_registry
node_app_api -->|"selects model"| node_registry
node_registry -->|"dispatches"| node_ollama
node_registry -.->|"dispatches"| node_cloud_models
node_generation_api -->|"streams output"| node_stream
node_app_api -->|"streams progress"| node_stream
node_landing -->|"loads design systems"| node_design_routes
node_landing -->|"uses skills"| node_skill_routes
node_projects -->|"manages projects"| node_api_client
node_workspace -->|"saves edits"| node_api_client
node_canvas -->|"renders screens"| node_preview
node_canvas -->|"starts prototype"| node_play
node_app -->|"loads project data"| node_api_client
node_api -->|"mounts routes"| node_generation_api
node_api -->|"mounts routes"| node_app_api
node_api -->|"mounts routes"| node_project_routes
node_api -->|"mounts routes"| node_screen_routes
node_api -->|"mounts routes"| node_design_routes
node_api -->|"mounts routes"| node_skill_routes
node_project_routes -->|"accesses data"| node_repositories
node_screen_routes -->|"accesses data"| node_repositories
node_repositories -->|"reads and writes"| node_database

click node_app "https://github.com/heldernoid/openstitch/blob/main/frontend/src/App.tsx"
click node_projects "https://github.com/heldernoid/openstitch/blob/main/frontend/src/sidebar/ProjectSidebar.tsx"
click node_canvas "https://github.com/heldernoid/openstitch/blob/main/frontend/src/canvas/CanvasRoot.tsx"
click node_workspace "https://github.com/heldernoid/openstitch/blob/main/frontend/src/editor/WorkspacePanel.tsx"
click node_preview "https://github.com/heldernoid/openstitch/blob/main/frontend/src/preview/ScreenPreview.tsx"
click node_play "https://github.com/heldernoid/openstitch/blob/main/frontend/src/preview/PlayModeRunner.tsx"
click node_export "https://github.com/heldernoid/openstitch/blob/main/frontend/src/modals/ExportModal.tsx"
click node_landing "https://github.com/heldernoid/openstitch/blob/main/frontend/src/generation/LandingView.tsx"
click node_iteration "https://github.com/heldernoid/openstitch/blob/main/frontend/src/generation/IterationChat.tsx"
click node_stream "https://github.com/heldernoid/openstitch/blob/main/frontend/src/generation/GenerationStream.tsx"
click node_generation_api "https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/generate.py"
click node_app_api "https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/generate_app.py"
click node_prompts "https://github.com/heldernoid/openstitch/tree/main/backend/src/prompts"
click node_registry "https://github.com/heldernoid/openstitch/blob/main/backend/src/models/registry.py"
click node_api_client "https://github.com/heldernoid/openstitch/blob/main/frontend/src/lib/api.ts"
click node_api "https://github.com/heldernoid/openstitch/blob/main/backend/src/main.py"
click node_project_routes "https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/projects.py"
click node_screen_routes "https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/screens.py"
click node_design_routes "https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/design_systems.py"
click node_skill_routes "https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/skills.py"
click node_repositories "https://github.com/heldernoid/openstitch/tree/main/backend/src/db/repositories"
click node_database "https://github.com/heldernoid/openstitch/blob/main/backend/src/db/database.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_projects,node_canvas,node_workspace,node_preview,node_play,node_export toneBlue
class node_landing,node_iteration,node_stream toneAmber
class node_generation_api,node_app_api,node_prompts,node_registry,node_api_client,node_api,node_project_routes,node_screen_routes,node_design_routes,node_skill_routes toneMint
class node_repositories,node_database toneRose
class node_user,node_ollama,node_cloud_models toneIndigo
```

## Components

### Design workspace

- [Application shell](https://github.com/heldernoid/openstitch/blob/main/frontend/src/App.tsx): `frontend/src/App.tsx`
- [Project sidebar](https://github.com/heldernoid/openstitch/blob/main/frontend/src/sidebar/ProjectSidebar.tsx): `frontend/src/sidebar/ProjectSidebar.tsx`
- [Infinite canvas](https://github.com/heldernoid/openstitch/blob/main/frontend/src/canvas/CanvasRoot.tsx): `frontend/src/canvas/CanvasRoot.tsx`
- [Code workspace](https://github.com/heldernoid/openstitch/blob/main/frontend/src/editor/WorkspacePanel.tsx): `frontend/src/editor/WorkspacePanel.tsx`
- [Screen preview](https://github.com/heldernoid/openstitch/blob/main/frontend/src/preview/ScreenPreview.tsx): `frontend/src/preview/ScreenPreview.tsx`
- [Play mode](https://github.com/heldernoid/openstitch/blob/main/frontend/src/preview/PlayModeRunner.tsx): `frontend/src/preview/PlayModeRunner.tsx`
- [Screen export](https://github.com/heldernoid/openstitch/blob/main/frontend/src/modals/ExportModal.tsx): `frontend/src/modals/ExportModal.tsx`

### AI generation

- [Generation input](https://github.com/heldernoid/openstitch/blob/main/frontend/src/generation/LandingView.tsx): `frontend/src/generation/LandingView.tsx`
- [Screen iteration](https://github.com/heldernoid/openstitch/blob/main/frontend/src/generation/IterationChat.tsx): `frontend/src/generation/IterationChat.tsx`
- [Generation stream](https://github.com/heldernoid/openstitch/blob/main/frontend/src/generation/GenerationStream.tsx): `frontend/src/generation/GenerationStream.tsx`

### Backend services

- [Screen generation](https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/generate.py): `backend/src/routers/generate.py`
- [App generation](https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/generate_app.py): `backend/src/routers/generate_app.py`
- [Prompt templates](https://github.com/heldernoid/openstitch/tree/main/backend/src/prompts): `backend/src/prompts`
- [Model registry](https://github.com/heldernoid/openstitch/blob/main/backend/src/models/registry.py): `backend/src/models/registry.py`
- [Frontend API client](https://github.com/heldernoid/openstitch/blob/main/frontend/src/lib/api.ts): `frontend/src/lib/api.ts`
- [FastAPI application](https://github.com/heldernoid/openstitch/blob/main/backend/src/main.py): `backend/src/main.py`
- [Project routes](https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/projects.py): `backend/src/routers/projects.py`
- [Screen routes](https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/screens.py): `backend/src/routers/screens.py`
- [Design systems](https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/design_systems.py): `backend/src/routers/design_systems.py`
- [Generation skills](https://github.com/heldernoid/openstitch/blob/main/backend/src/routers/skills.py): `backend/src/routers/skills.py`

### Project data

- [Data repositories](https://github.com/heldernoid/openstitch/tree/main/backend/src/db/repositories): `backend/src/db/repositories`
- [SQLite database](https://github.com/heldernoid/openstitch/blob/main/backend/src/db/database.py): `backend/src/db/database.py`

### Other components

- **Designer**
- **Ollama**
- **Cloud models**

## Connections

- 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