An overview diagram could help in understanding

[joerg-rade]

@startuml
skinparam shadowing false
skinparam defaultTextAlignment center
skinparam wrapWidth 200

package "TypeScript Runtime" {

folder "Agent App Code" {
file "index.ts\n(Orchestration logic)" as Index
file "mcp-config.json\n(Server definitions)" as ConfigFile
}

package "MCP Use Library (mcp-use)" {
component "MCPClient\n(Manages MCP server connections)" as MCPClient
component "MCPAgent\nTool-calling Agent" as MCPAgent
}

package "LLM Provider" {
component "LangChain.js-compatible LLM\n(e.g., OpenAI, DeepSeek)" as LLM
}

database ".env / API Keys\nOPENAI_API_KEY=..." as Env
}

package "Tool-Enabled MCP Servers" {
node "MCP Tool Servers" {
component "File System Tool" as ToolFS
component "Browser Tool\n(Playwright)" as ToolBrowser
ToolFS -[hidden]- ToolBrowser
component "Multi-Server Orchestration" as ToolMulti
ToolBrowser -[hidden]- ToolMulti
}

cloud "External Services" {
[Google Search] as Google
[Airbnb API] as Airbnb
}
}

' Relationships
Index -r-> MCPClient : fromDict(config)
Index --> MCPAgent : builds agent
MCPAgent --> LLM : model (LangChain.js)
MCPAgent -u-> MCPClient : tool routing
MCPClient --> ToolBrowser
MCPClient -r-> ToolFS
MCPClient --> ToolMulti

ToolBrowser --> Google
ToolMulti --> Airbnb
ToolMulti --> Google

LLM -u-> Env : uses API key
Index -u-> ConfigFile : load config
Index --> Env : load .env vars

@enduml