Build Your First App -- Loki Mode Walkthrough

1

Describe Your Idea

Start by describing what you want to build. Loki Mode understands natural language prompts and converts them into a full project specification.

Claude Code Terminal

Your prompt

Build a SaaS dashboard for tracking team productivity.
It should have user authentication, real-time charts,
a Kanban board, and export to CSV. Use Next.js,
Tailwind, and PostgreSQL.

# Loki Mode processes your prompt through the RARV cycle
loki start --provider claude ./prd.md

# Phase 1: Reason -- analyze requirements
# Phase 2: Act -- generate architecture
# Phase 3: Reflect -- validate against best practices
# Phase 4: Verify -- confirm completeness

Next: AI Plans the Architecture →

2

AI Plans the Architecture

The AI analyzes your requirements and generates a complete project architecture, including file structure, dependencies, and data models.

Architecture Planning

# Project structure generated

src/

app/

layout.tsx ........... root layout with providers

page.tsx ............. dashboard home

auth/ ............... login, register, reset

dashboard/ .......... charts, kanban, exports

api/ ................ REST endpoints

components/ ........... 12 reusable components

lib/ .................. db, auth, utils

Dependencies: next, prisma, chart.js, next-auth

Estimated files: 34 files, ~4,200 lines of code

# Opus model creates the architecture plan
build_prompt() # Injects RARV instructions + context
detect_complexity() # Returns: "standard"
get_rarv_tier() # Iteration 1 = Opus for planning

# Memory system provides relevant patterns
retrieve_context() # Loads similar past projects

Next: Code Generation →

3

Code Generation

Loki Mode generates production-quality code across all files simultaneously, following best practices and your chosen tech stack.

Code Generation

page.tsx

schema.prisma

auth.ts

            1import { DashboardLayout } from "@/components/layout";
            2import { ProductivityChart } from "@/components/charts";
            3import { KanbanBoard } from "@/components/kanban";
            4
            5export default async function Dashboard() {
            6  const session = await getSession();
            7  const metrics = await fetchMetrics(session.teamId);
            8
            9  return (
            10    <DashboardLayout>
            11      <ProductivityChart data={metrics} />
            12      <KanbanBoard teamId={session.teamId} />
            13    </DashboardLayout>
          

# Sonnet model handles implementation
get_rarv_tier() # Iterations 2+ = Sonnet for coding

# Parallel generation via Task tool
# -- Stream 1: Components (12 files)
# -- Stream 2: API routes (8 files)
# -- Stream 3: Database schema + migrations
# -- Stream 4: Auth configuration

Next: Quality Gates Run →

4

Quality Gates Run

Every piece of generated code passes through automated quality gates: linting, type checking, tests, security scans, and peer review by multiple AI agents.

Quality Gate Results

Static Analysis (ESLint + TypeScript)

0 errors, 0 warnings across 34 files

PASS

Unit Tests

47 tests passing, 94% coverage

PASS

Security Scan (CodeQL)

No vulnerabilities detected

PASS

3-Reviewer Peer Review

All 3 reviewers approved (blind review)

PASS

Anti-Sycophancy Check

Devil's advocate found no issues

PASS

E2E Smoke Tests (Playwright)

8 scenarios passing, all browsers

PASS

# Quality gate pipeline (skills/quality-gates.md)
run_code_review() # 3 blind reviewers + anti-sycophancy
loki audit lint # ESLint + TypeScript strict mode
loki audit test # Unit + integration + E2E

# If any gate fails, code is automatically fixed
# and gates re-run until all pass

Next: Preview Your App →

5

Preview Your App

Your application is built and running locally. Preview it in a live browser frame before deploying to production.

Live Preview

localhost:3000/dashboard

Team Productivity Dashboard

Welcome back, Sarah. Your team completed 23 tasks this week.

Real-time charts

Kanban board

CSV export

# App runner starts the development server
npm run dev # Next.js dev server on port 3000

# Playwright validates the running app
npx playwright test --project=chromium

# Loki Mode dashboard shows live status
loki web # Opens dashboard at localhost:57374

Next: Deploy in One Click →

6

Deploy in One Click

Your app is production-ready. Deploy to your preferred cloud platform with a single command. Loki Mode handles CI/CD, environment variables, and DNS.

Deployment

Deployment Successful

https://team-dashboard.vercel.app

34

Files Generated

4,218

Lines of Code

12 min

Total Build Time

# Deployment pipeline
git push origin main # Triggers CI/CD
vercel --prod # Deploy to production

# Post-deploy verification
curl -s https://team-dashboard.vercel.app/api/health
# {"status": "healthy", "version": "1.0.0"}

Build Your First App with Loki Mode

Describe Your Idea

AI Plans the Architecture

Code Generation

Quality Gates Run

Preview Your App

Team Productivity Dashboard

Deploy in One Click

Deployment Successful

Ready to Build?