# dpwqb/office-ai-addin architecture

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

- Interactive diagram: https://gitdiagram.com/dpwqb/office-ai-addin
- Repository: https://github.com/dpwqb/office-ai-addin

## Overview

Office AI Add-in provides one task pane for Excel, Word, and PowerPoint. A user configures a provider or asks a question; the UI sends chat requests through an OpenAI-compatible agent loop, which can invoke tools exposed by the selected host adapter. Those tools read or modify the Office document, and citations or follow mode can navigate the view. The README documents these capabilities and relationships; source excerpts were unavailable, so uncertain internal call paths are omitted.

Main entry points: [`assets/js/ui.js`](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/ui.js) (UI and Settings), [`assets/js/host.js`](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host.js) (Host Delegation), [`assets/js/app.js`](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/app.js) (App Bootstrap), [`assets/js/api.js`](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/api.js) (Agent Loop)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Task Pane"]
  node_taskpane["Task Pane Entry<br/>[taskpane.html]"]
  node_app["App Bootstrap<br/>[app.js]"]
  node_ui["UI and Settings<br/>[ui.js]"]
  node_commands["Ribbon Commands<br/>[commands.js]"]
end

subgraph group_agent["AI Agent"]
  node_api["Agent Loop<br/>[api.js]"]
  node_provider["AI Provider API"]
end

subgraph group_shared["Shared Services"]
  node_config["Provider Config<br/>[config.js]"]
  node_state["Session and Preferences<br/>[state.js]"]
  node_localstorage[("Browser Storage")]
  node_markdown["Markdown Renderer<br/>[markdown.js]"]
end

subgraph group_hosts["Office Hosts"]
  node_host["Host Delegation<br/>[host.js]"]
  node_excel["Excel Tools<br/>[host-excel.js]"]
  node_word["Word Tools<br/>[host-word.js]"]
  node_powerpoint["PowerPoint Tools<br/>[host-powerpoint.js]"]
end

node_user(("User"))
node_office["Office Document"]

node_user -->|"uses"| node_ui
node_taskpane -->|"loads"| node_app
node_app -->|"selects host"| node_host
node_app -->|"renders"| node_ui
node_ui -->|"sends chat"| node_api
node_api -->|"requests completion"| node_provider
node_api -->|"uses tools"| node_host
node_host -->|"dispatches"| node_excel
node_host -->|"dispatches"| node_word
node_host -->|"dispatches"| node_powerpoint
node_excel -->|"reads or writes"| node_office
node_word -->|"reads or writes"| node_office
node_powerpoint -->|"reads or writes"| node_office
node_ui -->|"reads or updates"| node_state
node_state -->|"persists"| node_localstorage
node_ui -->|"reads settings"| node_config
node_ui -->|"renders messages"| node_markdown
node_ui -->|"navigates citations"| node_host
node_user -->|"invokes"| node_commands

click node_taskpane "https://github.com/dpwqb/office-ai-addin/blob/main/taskpane.html"
click node_app "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/app.js"
click node_ui "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/ui.js"
click node_commands "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/commands.js"
click node_api "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/api.js"
click node_config "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/config.js"
click node_state "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/state.js"
click node_markdown "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/markdown.js"
click node_host "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host.js"
click node_excel "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host-excel.js"
click node_word "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host-word.js"
click node_powerpoint "https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host-powerpoint.js"

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_taskpane,node_app,node_ui,node_commands,node_user toneBlue
class node_api,node_provider toneAmber
class node_config,node_state,node_localstorage,node_markdown toneMint
class node_host,node_excel,node_word,node_powerpoint toneRose
class node_office toneIndigo
```

## Components

### Task Pane

- [Task Pane Entry](https://github.com/dpwqb/office-ai-addin/blob/main/taskpane.html): `taskpane.html`
- [App Bootstrap](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/app.js): `assets/js/app.js`
- [UI and Settings](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/ui.js): `assets/js/ui.js`
- [Ribbon Commands](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/commands.js): `assets/js/commands.js`

### AI Agent

- [Agent Loop](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/api.js): `assets/js/api.js`
- **AI Provider API**

### Shared Services

- [Provider Config](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/config.js): `assets/js/config.js`
- [Session and Preferences](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/state.js): `assets/js/state.js`
- **Browser Storage**
- [Markdown Renderer](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/markdown.js): `assets/js/markdown.js`

### Office Hosts

- [Host Delegation](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host.js): `assets/js/host.js`
- [Excel Tools](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host-excel.js): `assets/js/host-excel.js`
- [Word Tools](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host-word.js): `assets/js/host-word.js`
- [PowerPoint Tools](https://github.com/dpwqb/office-ai-addin/blob/main/assets/js/host-powerpoint.js): `assets/js/host-powerpoint.js`

### Other components

- **User**
- **Office Document**

## Connections

- User → UI and Settings: uses
- Task Pane Entry → App Bootstrap: loads
- App Bootstrap → Host Delegation: selects host
- App Bootstrap → UI and Settings: renders
- UI and Settings → Agent Loop: sends chat
- Agent Loop → AI Provider API: requests completion
- Agent Loop → Host Delegation: uses tools
- Host Delegation → Excel Tools: dispatches
- Host Delegation → Word Tools: dispatches
- Host Delegation → PowerPoint Tools: dispatches
- Excel Tools → Office Document: reads or writes
- Word Tools → Office Document: reads or writes
- PowerPoint Tools → Office Document: reads or writes
- UI and Settings → Session and Preferences: reads or updates
- Session and Preferences → Browser Storage: persists
- UI and Settings → Provider Config: reads settings
- UI and Settings → Markdown Renderer: renders messages
- UI and Settings → Host Delegation: navigates citations
- User → Ribbon Commands: invokes