High-Level Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• BUILDING.md
• package.json
• src/utils/ai.ts
• src/components/ChatArea.tsx
• src/data.ts
• src/screens/MainScreen.tsx
• src-tauri/tauri.conf.json

Agent Studio is a multi-platform AI command-center designed to orchestrate Large Language Models (LLMs) through the Model Context Protocol (MCP). The architecture integrates local LLM providers, remote cloud endpoints, and a virtualized workspace environment to enable autonomous file manipulation, web searching, and real-time skill rendering.

The system employs a hybrid deployment strategy using Tauri for desktop environments (Windows, macOS) and Capacitor for mobile platforms (Android, iOS). It utilizes a React-based frontend that communicates with local service providers like Ollama and LM Studio via direct fetch requests or falls back to an internal workspace emulator when endpoints are offline.

Sources: BUILDING.md:5-13, src/utils/ai.ts:9-30, package.json:34-40

Core System Components

The architecture is divided into three primary layers: the Client Interface, the Orchestration Layer, and the External Integration Layer.

Component Overview

Component	Responsibility	Relevant Files
MainScreen	Orchestrates global state, panel switching, and session management.	src/screens/MainScreen.tsx
ChatArea	Manages dialogue streams, autocomplete triggers, and sandbox message rendering.	src/components/ChatArea.tsx
AI Dispatcher	Routes prompts to active LLM providers and executes MCP tool calls.	src/utils/ai.ts
ExplorerFS	Provides a virtualized filesystem interface for file attachments and editing.	src/components/ExplorerFS.tsx
PluginRegistry	Manages MCP configurations and skill plugins (SVG, LaTeX, JS Runner).	src/components/PluginMCP.tsx

Sources: src/screens/MainScreen.tsx:32-55, src/components/ChatArea.tsx:40-65, src/utils/ai.ts:13-25

System Hierarchy Diagram

The following diagram illustrates the relationship between the user interface, the internal processing logic, and external services.

AI Dispatch and Provider Routing

The AI Dispatcher (generateChatResponse) determines the appropriate execution path based on the active provider. It attempts direct communication with local endpoints first.

1. Direct Local Fetch: If the provider is Ollama (port 11434) or LM Studio (port 1234), the system sends a POST request to /api/chat or /chat/completions.
2. Timeout Handling: A Signal.timeout(3500) ensures the UI remains responsive if the local service is offline or blocked by CORS.
3. Workspace Emulator: If local/remote calls fail, the system activates a high-fidelity simulator. This simulator interprets prompts to trigger MCP tool calls or Skill Plugin renders.

Sources: src/utils/ai.ts:37-75, src/data.ts:5-40

Model Context Protocol (MCP) Integration

The system implements MCP to bridge LLMs with host-level capabilities. MCP configurations are managed in src/data.ts and triggered during prompt analysis in src/utils/ai.ts.

Tool Execution Flow

Default MCP Configurations

• Local Filesystem MCP (:3011): Provides read_filesystem_file, write_filesystem_file, and list_filesystem_dir.
• Brave Web MCP (:3012): Provides query_web_search and scrape_documentation.
• Semantic Memory MCP (:3013): Handles memorize_fact and query_memory.

Sources: src/data.ts:79-148

Sandbox and Skill Plugins

The architecture includes a "Sandbox" for rendering complex LLM outputs. The ChatArea component parses assistant messages for specific code blocks to activate Skill Plugins.

• SVG Sandbox: Intercepts <svg> tags within XML/HTML code blocks to render vector graphics.
• LaTeX Typesetter: Intercepts $$ blocks to format mathematical equations.
• JS/Python Runner: Executes logic within secure runtime containers or provides diagnostic scripts.

Sources: src/components/ChatArea.tsx:68-100, src/data.ts:162-185

Build and Deployment Architecture

The project utilizes a unified codebase for desktop and mobile deployment, configured through package.json and tauri.conf.json.

Security and Synchronization

Data security is managed through a "Sync Cluster" model. The system uses 256-bit PBKDF2 encryption and AES-256-GCM to handle workspace states.

1. Client-Side Encryption: All prompt libraries and conversation caches are encrypted on the client before synchronization.
2. Passphrase Hashing: A symmetric sync key (e.g., AGENT-PBKDF2-XXXX) bridges coordinates between multiple nodes (e.g., Desktop to Laptop).
3. CORS Requirements: For local communication, Ollama must be started with OLLAMA_ORIGINS="*" to permit native fetch bindings.

Sources: src/components/SyncCluster.tsx:55-75, src/utils/ai.ts:160-175, src/data.ts:199-205

Conclusion

Agent Studio's architecture centers on the flexible routing of AI requests between local and remote providers, augmented by the Model Context Protocol. By decoupling the UI from the execution engine, the system ensures persistent functionality through workspace emulation and secure cross-device state synchronization.