Inside AutoBot's Frontend: A Developer Walkthrough

AutoBot is the open-source, self-hosted AI automation platform where your data never leaves your server.

GitHub: mrveiss/AutoBot-AI

---

What you see when you open AutoBot

AutoBot's chat interface greets you with a familiar two-pane layout: a conversation sidebar on the left and an active chat panel on the right. Behind that simplicity lives a rich UI built from about 40 focused Vue single-file components.

Chat UI

The core chat flow is:

ChatView.vue
  └── ChatInterface.vue
        ├── ChatSidebar.vue        ← conversation list + search
        ├── ChatHeader.vue         ← model selector, settings toggle
        ├── ChatMessages.vue       ← scrolling message feed
        │     └── MessageItem.vue  ← per-message bubble + citations
        ├── ChatInput.vue          ← textarea, attachments, send button
        ├── ChatTabs.vue           ← switch between Chat / Browser / Docs
        └── CitationsDisplay.vue   ← inline source links from RAG

The ChatTabs.vue component is the pivot point: it lets you jump between a raw conversation, an embedded browser session (for web research), and a documentation search sidebar — all within the same view.

Knowledge Base UI

AutoBot's Knowledge Base is where the "your data" part of Your data. Your AI. lives. The KnowledgeView.vue brings together:

• KnowledgeBrowser — file-tree style explorer of all ingested documents
• KnowledgeSearch — full-text + vector search with KBSearchResultPanel rendering scored results
• KnowledgeGraph / KnowledgeGraph3D — D3-powered entity graph so you can see how concepts connect
• KnowledgeUpload — drag-and-drop ingestion with real-time vectorization progress (VectorizationProgressModal)
• KnowledgeMaintenance — deduplication, cleanup stats, and orphan management

The pipeline inside KnowledgeView fans out to more than 30 sub-components, but each one has a narrow responsibility. If you add a new panel, you're usually only touching one file.

---

Component architecture in autobot-frontend/

autobot-frontend/
├── src/
│   ├── components/       # feature-scoped component trees
│   │   ├── chat/
│   │   ├── knowledge/
│   │   ├── agents/
│   │   ├── browser/
│   │   ├── charts/
│   │   └── base/         # shared primitives (buttons, modals, …)
│   ├── views/            # route-level pages (one per route)
│   ├── stores/           # Pinia stores (useChatStore, useKnowledgeStore, …)
│   ├── composables/      # shared reactive logic
│   ├── design-system/    # tokens.ts — canonical token catalog
│   ├── router/           # Vue Router config
│   └── styles/           # global CSS + Tailwind @theme block
├── cypress/              # end-to-end tests
└── package.json          # Vue 3 + Vite + Tailwind CSS 4 + TypeScript

Tech stack at a glance

Layer	Choice
Framework	Vue 3 (Composition API)
Language	TypeScript
Build	Vite
State	Pinia
Styling	Tailwind CSS 4 (@theme tokens)
Testing	Vitest (unit) + Cypress/Playwright (e2e)
Storybook	Component stories live in src/stories/

Design tokens

All colors, spacings, and radii flow from src/design-system/tokens.ts. This file is the single source of truth for token names; actual values live in src/assets/tailwind.css under the @theme block.

// tokens.ts (abridged)
export const SEMANTIC_COLORS = [
  { name: 'autobot-primary',   cls: 'bg-autobot-primary text-white' },
  { name: 'autobot-secondary', cls: 'bg-autobot-secondary text-white' },
  { name: 'autobot-success',   cls: 'bg-autobot-success text-white' },
  // …
]

Adding a new brand color means two edits: tailwind.css for the value, tokens.ts to register the name. That's it.

---

How to contribute to the UI

Get the repo running

git clone https://github.com/mrveiss/AutoBot-AI.git
cd AutoBot-AI/autobot-frontend
npm install
npm run dev

The dev server starts at http://localhost:5173. You don't need a running backend to work on visual components — the Storybook stories in src/stories/ cover most UI primitives in isolation.

Explore Storybook

npm run storybook

DesignTokens.stories.ts gives you the full token palette in one page. If you want to see a component in isolation before wiring it up to real data, stories are the right place to start.

Find good first issues

The fastest path to a first contribution is the good first issue + area: frontend label combination. These are scoped to single components or small style fixes — no need to understand the full stack before opening a PR.

Common entry points:

• Accessibility — the ACCESSIBILITY_IMPROVEMENTS.md doc tracks open a11y work across the chat and KB UIs.
• Design token gaps — new palette entries or missing dark-mode mappings in tailwind.css.
• Storybook coverage — components in src/components/base/ that don't have a story yet.
• Unit tests — src/components/**/__tests__/ has gaps; Vitest tests are welcome.

Testing approach

• Unit tests (npm run test:unit) — use Vitest + Vue Test Utils. Keep tests in __tests__/ next to the component.
• E2E (npm run test:e2e:dev) — Cypress tests live in cypress/. Run against the Vite dev server.
• Type-check — npx vue-tsc --noEmit -p tsconfig.app.json. The repo has a tracked baseline of ~248 type errors (legacy debt); PRs should not add errors — see the CI check in .github/workflows/frontend-typecheck-regression.yml.

PR checklist

1. npm run lint passes
2. npm run test:unit passes (or new tests added for the changed component)
3. No new type errors vs. the baseline
4. Storybook story updated/added if you touched a base/ component

---

Your data. Your AI.

AutoBot's frontend reflects the same philosophy as the project: everything runs locally, nothing is sent to a third party, and every part of the stack is open for you to inspect, extend, or replace.

If this post helped you find your way around the codebase, the best next step is to open an issue or pick one that's already waiting.

Links

• mrveiss/AutoBot-AI on GitHub
• Good first issues — frontend
• GitHub Sponsors
• CONTRIBUTING.md