FrontendGetting Started
Project Structure
Directory layout and file organization.
Top-Level Structure
frontend/
├── public/ # Static assets (favicon, images)
├── src/
│ ├── app/ # Next.js App Router (pages, layouts, API routes)
│ ├── components/ # React components by feature
│ ├── config/ # Site, dashboard, and marketing configuration
│ ├── content/ # MDX content for blog (content-collections)
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Core utilities, types, auth, validations
├── .env.local # Environment variables
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript config with path aliases
└── package.jsonApp Directory
src/app/
├── (auth)/ # Authentication pages (login, register, reset)
├── (marketing)/ # Public pages (home, pricing, blog, legal)
├── (dashboard)/ # Protected dashboard area
│ └── dashboard/
│ ├── page.tsx # Dashboard home (workspace list)
│ ├── profile/ # User profile
│ ├── settings/ # Account settings
│ └── workspaces/
│ └── [workspaceId]/
│ ├── page.tsx # Workspace home
│ ├── details/ # Workspace settings
│ ├── chat/ # AI chat sessions
│ │ ├── page.tsx # New chat
│ │ ├── history/ # Chat history
│ │ └── [chatId]/ # Chat session
│ ├── documents/ # Document management
│ ├── knowledge-bases/ # Knowledge base management
│ ├── teams/ # Team management
│ └── settings/ # Workspace settings
├── (workspaces)/ # Workspace list/creation
├── (invitations)/ # Invitation acceptance
├── (chats)/ # Public shared chat sessions
├── api/ # API route handlers (backend proxy)
└── layout.tsx # Root layout (theme, fonts, toaster)Components Directory
src/components/
├── ai-elements/ # AI chat UI primitives (28 components)
│ ├── message.tsx # Message container with avatar
│ ├── prompt-input.tsx # Advanced input with attachments
│ ├── chain-of-thought.tsx # Expandable reasoning steps
│ ├── citation-sources.tsx # RAG source display
│ └── ...
├── auth/ # Login, register, reset forms
├── billing/ # Subscription management
├── chat/ # Chat interface (session UI, messages, settings)
├── dashboard/ # Dashboard layout components
├── documents/ # Document upload, viewer, table
├── fragments/ # Small reusable pieces
├── knowledge-base/ # KB list, create, detail
├── marketing/ # Marketing page sections
├── sections/ # Page section layouts
├── teams/ # Team management components
├── ui/ # shadcn/ui primitives (44+ components)
└── workspaces/ # Workspace management componentsLibrary Directory
src/lib/
├── auth/ # Authentication utilities
│ ├── providers.ts # NextAuth configuration
│ ├── utils.ts # Token validation, refresh
│ ├── session.ts # Server-side session helpers
│ └── actions.ts # Login/logout server actions
├── types/ # TypeScript type definitions
│ ├── auth.ts # User, token types
│ ├── chat.ts # ChatSession, Message types
│ ├── documents.ts # Document, KnowledgeBase types
│ ├── workspaces.ts # Workspace, Team, Membership types
│ ├── billing.ts # Subscription, Plan types
│ ├── common.ts # Shared base types
│ └── nav.ts # Navigation config types
├── validations/ # Zod schemas
│ ├── auth.ts # Login, register, reset schemas
│ ├── chat.ts # Chat session, message schemas
│ ├── documents.ts # Document, KB schemas
│ ├── workspaces.ts # Workspace, team schemas
│ ├── billing.ts # Subscription schemas
│ └── common.ts # Base schema, enums
├── actions/ # Server actions
│ └── data.ts # Generic fetch with validation
├── hooks/ # Library hooks
├── billing/ # Pricing utilities
├── chat/ # Chat utilities
├── workspaces/ # Workspace data fetching
├── roles-permissions.ts # Permission context and checks
├── utils.ts # Common utilities (cn, fetch, format)
└── formatters.ts # Data formatting helpersConfig Directory
src/config/
├── site.ts # App name, URLs, API paths
├── dashboard.ts # Dashboard navigation structure
└── marketing.ts # Marketing site navigationPath Aliases
Configured in tsconfig.json:
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
"content-collections": ["./.content-collections/generated"]
}
}
}All imports use the @/ alias:
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { siteConfig } from "@/config/site";