5.9 KiB
5.9 KiB
Veridian AGENTS.md
Nuxt 4 AI chat platform with Drizzle + PostgreSQL + better-auth
Architecture Overview
app/ # Nuxt 4 application (SSR)
├── components/ # Vue components (Sidenav, Message, Settings, etc.)
├── composables/ # Shared state (useChat, useAuth, useModels, etc.)
├── layouts/ # Auth and default layouts
├── middleware/ # Global auth middleware
├── pages/ # File-based routing (/, /auth/*, /agent/*)
├── plugins/ # Auth plugins (client/server)
├── types/ # TypeScript interfaces
└── utils/ # Crypto, model-mapping, search utilities
server/ # Server-side API routes
└── api/
├── auth/ # Better-auth handler
├── chat/ # Generation, cancel endpoints
└── provider/ # Model fetching from providers
drizzle/ # Database (migrated from Triplit)
├── schema.ts # Full schema with auth + app tables
├── relations.ts # Table relationships
└── migrations/ # SQL migration files
lib/ # Shared utilities
├── auth.ts # Better-auth server config
└── auth-client.ts # Better-auth client
Core Commands
As an agentic agent, never run the development server yourself. Instead, once you have completed your task, end generation and inform me that you are done and request a review of your changes. You are allowed to use database commands.
Database Commands
bunx drizzle-kit push- Push schema changes to databasebunx drizzle-kit generate- Generate migration from schema changesbunx drizzle-kit migrate- Run pending migrations
Code Style
- Indentation: 4 spaces (no tabs)
- Semicolons: Always required
- Equality: Strict equality only (
===,!==) - Components: PascalCase, never self-closing tags
- Functions: camelCase for functions, PascalCase for constructors/classes
- Constants: SCREAMING_SNAKE_CASE for constants, camelCase for const values
- Files: kebab-case for files, PascalCase for Vue components
- State:
useState('prefix:name', () => default)for reactive state
Imports Order
Group imports in this order (alphabetical within groups):
- Type imports (
types/) - Dependency imports (npm packages)
- Vue/Nuxt imports (
vue,#app,~~/,~/,@/) - Local imports (
lib/,server/)
// Example import order
import type { Result, Ok, Err } from '~~/types/result';
import type { Foo } from 'vue';
import { ref, computed } from 'vue';
import { useFeature } from '~/composables/useFeature';
import { decrypt } from '~/utils/crypto';
import { authClient } from '~~/lib/auth-client';
Error Handling
Avoid using throw statements in your code.
Use the Result<T, E> type with Ok() and Err() factory functions:
import { type Result, Ok, Err } from '~~/types/result';
const myFunction(): Result<ReturnType, ErrorType> {
if (error) {
return Err(ErrorType.SpecificError);
}
return Ok(data);
}
// Usage
const result = myFunction();
if (result.ok === false) {
console.error(result.error);
return;
}
processData(result.data);
Composables Pattern
All composables return reactive state + actions:
export const useFeature = () => {
const state = useState('feature:state', () => defaultValue);
const computedValue = computed(() => /* logic */);
const actions = {
async doSomething() {
// implementation
},
};
return { state, computedValue, ...actions };
};
API Route Pattern
// File: server/api/endpoint.method.ts
import { protectRoute } from '~/server/utils/protect';
export default defineEventHandler(async (event) => {
await protectRoute(event);
// implementation
return { /* response */ };
});
Database Query Pattern (Drizzle)
// Server-side queries use Drizzle ORM
import { db } from '~~/server/db';
import { agents } from '~~/drizzle/schema';
// Query with relations
const result = await db.query.agents.findMany({
where: eq(agents.userId, userId),
with: { topics: true, messages: true },
});
// Insert with conflict handling
await db.insert(agents).values(data).onConflictDoNothing();
Authentication Flow
- Login: Client uses
authClient.signIn.email()→ derives encryption key from password - Session: Better-auth creates session token → stored in cookie
- API Keys: Encrypted client-side with AES-GCM (key derived from password + userId)
Key files: lib/auth.ts, app/plugins/auth.*.ts, app/middleware/auth.global.ts, app/composables/useAuth.ts
Styling System
UnoCSS with semantic color variables in app/assets/css/base.css:
--color-accent,--color-neutral,--color-text,--color-muted--color-highlight(for borders/hover states)- Theme-aware:
:root.dark/:root.lightwithcolor-mix()
Environment Variables
| Variable | Purpose |
|---|---|
DATABASE_URL |
PostgreSQL connection string |
BETTER_AUTH_SECRET |
Auth encryption |
Key Composables
| Composable | Purpose |
|---|---|
useAuth() |
Session/user state, signIn/signOut |
useChat(id) |
Send/regenerate messages, create topics |
useModels() |
Providers + models with auto-subscription |
useAgents() |
User's agents with topics |
useSidebar() |
Sidebar state + resize |
useTheme() |
Accent/neutral theme cookies |
useSettings() |
Settings dialog state |
Development Notes
- Never run dev server as agent - just complete tasks and signal done
- Always run
bunx drizzle-kit pushafter schema changes - Use
protectRoute()in all API routes for auth - All UI state that persists → use cookies (
useCookie()) - Real-time data → SSE events via
server/utils/events.ts - API keys → encrypted client-side before DB storage