Frontend Overview

Modern React frontend with TypeScript, built for rapid development and type safety.

🔗 Type-Safe APIs

OpenAPI code generation eliminates API guesswork.

import { client } from '@/types/openapi'
import type { TaskDTO, CreateTaskDTO } from '@/types/openapi'

// Fully typed API calls
export async function createTask(data: CreateTaskDTO): Promise<TaskDTO> {
  const { data: task, error } = await client.POST('/tasks/', { body: data })
  
  if (error) {
    throw new Error('Failed to create task')
  }
  
  return task // TypeScript knows this is TaskDTO
}

Workflow:

1. Backend updates → FastAPI generates OpenAPI schema
2. Run npm run generate-api → generates TypeScript types
3. Use typed client → get autocomplete and type checking

Get Started: API Integration →

---

🎨 Design System

Mantine + TailwindCSS for fast, consistent UIs.

import { Button, Card, Group } from '@mantine/core'

export function Example() {
  return (
    <Card className="p-4 border border-gray-200 hover:shadow-lg transition-shadow">
      <Group>
        <span className="text-xl font-bold mb-2">Styled with Tailwind</span>
        <Button variant="filled" color="mistral">Mantine Button</Button>
      </Group>
    </Card>
  )
}

White-Label Ready: Customize themes in src/theme/whitelabel.config.ts:

export const whiteLabelConfig = {
  primaryColor: '#3b82f6',     // Your brand color
  defaultRadius: 'md',         // Component border radius
  fontFamily: 'Inter',         // Typography
  appName: 'My Task App',      // App branding
}

Get Started: Theming →

---

🗄️ State Management

Zustand for simple, performant state.

import { create } from 'zustand'

interface TaskState {
  tasks: Task[]
  addTask: (task: Task) => void
  removeTask: (id: string) => void
}

export const useTaskStore = create<TaskState>((set) => ({
  tasks: [],
  addTask: (task) => set((state) => ({ tasks: [...state.tasks, task] })),
  removeTask: (id) => set((state) => ({ 
    tasks: state.tasks.filter(t => t.id !== id) 
  })),
}))

// Use in components
export function TaskList() {
  const { tasks, addTask } = useTaskStore()
  // Component logic...
}

When to use:

• Global application state (user info, themes)
• Shared state between distant components
• Complex state logic that needs persistence

Get Started: State Management →

---

📦 Ready-to-Use Components

AI interfaces that work out of the box:

• Chat Interface: Complete chat UI with streaming responses
• OCR Dropzone: Drag files, get text instantly
• Semantic Search: Vector search with similarity scores
• Workflow Timeline: Real-time Abraxas process visualization

import { AbraxasTimeline } from '@/components/features/abraxas-timeline/Timeline'
import { useAbraxasWorkflow } from '@/hooks/useAbraxas'

export function WorkflowPage() {
  const { start, timelineSteps } = useAbraxasWorkflow('my-workflow')
  
  return (
    <div>
      <button onClick={() => start({ user_id: 1 })}>
        Start Workflow
      </button>
      <AbraxasTimeline steps={timelineSteps} />
    </div>
  )
}

Get Started: Workflow Interfaces →

---

⚡ Developer Experience

Modern tooling configured and ready:

• Vite: Fast builds and hot reload
• TypeScript: Type safety everywhere
• React Router v7: File-based routing
• ESLint + Prettier: Consistent code formatting

---

🚀 Getting Started

Build real features with these learning paths:

1. Build Your First Component → - Complete task management interface
2. Type-Safe API Calls → - OpenAPI integration and code generation
3. State Management → - Zustand patterns and best practices
4. White-Label Theming → - Customize themes and branding
5. Abraxas Workflows → - Real-time process monitoring

Start with one feature, understand the patterns, then build what you need.