diff --git a/tools/server/webui/docs/architecture/high-level-architecture-simplified.md b/tools/server/webui/docs/architecture/high-level-architecture-simplified.md
index a6cb1e9c39..dde630be37 100644
--- a/tools/server/webui/docs/architecture/high-level-architecture-simplified.md
+++ b/tools/server/webui/docs/architecture/high-level-architecture-simplified.md
@@ -12,9 +12,11 @@ flowchart TB
C_Form["ChatForm"]
C_Messages["ChatMessages"]
C_Message["ChatMessage"]
+ C_AgenticContent["AgenticContent"]
C_MessageEditForm["ChatMessageEditForm"]
C_ModelsSelector["ModelsSelector"]
C_Settings["ChatSettings"]
+ C_McpSettings["McpSettingsSection"]
end
subgraph Hooks["🪝 Hooks"]
@@ -27,20 +29,26 @@ flowchart TB
S2["conversationsStore
Conversation data & messages"]
S3["modelsStore
Model selection & loading"]
S4["serverStore
Server props & role detection"]
- S5["settingsStore
User configuration"]
+ S5["settingsStore
User configuration incl. MCP"]
end
subgraph Services["⚙️ Services"]
- SV1["ChatService"]
+ SV1["ChatService
incl. agentic loop"]
SV2["ModelsService"]
SV3["PropsService"]
SV4["DatabaseService"]
SV5["ParameterSyncService"]
end
+ subgraph MCP["🔧 MCP (Model Context Protocol)"]
+ MCP1["MCPClient
@modelcontextprotocol/sdk"]
+ MCP2["mcpStore
reactive state"]
+ MCP3["OpenAISseClient"]
+ end
+
subgraph Storage["💾 Storage"]
ST1["IndexedDB
conversations, messages"]
- ST2["LocalStorage
config, userOverrides"]
+ ST2["LocalStorage
config, userOverrides, mcpServers"]
end
subgraph APIs["🌐 llama-server API"]
@@ -50,6 +58,11 @@ flowchart TB
API4["/v1/models"]
end
+ subgraph ExternalMCP["🔌 External MCP Servers"]
+ EXT1["MCP Server 1"]
+ EXT2["MCP Server N"]
+ end
+
%% Routes → Components
R1 & R2 --> C_Screen
RL --> C_Sidebar
@@ -57,8 +70,10 @@ flowchart TB
%% Component hierarchy
C_Screen --> C_Form & C_Messages & C_Settings
C_Messages --> C_Message
+ C_Message --> C_AgenticContent
C_Message --> C_MessageEditForm
C_Form & C_MessageEditForm --> C_ModelsSelector
+ C_Settings --> C_McpSettings
%% Components → Hooks → Stores
C_Form & C_Messages --> H1 & H2
@@ -70,6 +85,7 @@ flowchart TB
C_Sidebar --> S2
C_ModelsSelector --> S3 & S4
C_Settings --> S5
+ C_McpSettings --> S5
%% Stores → Services
S1 --> SV1 & SV4
@@ -78,6 +94,12 @@ flowchart TB
S4 --> SV3
S5 --> SV5
+ %% ChatService → MCP (Agentic Mode)
+ SV1 --> MCP2
+ MCP2 --> MCP1
+ SV1 --> MCP3
+ MCP3 --> API1
+
%% Services → Storage
SV4 --> ST1
SV5 --> ST2
@@ -87,6 +109,9 @@ flowchart TB
SV2 --> API3 & API4
SV3 --> API2
+ %% MCP → External Servers
+ MCP1 --> EXT1 & EXT2
+
%% Styling
classDef routeStyle fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef componentStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
@@ -95,12 +120,16 @@ flowchart TB
classDef serviceStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
classDef storageStyle fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef apiStyle fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
+ classDef mcpStyle fill:#e0f2f1,stroke:#00695c,stroke-width:2px
+ classDef externalStyle fill:#f3e5f5,stroke:#6a1b9a,stroke-width:2px,stroke-dasharray: 5 5
class R1,R2,RL routeStyle
- class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message,C_MessageEditForm,C_ModelsSelector,C_Settings componentStyle
+ class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message,C_AgenticContent,C_MessageEditForm,C_ModelsSelector,C_Settings,C_McpSettings componentStyle
class H1,H2 hookStyle
class S1,S2,S3,S4,S5 storeStyle
class SV1,SV2,SV3,SV4,SV5 serviceStyle
class ST1,ST2 storageStyle
class API1,API2,API3,API4 apiStyle
+ class MCP1,MCP2,MCP3 mcpStyle
+ class EXT1,EXT2 externalStyle
```
diff --git a/tools/server/webui/docs/architecture/high-level-architecture.md b/tools/server/webui/docs/architecture/high-level-architecture.md
index c5ec4d6909..0a1e5a745e 100644
--- a/tools/server/webui/docs/architecture/high-level-architecture.md
+++ b/tools/server/webui/docs/architecture/high-level-architecture.md
@@ -164,6 +164,32 @@ end
end
end
+ subgraph MCP["🔧 MCP (Model Context Protocol)"]
+ direction TB
+ subgraph MCPStoreBox["mcpStore"]
+ MCPStoreState["State:
client, isInitializing
error, availableTools"]
+ MCPStoreLifecycle["Lifecycle:
ensureClient()
shutdown()"]
+ MCPStoreExec["Execution:
execute()"]
+ end
+ subgraph MCPClient["MCPClient"]
+ MCP1Init["Lifecycle:
initialize()
shutdown()"]
+ MCP1Tools["Tools:
listTools()
getToolsDefinition()
execute()"]
+ MCP1Transport["Transport:
StreamableHTTPClientTransport
SSEClientTransport (fallback)"]
+ end
+ subgraph MCPSse["OpenAISseClient"]
+ MCP3Stream["Streaming:
streamChatCompletion()"]
+ MCP3Parse["Parsing:
tool call delta merging"]
+ end
+ subgraph MCPConfig["config/mcp"]
+ MCP4Parse["Parsing:
parseServersFromSettings()"]
+ end
+ end
+
+ subgraph ExternalMCP["🔌 External MCP Servers"]
+ EXT1["MCP Server 1
(StreamableHTTP/SSE)"]
+ EXT2["MCP Server N"]
+ end
+
subgraph Storage["💾 Storage"]
ST1["IndexedDB"]
ST2["conversations"]
@@ -240,6 +266,16 @@ end
SV2 --> API3 & API4
SV3 --> API2
+ %% ChatService → MCP (Agentic Mode)
+ SV1 --> MCPStoreBox
+ MCPStoreBox --> MCPClient
+ SV1 --> MCPSse
+ MCPSse --> API1
+ MCPConfig --> MCPStoreBox
+
+ %% MCP → External Servers
+ MCPClient --> EXT1 & EXT2
+
%% Styling
classDef routeStyle fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef componentStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
@@ -250,6 +286,9 @@ end
classDef reactiveStyle fill:#fffde7,stroke:#f9a825,stroke-width:1px
classDef serviceStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
classDef serviceMStyle fill:#c8e6c9,stroke:#2e7d32,stroke-width:1px
+ classDef mcpStyle fill:#e0f2f1,stroke:#00695c,stroke-width:2px
+ classDef mcpMethodStyle fill:#b2dfdb,stroke:#00695c,stroke-width:1px
+ classDef externalStyle fill:#f3e5f5,stroke:#6a1b9a,stroke-width:2px,stroke-dasharray: 5 5
classDef storageStyle fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef apiStyle fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
@@ -269,6 +308,9 @@ end
class S5Lifecycle,S5Update,S5Reset,S5Sync,S5Utils methodStyle
class ChatExports,ConvExports,ModelsExports,ServerExports,SettingsExports reactiveStyle
class SV1,SV2,SV3,SV4,SV5 serviceStyle
+ class MCPStoreBox,MCPClient,MCPSse,MCPConfig mcpStyle
+ class MCPStoreState,MCPStoreLifecycle,MCPStoreExec,MCP1Init,MCP1Tools,MCP1Transport,MCP3Stream,MCP3Parse,MCP4Build,MCP4Parse mcpMethodStyle
+ class EXT1,EXT2 externalStyle
class SV1Msg,SV1Stream,SV1Convert,SV1Utils serviceMStyle
class SV2List,SV2LoadUnload,SV2Status serviceMStyle
class SV3Fetch serviceMStyle