Frontend Overview

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

🔗 Type-Safe APIs

OpenAPI code generation with TanStack Query integration eliminates API guesswork.

import { useGetTasksMyTasks } from '@/api/queries'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { TasksService } from '@/api/requests'

// Fully typed queries with auto-refetching
export function TaskList() {
  const { data: tasks, isLoading } = useGetTasksMyTasks()

  // Mutations with optimistic updates
  const queryClient = useQueryClient()
  const createMutation = useMutation({
    mutationFn: TasksService.postTasksMyTasks,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['/tasks/my-tasks'] })
    }
  })

  return <div>{/* TypeScript knows exact types */}</div>
}

Workflow:

1. Backend updates → FastAPI generates OpenAPI schema
2. Run npm run codegen → generates TypeScript client + TanStack Query hooks
3. Use typed hooks → get autocomplete, type checking, and caching

Learn More: API Integration Guide → | Project Structure →

---

🎨 Design System Philosophy

Modern, accessible UI with ShadCN and TailwindCSS:

• ShadCN/UI Components - Copy-paste accessible components built on Radix UI
• TailwindCSS - Utility-first styling for rapid customization
• Dark Mode Support - Built-in theme switching
• Full Customization - Own your components, modify as needed

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

// Composable, accessible components
<Card className="hover:shadow-lg transition-shadow">
  <CardHeader>
    <CardTitle>Task Title</CardTitle>
  </CardHeader>
  <CardContent className="flex items-center justify-between">
    <p className="text-sm text-muted-foreground">Description here</p>
    <Button variant="outline" size="sm">Edit</Button>
  </CardContent>
</Card>

ShadCN Benefits:

• You own the code (components live in your repo)
• Fully customizable with TailwindCSS
• Accessible by default (Radix UI primitives)
• No bloated dependencies

Learn More: Theming Guide →

---

🗄️ State Management Strategy

When to use different state solutions:

State Type	Solution	Example
Local UI State	useState	Form inputs, modal open/closed
Shared Component State	Custom hooks	Search filters, pagination
Global App State	Zustand stores	User preferences, UI state
Server State	TanStack Query	Task lists, user data from API

// Local state - component only
const [isOpen, setIsOpen] = useState(false)

// Global state - multiple components
const { user, login, logout } = useAuthStore()

// Server state - from API with caching
const { data: tasks, isLoading } = useGetTasksMyTasks()

Learn More: TanStack Query patterns → | Zustand State →

---

📦 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: "00000000-0000-0000-0000-000000000000" })}>
        Start Workflow
      </button>
      <AbraxasTimeline steps={timelineSteps} />
    </div>
  )
}

Get Started: Workflow Interfaces →

---

⚡ Developer Experience

Modern tooling configured and ready:

• Next.js 15 with Turbopack: Ultra-fast builds and hot reload
• TypeScript: Type safety everywhere
• App Router: File-based routing with layouts
• ESLint: Consistent code formatting
• TailwindCSS: IntelliSense and autocomplete

---

🚀 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.