# deepseek-ai/chat-demo architecture

> Architecture diagram of the GitHub repository deepseek-ai/chat-demo, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/deepseek-ai/chat-demo
- Repository: https://github.com/deepseek-ai/chat-demo

## Overview

chat-demo is a static browser chat client that connects directly to a configured DeepSeek-compatible API. The principal workflow runs from the user-facing app through conversation state, attachment handling and streamed API replies, then presents messages and rendered content. Separate capabilities cover conversation history and branching, search and citations, speech, settings, and import/export. Edges reflect the excerpts, SOURCE INDEX references, or README statements; several UI-to-service details are not shown and are therefore omitted.

Main entry points: [`src/services/chat/store.ts`](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/store.ts) (Chat state), [`src/services/api/client.ts`](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/api/client.ts) (API client), [`src/app/App.tsx`](https://github.com/deepseek-ai/chat-demo/blob/main/src/app/App.tsx) (App shell), [`src/services/attachments.ts`](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/attachments.ts) (Attachment handling)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Application interface"]
  node_app["App shell<br/>[App.tsx]"]
  node_sessionview["Session view<br/>[SessionView.tsx]"]
  node_chatinput["Chat input<br/>[ChatInput.tsx]"]
  node_messages["Message display"]
  node_viewport["Mobile viewport<br/>[viewport.ts]"]
end

subgraph group_conversation["Conversation lifecycle"]
  node_chatstore["Chat state<br/>[store.ts]"]
  node_chatdb[("Conversation storage<br/>[db.ts]")]
  node_branches["Message branches<br/>[branches.ts]"]
  node_chatview["Conversation views<br/>[view.ts]"]
  node_history["History archives"]
end

subgraph group_services["API and media services"]
  node_attachments["Attachment handling<br/>[attachments.ts]"]
  node_api["API client<br/>[client.ts]"]
  node_eventparse["Stream event parsing<br/>[parseEvent.ts]"]
  node_speechapi["Speech API<br/>[speech.ts]"]
  node_uploadformats["Upload formats<br/>[uploadExts.ts]"]
end

subgraph group_capabilities["Chat capabilities"]
  node_markdown["Markdown rendering<br/>[Markdown.tsx]"]
  node_search["Search panel<br/>[SearchPanel.tsx]"]
  node_voiceinput["Voice input<br/>[useVoiceInput.ts]"]
  node_recorder["Audio recorder<br/>[recorder.ts]"]
  node_readaloud["Read-aloud playback<br/>[readAloud.ts]"]
end

subgraph group_preferences["Preferences and localization"]
  node_settings[("Settings<br/>[settings.ts]")]
  node_apikey["API key form<br/>[useApiKeyForm.ts]"]
  node_locale["Translations<br/>[index.ts]"]
end

node_user(("User"))
node_externalapi{{"Configured API"}}

node_user -->|"uses"| node_app
node_app -->|"initializes"| node_chatstore
node_app -->|"renders"| node_search
node_app -->|"reads"| node_settings
node_app -->|"adapts layout"| node_viewport
node_chatstore -->|"loads and saves"| node_chatdb
node_chatstore -->|"selects versions"| node_branches
node_chatstore -->|"uploads files"| node_attachments
node_chatstore -->|"streams replies"| node_api
node_chatstore -->|"sends requests"| node_externalapi
node_api -->|"calls endpoints"| node_externalapi
node_api -->|"parses events"| node_eventparse
node_attachments -->|"uploads files"| node_api
node_attachments -->|"checks formats"| node_uploadformats
node_chatstore -->|"imports and exports"| node_history
node_sessionview -->|"presents messages"| node_chatview
node_messages -->|"renders content"| node_markdown
node_chatinput -->|"accepts voice"| node_voiceinput
node_voiceinput -->|"records audio"| node_recorder
node_voiceinput -->|"transcribes audio"| node_speechapi
node_speechapi -->|"uses requests"| node_api
node_readaloud -->|"synthesizes speech"| node_speechapi
node_readaloud -->|"requests speech"| node_externalapi
node_apikey -->|"verifies key"| node_api
node_apikey -->|"saves key"| node_settings
node_settings -->|"selects language"| node_locale
node_user -->|"explores sources"| node_search
node_user -->|"listens to replies"| node_readaloud

click node_app "https://github.com/deepseek-ai/chat-demo/blob/main/src/app/App.tsx"
click node_sessionview "https://github.com/deepseek-ai/chat-demo/blob/main/src/components/session/SessionView.tsx"
click node_chatinput "https://github.com/deepseek-ai/chat-demo/blob/main/src/components/chatInput/ChatInput.tsx"
click node_messages "https://github.com/deepseek-ai/chat-demo/blob/main/src/components/messages/AssistantMessage.tsx"
click node_chatstore "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/store.ts"
click node_chatdb "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/db.ts"
click node_branches "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/branches.ts"
click node_chatview "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/view.ts"
click node_history "https://github.com/deepseek-ai/chat-demo/tree/main/src/services/chat/history"
click node_attachments "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/attachments.ts"
click node_api "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/api/client.ts"
click node_eventparse "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/api/parseEvent.ts"
click node_speechapi "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/api/speech.ts"
click node_markdown "https://github.com/deepseek-ai/chat-demo/blob/main/src/components/markdown/Markdown.tsx"
click node_search "https://github.com/deepseek-ai/chat-demo/blob/main/src/components/search/SearchPanel.tsx"
click node_voiceinput "https://github.com/deepseek-ai/chat-demo/blob/main/src/components/chatInput/useVoiceInput.ts"
click node_recorder "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/speech/recorder.ts"
click node_readaloud "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/speech/readAloud.ts"
click node_settings "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/settings.ts"
click node_apikey "https://github.com/deepseek-ai/chat-demo/blob/main/src/components/settings/useApiKeyForm.ts"
click node_locale "https://github.com/deepseek-ai/chat-demo/blob/main/src/i18n/index.ts"
click node_viewport "https://github.com/deepseek-ai/chat-demo/blob/main/src/app/viewport.ts"
click node_uploadformats "https://github.com/deepseek-ai/chat-demo/blob/main/src/services/uploadExts.ts"

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_sessionview,node_chatinput,node_messages,node_viewport,node_user toneBlue
class node_chatstore,node_chatdb,node_branches,node_chatview,node_history toneAmber
class node_attachments,node_api,node_eventparse,node_speechapi,node_uploadformats,node_externalapi toneMint
class node_markdown,node_search,node_voiceinput,node_recorder,node_readaloud toneRose
class node_settings,node_apikey,node_locale toneIndigo
```

## Components

### Application interface

- [App shell](https://github.com/deepseek-ai/chat-demo/blob/main/src/app/App.tsx): `src/app/App.tsx`
- [Session view](https://github.com/deepseek-ai/chat-demo/blob/main/src/components/session/SessionView.tsx): `src/components/session/SessionView.tsx`
- [Chat input](https://github.com/deepseek-ai/chat-demo/blob/main/src/components/chatInput/ChatInput.tsx): `src/components/chatInput/ChatInput.tsx`
- [Message display](https://github.com/deepseek-ai/chat-demo/blob/main/src/components/messages/AssistantMessage.tsx): `src/components/messages/AssistantMessage.tsx`
- [Mobile viewport](https://github.com/deepseek-ai/chat-demo/blob/main/src/app/viewport.ts): `src/app/viewport.ts`

### Conversation lifecycle

- [Chat state](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/store.ts): `src/services/chat/store.ts`
- [Conversation storage](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/db.ts): `src/services/chat/db.ts`
- [Message branches](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/branches.ts): `src/services/chat/branches.ts`
- [Conversation views](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/chat/view.ts): `src/services/chat/view.ts`
- [History archives](https://github.com/deepseek-ai/chat-demo/tree/main/src/services/chat/history): `src/services/chat/history`

### API and media services

- [Attachment handling](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/attachments.ts): `src/services/attachments.ts`
- [API client](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/api/client.ts): `src/services/api/client.ts`
- [Stream event parsing](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/api/parseEvent.ts): `src/services/api/parseEvent.ts`
- [Speech API](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/api/speech.ts): `src/services/api/speech.ts`
- [Upload formats](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/uploadExts.ts): `src/services/uploadExts.ts`

### Chat capabilities

- [Markdown rendering](https://github.com/deepseek-ai/chat-demo/blob/main/src/components/markdown/Markdown.tsx): `src/components/markdown/Markdown.tsx`
- [Search panel](https://github.com/deepseek-ai/chat-demo/blob/main/src/components/search/SearchPanel.tsx): `src/components/search/SearchPanel.tsx`
- [Voice input](https://github.com/deepseek-ai/chat-demo/blob/main/src/components/chatInput/useVoiceInput.ts): `src/components/chatInput/useVoiceInput.ts`
- [Audio recorder](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/speech/recorder.ts): `src/services/speech/recorder.ts`
- [Read-aloud playback](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/speech/readAloud.ts): `src/services/speech/readAloud.ts`

### Preferences and localization

- [Settings](https://github.com/deepseek-ai/chat-demo/blob/main/src/services/settings.ts): `src/services/settings.ts`
- [API key form](https://github.com/deepseek-ai/chat-demo/blob/main/src/components/settings/useApiKeyForm.ts): `src/components/settings/useApiKeyForm.ts`
- [Translations](https://github.com/deepseek-ai/chat-demo/blob/main/src/i18n/index.ts): `src/i18n/index.ts`

### Other components

- **User**
- **Configured API**

## Connections

- User → App shell: uses (evidence: `README.md`)
- App shell → Chat state: initializes (evidence: `src/app/App.tsx`)
- App shell → Search panel: renders (evidence: `src/app/App.tsx`)
- App shell → Settings: reads (evidence: `src/app/App.tsx`)
- App shell → Mobile viewport: adapts layout (evidence: `src/app/App.tsx`)
- Chat state → Conversation storage: loads and saves (evidence: `src/services/chat/store.ts`)
- Chat state → Message branches: selects versions (evidence: `src/services/chat/store.ts`)
- Chat state → Attachment handling: uploads files (evidence: `src/services/chat/store.ts`)
- Chat state → API client: streams replies (evidence: `src/services/chat/store.ts`)
- Chat state → Configured API: sends requests (evidence: `README.md`)
- API client → Configured API: calls endpoints (evidence: `README.md`)
- API client → Stream event parsing: parses events (evidence: `src/services/api/client.ts`)
- Attachment handling → API client: uploads files (evidence: `src/services/attachments.ts`)
- Attachment handling → Upload formats: checks formats (evidence: `src/services/attachments.ts`)
- Chat state → History archives: imports and exports (evidence: `README.md`)
- Session view → Conversation views: presents messages (evidence: `src/components/session/SessionView.tsx`)
- Message display → Markdown rendering: renders content (evidence: `README.md`)
- Chat input → Voice input: accepts voice
- Voice input → Audio recorder: records audio (evidence: `src/components/chatInput/useVoiceInput.ts`)
- Voice input → Speech API: transcribes audio (evidence: `src/components/chatInput/useVoiceInput.ts`)
- Speech API → API client: uses requests (evidence: `src/services/api/speech.ts`)
- Read-aloud playback → Speech API: synthesizes speech (evidence: `src/services/speech/readAloud.ts`)
- Read-aloud playback → Configured API: requests speech (evidence: `README.md`)
- API key form → API client: verifies key (evidence: `src/components/settings/useApiKeyForm.ts`)
- API key form → Settings: saves key (evidence: `src/components/settings/useApiKeyForm.ts`)
- Settings → Translations: selects language (evidence: `src/i18n/index.ts`)
- User → Search panel: explores sources (evidence: `README.md`)
- User → Read-aloud playback: listens to replies (evidence: `README.md`)