# code-qtzl/artic-catalog architecture

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

- Interactive diagram: https://gitdiagram.com/code-qtzl/artic-catalog
- Repository: https://github.com/code-qtzl/artic-catalog

## Overview

Artic-Catalog is a web application for browsing the Art Institute of Chicago’s artwork collection, viewing artwork details, and asking an AI assistant about art. The main path is visitor → collection search or featured/random artwork → selected artwork detail; chat is a separate interaction carried through the app’s chat endpoint to Claude. The README also describes MCP-based artwork search and lookup, represented as a separate integration. Several component and chat-service implementations were not sampled, so their internal wiring is shown only where supported by the available source or README.

Main entry points: [`src/App.tsx`](https://github.com/code-qtzl/artic-catalog/blob/main/src/App.tsx) (App navigation), [`src/components/Hero.tsx`](https://github.com/code-qtzl/artic-catalog/blob/main/src/components/Hero.tsx) (Collection search), [`src/components/Chat.tsx`](https://github.com/code-qtzl/artic-catalog/blob/main/src/components/Chat.tsx) (Chat interface), [`src/config/api.ts`](https://github.com/code-qtzl/artic-catalog/blob/main/src/config/api.ts) (Artwork API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Web experience"]
  node_app["App navigation<br/>[App.tsx]"]
  node_hero["Collection search<br/>[Hero.tsx]"]
  node_detail["Artwork detail<br/>[ArtworkDetail.tsx]"]
  node_chatui["Chat interface<br/>[Chat.tsx]"]
  node_theme["Theme provider<br/>[ThemeProvider.tsx]"]
end

subgraph group_collection["Artwork collection"]
  node_artapi["Artwork API client<br/>[api.ts]"]
  node_featured["Featured artworks"]
  node_artic["Art Institute API"]
end

subgraph group_assistant["AI assistant"]
  node_chatconfig["Chat service<br/>[chat.ts]"]
  node_chatserver["Chat endpoint server<br/>[index.ts]"]
  node_chathandler["Chat handler<br/>[chat.ts]"]
  node_claude["Anthropic Claude"]
end

subgraph group_mcp["MCP integration"]
  node_mcpserver["MCP tool server<br/>[mcp-server.ts]"]
  node_mcpclient(("MCP client"))
end

node_visitor(("Visitor"))

node_visitor -->|"uses"| node_app
node_app -->|"shows home"| node_hero
node_app -->|"selects artwork"| node_detail
node_app -->|"opens chat"| node_chatui
node_app -->|"provides theme"| node_theme
node_hero -->|"searches, fetches featured, random"| node_artapi
node_hero -->|"passes artworks"| node_featured
node_artapi -->|"requests artwork data"| node_artic
node_chatui -->|"sends message"| node_chatconfig
node_chatconfig -->|"posts chat request"| node_chatserver
node_chatserver -->|"dispatches request"| node_chathandler
node_chathandler -->|"requests completion"| node_claude
node_mcpclient -.->|"invokes tools"| node_mcpserver
node_mcpserver -->|"searches and retrieves"| node_artic

click node_app "https://github.com/code-qtzl/artic-catalog/blob/main/src/App.tsx"
click node_hero "https://github.com/code-qtzl/artic-catalog/blob/main/src/components/Hero.tsx"
click node_detail "https://github.com/code-qtzl/artic-catalog/blob/main/src/components/ArtworkDetail.tsx"
click node_chatui "https://github.com/code-qtzl/artic-catalog/blob/main/src/components/Chat.tsx"
click node_theme "https://github.com/code-qtzl/artic-catalog/blob/main/src/components/ThemeProvider.tsx"
click node_artapi "https://github.com/code-qtzl/artic-catalog/blob/main/src/config/api.ts"
click node_featured "https://github.com/code-qtzl/artic-catalog/blob/main/src/components/FeaturedArtworks.tsx"
click node_chatconfig "https://github.com/code-qtzl/artic-catalog/blob/main/src/config/chat.ts"
click node_chatserver "https://github.com/code-qtzl/artic-catalog/blob/main/src/server/index.ts"
click node_chathandler "https://github.com/code-qtzl/artic-catalog/blob/main/src/server/api/chat.ts"
click node_mcpserver "https://github.com/code-qtzl/artic-catalog/blob/main/src/server/mcp-server.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_hero,node_detail,node_chatui,node_theme toneBlue
class node_artapi,node_featured,node_artic toneAmber
class node_chatconfig,node_chatserver,node_chathandler,node_claude toneMint
class node_mcpserver,node_mcpclient toneRose
class node_visitor toneIndigo
```

## Components

### Web experience

- [App navigation](https://github.com/code-qtzl/artic-catalog/blob/main/src/App.tsx): `src/App.tsx`
- [Collection search](https://github.com/code-qtzl/artic-catalog/blob/main/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Artwork detail](https://github.com/code-qtzl/artic-catalog/blob/main/src/components/ArtworkDetail.tsx): `src/components/ArtworkDetail.tsx`
- [Chat interface](https://github.com/code-qtzl/artic-catalog/blob/main/src/components/Chat.tsx): `src/components/Chat.tsx`
- [Theme provider](https://github.com/code-qtzl/artic-catalog/blob/main/src/components/ThemeProvider.tsx): `src/components/ThemeProvider.tsx`

### Artwork collection

- [Artwork API client](https://github.com/code-qtzl/artic-catalog/blob/main/src/config/api.ts): `src/config/api.ts`
- [Featured artworks](https://github.com/code-qtzl/artic-catalog/blob/main/src/components/FeaturedArtworks.tsx): `src/components/FeaturedArtworks.tsx`
- **Art Institute API**

### AI assistant

- [Chat service](https://github.com/code-qtzl/artic-catalog/blob/main/src/config/chat.ts): `src/config/chat.ts`
- [Chat endpoint server](https://github.com/code-qtzl/artic-catalog/blob/main/src/server/index.ts): `src/server/index.ts`
- [Chat handler](https://github.com/code-qtzl/artic-catalog/blob/main/src/server/api/chat.ts): `src/server/api/chat.ts`
- **Anthropic Claude**

### MCP integration

- [MCP tool server](https://github.com/code-qtzl/artic-catalog/blob/main/src/server/mcp-server.ts): `src/server/mcp-server.ts`
- **MCP client**

### Other components

- **Visitor**

## Connections

- Visitor → App navigation: uses
- App navigation → Collection search: shows home
- App navigation → Artwork detail: selects artwork
- App navigation → Chat interface: opens chat
- App navigation → Theme provider: provides theme
- Collection search → Artwork API client: searches, fetches featured, random
- Collection search → Featured artworks: passes artworks
- Artwork API client → Art Institute API: requests artwork data
- Chat interface → Chat service: sends message
- Chat service → Chat endpoint server: posts chat request
- Chat endpoint server → Chat handler: dispatches request
- Chat handler → Anthropic Claude: requests completion
- MCP client → MCP tool server: invokes tools
- MCP tool server → Art Institute API: searches and retrieves