How microsoft/magentic-ui works
MagenticLite is a human-in-the-loop agentic application for browser automation and local file work. A user starts or selects a session, submits a task, and the backend streams agent progress and results to the frontend; the agent can use browser and filesystem tools, with user approval or takeover for sensitive actions. Session views also expose browser playback and live viewing. The README documents these capabilities; sampled source confirms the app/API structure, agent runtime, model client, and sandboxed browser support. Some route-to-runtime wiring is not shown in the excerpts.
Main entry points: _omni_agent.py OmniAgent · App.tsx App shell · SessionView.tsx Session view · app.py FastAPI application
Components 24
User interface
- App shell
frontend/src/App.tsx - Session view
frontend/src/components/session/SessionView.tsx - Chat interface
frontend/src/components/chat/ChatView.tsx - Browser playback
frontend/src/components/browser/BrowserEmbed.tsx - WebSocket manager
frontend/src/hooks/useWebSocketManager.tsx - HTTP API client
frontend/src/api/client.ts
Application backend
- FastAPI application
src/magentic_ui/backend/web/app.py - WebSocket route
src/magentic_ui/backend/web/routes/ws.py - Session routes
src/magentic_ui/backend/web/routes/sessions.py - Filesystem routes
src/magentic_ui/backend/web/routes/filesystem.py - Run manager
src/magentic_ui/backend/teammanager/teammanager.py
Agent runtime
- Task team factory
src/magentic_ui/task_team.py - OmniAgent
src/magentic_ui/teams/omniagent/_omni_agent.py - Web surfer agent
src/magentic_ui/agents/web_surfer/fara/_fara_web_surfer.py - Approval controls
src/magentic_ui/approval.py
Tools and integrations
- Browser controller
src/magentic_ui/tools/playwright/playwright_controller_fara.py - Quicksand browser pool
src/magentic_ui/tools/playwright/browser/quicksand_browser_manager.py - Host file tools
src/magentic_ui/teams/omniagent/tools/host/_open.py - Model client
src/magentic_ui/_ai_client.py
Session and settings state
- Application database
src/magentic_ui/backend/database/db_manager.py
Other components
- User
- Model endpoint
- Websites
- Local files
Connections 24
- User → App shell: uses
- App shell → Session view: renders
- Session view → Chat interface: shows
- Session view → Browser playback: shows playback
- App shell → WebSocket manager: provides connections
- Chat interface → WebSocket manager: sends tasks
- WebSocket manager → WebSocket route: streams messages
- App shell → HTTP API client: requests data
- HTTP API client → FastAPI application: calls
- FastAPI application → Session routes: dispatches
- FastAPI application → Filesystem routes: dispatches
- WebSocket route → Run manager: runs tasks
- Run manager → Task team factory: creates agent
- Run manager → Application database: reads settings
- Task team factory → OmniAgent: assembles runtime
- OmniAgent → Model client: requests completions
- Model client → Model endpoint: sends prompts
- OmniAgent → Approval controls: checks actions
- OmniAgent → Web surfer agent: dispatches browser work
- Web surfer agent → Browser controller: controls pages
- Browser controller → Quicksand browser pool: uses browser slots
- Quicksand browser pool → Websites: browses
- OmniAgent → Host file tools: dispatches file work
- Host file tools → Local files: reads and edits