The AgentScope Web UI is a React-based single-page application (SPA) built with TypeScript and Vite. It serves as the primary human-interactive layer for the Agent Service, providing a visual environment for multi-agent chat, workspace management, and resource configuration (credentials, knowledge bases, MCP servers, and skills).
The frontend is structured as a client-side routed application using react-router-dom. It utilizes a layout-driven architecture where the AppLayout component provides a persistent navigation sidebar, while page-specific content is rendered within an Outlet examples/web_ui/frontend/src/App.tsx35-62
The root App component manages the initial setup state and wraps the application in global providers for translations, file uploads, and onboarding tours examples/web_ui/frontend/src/App.tsx66-90
Sources:
Before the application is accessible, the SetupPage requires a server URL and username examples/web_ui/frontend/src/pages/setup/index.tsx42-43 It uses the healthApi to probe the backend's /health endpoint to ensure the service is compatible and all internal components (storage, message bus, chat service) are ready examples/web_ui/frontend/src/pages/setup/index.tsx78-87 The UI specifically reports on component readiness, such as storage, message_bus, and workspace_manager src/agentscope/app/_router/_health.py12-22
Sources:
The frontend communicates with the FastAPI backend via a central client examples/web_ui/frontend/src/api/client.ts124-145 This client handles:
X-User-ID header into every request examples/web_ui/frontend/src/api/client.ts41types.ts mirror the Pydantic schemas defined in the backend's _schema modules, such as AgentData, SessionConfig, and KnowledgeBase examples/web_ui/frontend/src/api/types.ts43-150For details, see Frontend API Client.
The chat interface handles the rendering of complex agent outputs, including multi-modal data and tool execution logs. It manages the message history and consumes SSE (Server-Sent Events) streams from the backend to provide real-time agent reasoning and tool call feedback examples/web_ui/frontend/src/i18n/locales/en.json109-136
For details, see Chat Interface.
Management pages provide forms for configuring the agent environment. For example, the ChannelPage allows binding agents to external platforms like Feishu or Discord using the ChannelForm examples/web_ui/frontend/src/pages/channel/channel-form.tsx114-233 The frontend also manages agent identity, context configuration, and ReAct loop parameters examples/web_ui/frontend/src/api/types.ts23-40
For details, see Management Pages & Panels.
The following diagram bridges the frontend API calls to the corresponding backend routers and schema definitions.
Sources:
The UI supports multiple languages (English and Chinese) through JSON locale files. These files define translations for common UI elements, tool names (e.g., bash, read, edit), and error descriptions ranging from authentication failures to rate limits examples/web_ui/frontend/src/i18n/locales/en.json61-136
Sources: