living-on-edge

Living on Edge

A monorepo project for AI-powered block generation with support for multiple AI providers (Mistral, Claude, OpenAI). This project includes a backend API, a user-facing frontend application, and a VS Code extension.

Project Overview

This is a Turborepo monorepo that consists of:

Applications

http-backend: Express.js backend API that integrates with multiple AI providers (Mistral AI, Anthropic Claude, OpenAI) to generate code blocks. Features include:
- RESTful API endpoints for AI-powered code generation
- User authentication and management via Supabase
- Database operations using Prisma ORM with PostgreSQL
- Support for multiple AI models with configurable prompts
- File upload and processing capabilities
user-frontend: React + Vite frontend application providing a user interface for:
- Interactive code generation and editing
- Monaco Editor integration for code editing
- Project management and user authentication
- Real-time collaboration features
vs-code-block-generation: VS Code extension for generating code blocks directly within the editor

Packages

@repo/typescript-config: Shared TypeScript configuration files
@repo/eslint-config: Shared ESLint configurations
@repo/ui: Shared UI component library

Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js: Version 18 or higher (Download)
pnpm: Version 10.12.4 or compatible (Installation Guide)
PostgreSQL: Database server for storing application data (Download)
Supabase Account: For authentication and backend services (Sign up)
AI API Keys (at least one of the following):
- Mistral AI API Key (Get API Key)
- Anthropic Claude API Key (Get API Key)
- OpenAI API Key (Get API Key)

Dependencies

Backend (`http-backend`)

Core Dependencies:

express: Web framework for Node.js
@prisma/client: Prisma ORM client for database operations
@supabase/supabase-js: Supabase client for authentication and backend services
cors: Cross-Origin Resource Sharing middleware
dotenv: Environment variable management
multer: File upload handling

AI SDKs:

@mistralai/mistralai: Mistral AI SDK
@anthropic-ai/sdk: Anthropic Claude SDK
openai: OpenAI SDK

Development Dependencies:

prisma: Prisma CLI for database migrations
typescript: TypeScript compiler

Frontend (`user-frontend`)

Core Dependencies:

react & react-dom: React library
vite: Build tool and development server
react-router-dom: Client-side routing
@supabase/supabase-js: Supabase client for authentication
axios: HTTP client for API requests

Editor & UI:

@monaco-editor/react: Monaco Editor React wrapper
monaco-editor: Code editor component
lucide-react: Icon library
tailwindcss: Utility-first CSS framework

Development Dependencies:

@vitejs/plugin-react: Vite plugin for React
typescript: TypeScript compiler
eslint: Code linting

Root

turbo: Turborepo for monorepo task orchestration
prettier: Code formatter
typescript: TypeScript compiler

How to Clone and Run on Local Environment

1. Clone the Repository

git clone <repository-url>
cd living-on-edge

2. Install pnpm (if not already installed)

npm install -g pnpm@10.12.4

Or using other methods:

# Using Homebrew (macOS)
brew install pnpm

# Using npm
npm install -g pnpm

# Using curl
curl -fsSL https://get.pnpm.io/install.sh | sh -

3. Install Dependencies

From the root directory, install all dependencies:

pnpm install

4. Set Up Environment Variables

Backend Environment Variables

Create a .env file in apps/http-backend/ with the following variables:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/dbname?schema=public"

# Supabase Configuration
SUPABASE_URL="your-supabase-project-url"
SUPABASE_ANON_KEY="your-supabase-anon-key"
SUPABASE_SERVICE_ROLE_KEY="your-supabase-service-role-key"

# AI API Keys (at least one required)
MISTRAL_API_KEY="your-mistral-api-key"
ANTHROPIC_API_KEY="your-anthropic-api-key"
OPENAI_API_KEY="your-openai-api-key"

# Server Configuration
PORT=3000

# AI Model Selection (optional, defaults to mistral)
aiModel=mistral

# Mock Mode (optional, for testing)
mock=false

# Stream Configuration (optional)
STREAM_CHAT_MAX_TOKENS=4096
PROMPT_ENHANCEMENT_MAX_TOKENS=2048

Frontend Environment Variables

Create a .env file in apps/user-frontend/ with the following variables:

# Backend API URL
VITE_BACKEND_URL="http://localhost:3000"

# Supabase Configuration
VITE_SUPABASE_URL="your-supabase-project-url"
VITE_SUPABASE_ANON_KEY="your-supabase-anon-key"

5. Set Up Database

Create PostgreSQL Database:
```
createdb your_database_name
```

Run Prisma Migrations:

cd apps/http-backend
npx prisma migrate dev

Generate Prisma Client:
```
npx prisma generate
```

6. Run the Applications

Option A: Run All Applications (Recommended)

From the root directory:

pnpm dev

This will start both the backend and frontend applications concurrently.

Option B: Run Applications Individually

Backend:

cd apps/http-backend
pnpm dev

The backend will start on http://localhost:3000 (or the port specified in your .env file).

Frontend:

cd apps/user-frontend
pnpm dev

The frontend will start on http://localhost:5173 (default Vite port).

Option C: Run with Specific AI Model

You can specify which AI model to use:

# Use Mistral AI
cd apps/http-backend
pnpm mistral

# Use Claude
cd apps/http-backend
pnpm claude

7. Verify Installation

Backend: Check if the API is running by visiting http://localhost:3000 or checking the console logs
Frontend: Open http://localhost:5173 in your browser
Database: Verify database connection by checking Prisma logs

Development Commands

Root Level Commands

# Build all apps and packages
pnpm build

# Run development servers for all apps
pnpm dev

# Lint all packages
pnpm lint

# Format code
pnpm format

# Type check all packages
pnpm check-types

Backend Commands

cd apps/http-backend

# Development mode (default: Mistral)
pnpm dev

# Production mode
pnpm prod

# Use specific AI model
pnpm mistral
pnpm claude

Frontend Commands

cd apps/user-frontend

# Development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Lint code
pnpm lint

Troubleshooting

Common Issues

Port Already in Use: Change the PORT in your backend .env file or kill the process using the port
Database Connection Error: Verify your DATABASE_URL is correct and PostgreSQL is running
Missing API Keys: Ensure at least one AI API key is set in your backend .env file
Prisma Client Not Generated: Run npx prisma generate in the apps/http-backend directory
pnpm Not Found: Install pnpm globally or use npx pnpm instead

Getting Help

Check the console logs for error messages
Verify all environment variables are set correctly
Ensure all prerequisites are installed and up to date
Review the Prisma migration status

Project Structure

living-on-edge/
├── apps/
│   ├── http-backend/          # Express.js backend API
│   ├── user-frontend/         # React + Vite frontend
│   └── vs-code-block-generation/  # VS Code extension
├── packages/
│   ├── eslint-config/         # Shared ESLint config
│   ├── typescript-config/      # Shared TypeScript config
│   └── ui/                    # Shared UI components
├── package.json               # Root package.json
├── pnpm-workspace.yaml        # pnpm workspace configuration
├── turbo.json                 # Turborepo configuration
└── README.md                  # This file