Octopus Micro-Frontends
The Octopus frontend is composed of four micro-frontends, each handling a distinct concern: agent configuration (agents-app), the chat interface (chat-app), knowledge management (knowledge-app), and plugin/extension management (extension-app).
Four Micro-Frontends
| App | Path | Users | Purpose |
|---|---|---|---|
| agents-app | /octopus/agents | Admins, AI Engineers | Create and configure agents, manage teams, set goals/prompts |
| chat-app | /octopus/chat | End users | Full-page chat UI; embeddable widget via ChatbotUI plugin |
| knowledge-app | /octopus/knowledge | Content managers, Admins | Upload documents to agent knowledge bases, manage embeddings |
| extension-app | /octopus/extensions | Platform admins | Enable/disable/configure Octopus plugins |
agents-app
The agent configuration studio. Allows administrators to:
- Create new agents with name, persona, LLM selection, and initial system prompt
- Define agent goals, out-of-scope topics, and escalation criteria
- Configure memory settings per agent (which types enabled, TTL, top-K for retrieval)
- Register MCP tool servers for the agent's tool registry
- Group agents into teams with routing policies
- Manage user-to-agent access grants
// TypeScript: agents-app agent list view
interface Agent {
id: string;
name: string;
persona: { displayName: string; tone: string; language: string };
llmConfig: { provider: string; model: string; maxContextTokens: number };
memoryConfig: { episodicEnabled: boolean; semanticEnabled: boolean };
status: 'active' | 'draft' | 'archived';
}chat-app
The primary end-user chat interface. Features:
- Full-page multi-agent chat with agent selector
- Server-Sent Events (SSE) streaming for token-by-token display
- Tool call visualization — shows "Agent is using: search_knowledge" during tool calls
- Context Inspector panel (dev/admin mode) — shows the exact prompt sent to the LLM
- Conversation history sidebar — browse past sessions
- Feedback controls (thumbs up/down on each response)
knowledge-app
The knowledge base management UI. Content managers use this to populate an agent's semantic memory:
- Upload documents: PDF, TXT, Markdown, URL (web page)
- View ingestion status: queued → chunking → embedding → indexed
- Search the knowledge base to verify content is retrievable
- Delete or re-index documents
- View per-chunk metadata: source, chunk number, token count, embedding date
extension-app
The plugin management console. Platform administrators use this to control which Octopus plugins are active:
- List all registered plugins with their status (enabled / disabled / error)
- Configure plugin settings via a plugin-specific form (powered by AtlasForms)
- View plugin startup logs and health status
- Register new custom plugins by providing a plugin assembly path or NuGet package
All four Octopus micro-frontends are built with Webpack Module Federation. They are independently deployable and integrate into the main BizFirstAI Studio shell without requiring a full rebuild of the host application.