webui: MCP client with low coupling to current codebase

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<br/><i>Conversation data & messages</i>"]
         S3["modelsStore<br/><i>Model selection & loading</i>"]
         S4["serverStore<br/><i>Server props & role detection</i>"]
-        S5["settingsStore<br/><i>User configuration</i>"]
+        S5["settingsStore<br/><i>User configuration incl. MCP</i>"]
     end
 
     subgraph Services["⚙️ Services"]
-        SV1["ChatService"]
+        SV1["ChatService<br/><i>incl. agentic loop</i>"]
         SV2["ModelsService"]
         SV3["PropsService"]
         SV4["DatabaseService"]
         SV5["ParameterSyncService"]
     end
 
+    subgraph MCP["🔧 MCP (Model Context Protocol)"]
+        MCP1["MCPClient<br/><i>@modelcontextprotocol/sdk</i>"]
+        MCP2["mcpStore<br/><i>reactive state</i>"]
+        MCP3["OpenAISseClient"]
+    end
+
     subgraph Storage["💾 Storage"]
         ST1["IndexedDB<br/><i>conversations, messages</i>"]
-        ST2["LocalStorage<br/><i>config, userOverrides</i>"]
+        ST2["LocalStorage<br/><i>config, userOverrides, mcpServers</i>"]
     end
 
     subgraph APIs["🌐 llama-server API"]
@@ -50,15 +58,22 @@ 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
 
     %% 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
 ```

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["<b>State:</b><br/>client, isInitializing<br/>error, availableTools"]
+            MCPStoreLifecycle["<b>Lifecycle:</b><br/>ensureClient()<br/>shutdown()"]
+            MCPStoreExec["<b>Execution:</b><br/>execute()"]
+        end
+        subgraph MCPClient["MCPClient"]
+            MCP1Init["<b>Lifecycle:</b><br/>initialize()<br/>shutdown()"]
+            MCP1Tools["<b>Tools:</b><br/>listTools()<br/>getToolsDefinition()<br/>execute()"]
+            MCP1Transport["<b>Transport:</b><br/>StreamableHTTPClientTransport<br/>SSEClientTransport (fallback)"]
+        end
+        subgraph MCPSse["OpenAISseClient"]
+            MCP3Stream["<b>Streaming:</b><br/>streamChatCompletion()"]
+            MCP3Parse["<b>Parsing:</b><br/>tool call delta merging"]
+        end
+        subgraph MCPConfig["config/mcp"]
+            MCP4Parse["<b>Parsing:</b><br/>parseServersFromSettings()"]
+        end
+    end
+
+    subgraph ExternalMCP["🔌 External MCP Servers"]
+        EXT1["MCP Server 1<br/>(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

tools/server/webui/docs/flows/settings-flow.md

@@ -139,6 +139,6 @@ sequenceDiagram
 
     Note over settingsStore: UI-only (not synced):
     rect rgb(255, 240, 240)
-        Note over settingsStore: systemMessage, custom (JSON)<br/>showStatistics, enableContinueGeneration<br/>autoMicOnEmpty, disableAutoScroll<br/>apiKey, pdfAsImage, disableReasoningFormat
+        Note over settingsStore: systemMessage, custom (JSON)<br/>showStatistics, enableContinueGeneration<br/>autoMicOnEmpty, disableAutoScroll<br/>apiKey, pdfAsImage, disableReasoningParsing, showRawOutputSwitch
     end
 ```