A production-grade AI workspace platform inspired by Claude.com.
Chat, Research, Code, Projects, Memory, Extensions — all features unlocked, no billing gates.

Recall is a unified AI workspace that provides a complete interface for interacting with large language models. It combines real-time chat with streaming responses, deep research capabilities, a code editor with AI assistance, project management, persistent memory, and a full extension ecosystem — all within a single, polished web application.

• Architecture Overview
• Tech Stack
• Getting Started
• Feature Pages
• API Reference
• Design System
• Configuration
• Deployment
• Contributing
• License

Recall follows a modern full-stack architecture built on Next.js App Router.

graph TD
    Client["Client (Browser)"]
    NextJS["Next.js App Router"]
    
    subgraph Frontend [Frontend Layers]
        ClientComp["Client Components (React 19)"]
        ThemeProvider["ThemeProvider (Theming)"]
        LayoutShell["Sidebar + Topbar Shell"]
        FeaturePages["Feature Pages (Chat, Code, RAG, etc.)"]
    end
    
    subgraph Backend [Backend Services /lib]
        APIRoutes["API Route Handlers (/api/*)"]
        AuthService["Auth Service (JWT/Bcrypt)"]
        ClaudeSDK["Claude API Service (Anthropic)"]
        RAGPipeline["RAG Pipeline (Chunking/Retriever)"]
        MCPClient["MCP Client (JSON-RPC)"]
        Sandbox["Code Sandbox (Multi-runtime)"]
        DB["Database Layer (Prisma/Postgres)"]
    end
    
    Client --> NextJS
    NextJS --> Frontend
    NextJS --> Backend
    
    Frontend --> ThemeProvider
    Frontend --> LayoutShell
    LayoutShell --> FeaturePages
    
    Backend --> AuthService
    Backend --> ClaudeSDK
    Backend --> RAGPipeline
    Backend --> MCPClient
    Backend --> Sandbox
    Backend --> DB

The platform integrates a production-grade Retrieval-Augmented Generation pipeline:

Ingestion Path (offline): Document Sources -> Ingestion Pipeline (OCR, chunking, metadata extraction) -> Embedding Service -> Vector DB / Index Layer

Query Path (online): User Query -> API Gateway -> Embedding Service -> Vector DB -> Retriever Service -> Reranker -> Context Builder -> LLM Generator -> Cache -> User Response

Operations: Orchestration, caching (LRU with TTL), logging, APM, feedback loops, and scheduled reindexing.

Layer	Technology	Purpose
Framework		App Router, SSR, API routes
UI Library		Component architecture
Language		Type safety
Styling		Design tokens, theming
Icons		Outline + Solid icon system
Font		Typography
Bundler		Fast dev builds
Package Manager		Dependency management

Layer	Technology	Purpose
LLM		Primary AI model
Vector DB		Production vector search
Cache		Response caching, sessions
Database		Conversations, users, metadata
Queue		Background job processing
Auth		Authentication
Observability		Tracing, metrics
Container		Containerization
Orchestration		Production orchestration
CDN		Edge caching, DDoS protection

• Node.js 18.17 or later
• npm 9.x or later

# Clone the repository
git clone https://github.com/your-org/recall.git
cd recall

# Install dependencies
npm install

# Start development server
npm run dev

The application will be available at http://localhost:3000.

# Create optimized production build
npm run build

# Start production server
npm start

Create a .env.local file in the project root:

# AI Model Configuration
ANTHROPIC_API_KEY=sk-ant-...
DEFAULT_MODEL=sonnet-4.6

# Database
DATABASE_URL=postgresql://user:pass@localhost:5432/recall
REDIS_URL=redis://localhost:6379

# Vector Database
PINECONE_API_KEY=your-key
PINECONE_INDEX=recall-production
PINECONE_ENVIRONMENT=us-east-1

# Authentication
JWT_SECRET=your-secret-key
JWT_EXPIRY=7d

# File Storage
S3_BUCKET=recall-uploads
S3_REGION=us-east-1
AWS_ACCESS_KEY_ID=your-key
AWS_SECRET_ACCESS_KEY=your-secret

# Feature Flags
ENABLE_EXTENDED_THINKING=true
ENABLE_TOOL_USE=true
ENABLE_WEB_SEARCH=true

# Observability
OTEL_ENDPOINT=https://otel-collector:4317
LOG_LEVEL=info

The landing page provides a Claude-style greeting with a centered chat input, model selector (Opus / Sonnet / Haiku), Extended Thinking toggle, and quick action chips (Write, Learn, Code, Research, Analyze). The greeting adapts based on time of day.

Full-featured chat interface with:

• Conversation list sidebar with search and pinning
• Model selector with Extended Thinking toggle
• SSE streaming message display
• Markdown rendering in AI responses
• File attachment (PaperClipIcon) and image upload (PhotoIcon)
• Copy and regenerate actions per message
• Keyboard shortcut support (Enter to send, Shift+Enter for newline)

