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