Multi-step AI research agent with:

• Topic input with depth selection (Quick / Deep / Multi-Source Synthesis)
• Real-time progress indicator during research
• Source list with relevance scoring
• Generated research report with copy and export actions
• Research job history

Three-panel code environment:

• File Tree (left): hierarchical folder/file navigation
• Editor (center): syntax-highlighted code display with tabs
• AI Panel (right): contextual code analysis with Explain, Refactor, Tests, Debug, and Run actions

Project management interface:

• Grid view of project cards with color-coded icons
• Search/filter functionality
• Create project modal with name and description
• Per-project file count, last updated timestamp
• Upload and settings actions per project

Persistent memory manager:

• Categorized memory entries (Preferences, Context, Infrastructure, Profile)
• Search across all memory keys and values
• Add, edit, and delete operations
• Auto-populated from conversation context

Extension marketplace:

• Chrome Extension, Excel Add-in, PowerPoint Add-in
• API Access, Slack Integration, VS Code Extension
• MCP Connectors, Google Workspace
• Connection status indicators (CheckCircleIcon for connected)
• Configure / Install / Documentation actions

Tabbed settings interface:

• Profile: Name, email, avatar upload
• Models: Default model selection with checkmark, Extended Thinking toggle, Tool Use toggle, Max Output Tokens slider
• Appearance: Theme picker (Light / Dark / System) with visual cards
• API Keys: Key table with create, rotate, and delete
• Data and Privacy: Memory toggle, training data opt-out, danger zone (export, delete)

Admin dashboard:

• Stats cards (Active Users, Messages Today, Avg Latency, Token Usage) with trend indicators
• User management table with role badges and status
• System health table with per-service status (operational / degraded)
• Reindex action per service

Searchable documentation page:

• Full-text search across all documentation sections
• Category-based navigation
• Expandable article cards
• Covers: Getting Started, Architecture, API Reference, Chat, Research, Code, Projects, Memory, Extensions, Settings, Admin, RAG Pipeline, Deployment, Security

All API routes return a consistent JSON envelope:

{
  "success": true,
  "timestamp": "2026-03-01T12:00:00.000Z",
  "data": { ... }
}

Error responses:

{
  "success": false,
  "error": "Error message",
  "timestamp": "2026-03-01T12:00:00.000Z"
}

The design system is implemented entirely in CSS Custom Properties, with no external CSS framework dependency.

Three theme modes supported via ThemeProvider:

• Light: Clean white backgrounds with subtle shadows
• Dark: Deep charcoal backgrounds with soft glows
• System: Follows OS preference via prefers-color-scheme

Theme is persisted in localStorage and applied via data-theme attribute on the <html> element.

/* Backgrounds */
--bg-primary, --bg-secondary, --bg-tertiary

/* Surfaces */
--surface, --surface-hover, --surface-active

/* Text */
--text-primary, --text-secondary, --text-tertiary

/* Accent */
--accent, --accent-light, --accent-hover

/* Borders */
--border, --border-subtle

/* Status */
--success, --warning, --error, --info

/* Shadows */
--shadow-sm, --shadow-md, --shadow-lg, --shadow-glow

/* Radii */
--radius-sm, --radius-md, --radius-lg, --radius-xl

/* Transitions */
--transition-fast, --transition-normal

Heroicons 2.x with a consistent style guide:

@media (max-width: 480px)   /* Mobile */
@media (max-width: 768px)   /* Tablet */
@media (max-width: 1024px)  /* Small Desktop */
@media (max-width: 1280px)  /* Desktop */

All features are enabled by default. There is no billing or subscription logic. The /api/features endpoint returns all flags as true.

npm install -g vercel
vercel

Vercel automatically detects Next.js and configures:

• Edge runtime for API routes
• Static generation for applicable pages
• Automatic HTTPS and CDN

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["npm", "start"]

docker build -t recall .
docker run -p 3000:3000 recall

A Helm chart or raw manifests can be used. Minimum recommended resources:

• JWT-based authentication with RS256 signing
• Refresh token rotation
• Rate limiting per IP and per user

• All API routes validate request body schemas
• CORS configured for allowed origins
• CSRF protection via SameSite cookies
• Input sanitization on all user-facing endpoints

• Memory can be disabled per-user
• Training data opt-out available
• Data export (GDPR compliance)
• Account deletion with cascade

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit changes: git commit -m "Add my feature"
4. Push to the branch: git push origin feature/my-feature
5. Open a Pull Request

• Use TypeScript strict mode
• Follow the existing CSS variable naming conventions
• Use Heroicons (outline for navigation, solid for actions/status)
• All API routes must use the jsonResponse / errorResponse helpers
• Write semantic HTML with proper heading hierarchy

MIT License. See LICENSE for details.

_{Built with Next.js, React, TypeScript, and Heroicons}