Replit Agent Context Setup: Maximum Coding Productivity in 2026

# replit.toml - Project Configuration
[nix]
channel = "stable-23.05"

[deployment]
deploymentTarget = "cloudrun"
build = ["npm run build"]
run = ["npm start"]

[[ports]]
localPort = 3000
externalPort = 80

[env]
NODE_ENV = "production"

# PROJECT_CONTEXT.md - Agent Guidance
# Project: [Your App Name]

## Architecture
- **Type**: [Full-stack web app / API / CLI tool]
- **Frontend**: [React/Vue/Svelte + specific versions]
- **Backend**: [Node.js/Python/Go + framework]
- **Database**: [PostgreSQL/MongoDB/SQLite]
- **Authentication**: [Auth0/Firebase/Custom JWT]

## Development Standards
- **Code Style**: [ESLint config, Prettier settings]
- **Testing**: [Jest/Vitest + testing patterns]
- **State Management**: [Redux/Zustand/Context API]
- **API Design**: [REST/GraphQL conventions]

## Key Constraints
- **Performance**: [Load time targets, bundle size limits]
- **Security**: [Authentication requirements, data handling]
- **Compatibility**: [Browser support, mobile responsiveness]
- **Deployment**: [Environment variables, build requirements]

## Current Focus
[What you're building right now - be specific]

---
This context helps Replit Agent understand your project patterns and make consistent decisions.

# Feature Request Template

## Feature: User Authentication System

### Requirements
**Must Have**:
- Email/password registration and login
- JWT token management
- Protected route middleware
- User profile management

**Nice to Have**:
- Social login (Google, GitHub)
- Password reset flow
- Email verification
- Role-based permissions

### Technical Specifications
**Frontend**:
- React components for auth forms
- Context API for user state management
- Axios interceptors for token handling
- Protected route component

**Backend**:
- Express.js auth routes
- bcrypt for password hashing
- JWT token generation and validation
- User model with Mongoose/Prisma

**Database**:
- User table with email, password, profile fields
- Session/token management (if using refresh tokens)

### Success Criteria
- [ ] Users can register with email/password
- [ ] Users can login and access protected routes
- [ ] Tokens are properly managed and renewed
- [ ] User profile data is editable
- [ ] Auth state persists across browser sessions

### Integration Points
- Connects to existing user dashboard
- Integrates with profile settings component
- Works with existing API middleware structure

# CODE_STANDARDS.md

## Code Quality Guidelines

### React Components
- Use functional components with hooks
- Implement proper error boundaries
- Extract custom hooks for reusable logic
- Use TypeScript interfaces for all props
- Include JSDoc comments for complex components

### State Management
- Use Zustand for global state (prefer over Redux for simplicity)
- Keep component state local when possible
- Implement optimistic updates for better UX
- Use React Query for server state management

### API Integration
- Create typed API client functions
- Implement proper error handling and retry logic
- Use consistent response formatting
- Include loading states for all async operations

### Testing
- Unit tests for all utility functions
- Integration tests for API routes
- Component tests for key user interactions
- E2E tests for critical user flows

### Performance
- Implement code splitting at route level
- Use React.memo for expensive components
- Optimize images and static assets
- Monitor bundle size and Core Web Vitals

### Security
- Validate all user inputs
- Sanitize data before database operations
- Implement proper CORS settings
- Use environment variables for sensitive data

## Error Handling Patterns
```javascript
// API Error Handling
const handleApiCall = async (apiFunction) => {
  try {
    const result = await apiFunction();
    return { success: true, data: result };
  } catch (error) {
    console.error('API Error:', error);
    return { success: false, error: error.message };
  }
};

// Component Error Boundary
const ErrorFallback = ({ error, resetErrorBoundary }) => (
  

    
Something went wrong
    
{error.message}
    Try again
  
);
```

# .replit - Environment Configuration
[languages.javascript]
pattern = "**/{*.js,*.jsx,*.ts,*.tsx}"
syntax = "javascript"

[languages.javascript.languageServer]
start = [ "typescript-language-server", "--stdio" ]

[packager]
language = "nodejs"

[packager.features]
packageSearch = true
guessImports = true
enabledForHosting = false

[unitTest]
language = "nodejs"

[debugger]
support = true

[debugger.interactive]
transport = "localhost:0"
startCommand = [ "dap-node" ]

[debugger.interactive.initializeMessage]
command = "initialize"
type = "request"

[debugger.interactive.launchMessage]
command = "launch"
type = "request"
program = "./index.js"
console = "integratedTerminal"
args = []

# package.json - Development Scripts
{
  "scripts": {
    "dev": "next dev",
    "build": "next build", 
    "start": "next start",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "test": "jest --watch",
    "test:ci": "jest --ci --coverage",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "eslint": "^8.0.0",
    "eslint-config-next": "^14.0.0",
    "jest": "^29.0.0",
    "typescript": "^5.0.0"
  }
}

# Effective Agent Prompts

## For New Features
"Create a [feature name] that [specific functionality]. Use our existing [patterns/components] and follow the code standards in CODE_STANDARDS.md. Include proper TypeScript types, error handling, and basic tests."

## For Debugging
"There's an issue with [specific behavior]. The error is [exact error message]. Check [relevant files] and fix the problem while maintaining our existing patterns."

## For Refactoring
"Refactor the [component/function] in [file] to [specific improvement]. Keep the same API but improve [performance/readability/maintainability]. Update tests as needed."

## For Integration
"Connect the [existing component] to [API/service]. Use our standard error handling and loading patterns. Make sure it works with our current auth system."

## For Testing
"Add comprehensive tests for [component/function]. Cover happy path, error cases, and edge cases. Use our existing test patterns and utilities."

my-app/
├── client/                 # Frontend application
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page-level components
│   │   ├── hooks/         # Custom React hooks
│   │   ├── store/         # Global state management
│   │   ├── utils/         # Utility functions
│   │   ├── types/         # TypeScript type definitions
│   │   └── api/           # API client functions
│   ├── public/            # Static assets
│   └── package.json
├── server/                 # Backend API
│   ├── src/
│   │   ├── routes/        # API route handlers
│   │   ├── middleware/    # Express middleware
│   │   ├── models/        # Database models
│   │   ├── services/      # Business logic
│   │   ├── utils/         # Server utilities
│   │   └── types/         # Shared type definitions
│   └── package.json
├── shared/                 # Shared code/types
│   └── types/
├── docs/                   # Documentation
├── tests/                  # Test files
├── .env.example           # Environment variables template
├── .gitignore
├── replit.toml           # Replit configuration
├── PROJECT_CONTEXT.md    # Agent context
└── README.md

# Database Configuration for Replit

## Option 1: Replit Database (Simple projects)
```javascript
// Using @replit/database
import Database from "@replit/database";

const db = new Database();

// Simple key-value operations
await db.set("user:123", { name: "John", email: "[email protected]" });
const user = await db.get("user:123");
```

## Option 2: PostgreSQL (Production apps)
```javascript
// Using PostgreSQL with connection pooling
import { Pool } from 'pg';

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: process.env.NODE_ENV === 'production' ? { rejectUnauthorized: false } : false,
  max: 10,
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
});

export const query = async (text, params) => {
  const client = await pool.connect();
  try {
    const result = await client.query(text, params);
    return result;
  } finally {
    client.release();
  }
};
```

## Option 3: Prisma ORM (Complex schemas)
```javascript
// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

// lib/prisma.js
import { PrismaClient } from '@prisma/client';

const globalForPrisma = globalThis;

export const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
```

# Authentication Setup

## JWT-based Authentication
```javascript
// server/auth/jwt.js
import jwt from 'jsonwebtoken';

const JWT_SECRET = process.env.JWT_SECRET;
const JWT_EXPIRE = process.env.JWT_EXPIRE || '7d';

export const generateToken = (userId) => {
  return jwt.sign({ userId }, JWT_SECRET, { expiresIn: JWT_EXPIRE });
};

export const verifyToken = (token) => {
  try {
    return jwt.verify(token, JWT_SECRET);
  } catch (error) {
    throw new Error('Invalid token');
  }
};

// Middleware for protected routes
export const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) {
    return res.status(401).json({ error: 'Access token required' });
  }

  try {
    const decoded = verifyToken(token);
    req.userId = decoded.userId;
    next();
  } catch (error) {
    return res.status(403).json({ error: 'Invalid or expired token' });
  }
};
```

## Client-side Auth Context
```javascript
// client/contexts/AuthContext.js
import { createContext, useContext, useEffect, useState } from 'react';

const AuthContext = createContext();

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
};

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const token = localStorage.getItem('authToken');
    if (token) {
      // Verify token and get user data
      fetchUserData(token);
    } else {
      setLoading(false);
    }
  }, []);

  const login = async (email, password) => {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    });

    if (response.ok) {
      const { token, user } = await response.json();
      localStorage.setItem('authToken', token);
      setUser(user);
      return { success: true };
    } else {
      const { error } = await response.json();
      return { success: false, error };
    }
  };

  const logout = () => {
    localStorage.removeItem('authToken');
    setUser(null);
  };

  return (
    
      {children}
    
  );
};
```

# Multi-File Context Prompt

"I'm working on the user profile feature that spans multiple files. Here's the current structure:

## Backend (server/routes/users.js):
- GET /api/users/profile - returns user data
- PUT /api/users/profile - updates user data
- POST /api/users/avatar - handles avatar upload

## Frontend (client/pages/Profile.jsx):  
- ProfileForm component for editing
- AvatarUpload component for photos
- Uses useProfile hook for data management

## Database (server/models/User.js):
- User model with profile fields
- Avatar storage logic
- Validation rules

I need to add email verification to the profile update flow. Update all relevant files to:
1. Add email verification step before saving changes
2. Send verification email when email is changed
3. Show pending verification status in UI
4. Only allow login with verified emails

Keep the existing patterns and add comprehensive error handling."

# Team Collaboration Setup

## .replit - Team Configuration
[collaboration]
enabled = true

[collaboration.permissions]
write = ["owner", "admin", "editor"]
read = ["owner", "admin", "editor", "viewer"]
run = ["owner", "admin", "editor"]

## COLLABORATION_GUIDE.md
# Team Development Guidelines

## Code Ownership
- **Frontend**: @frontend-dev handles React components and state management
- **Backend**: @backend-dev handles API routes and database operations  
- **DevOps**: @devops handles deployment and environment configuration

## Development Flow
1. **Feature Planning**: Create detailed specifications in PROJECT_CONTEXT.md
2. **Implementation**: Use Replit Agent to generate initial code structure
3. **Code Review**: Team members review and refine generated code
4. **Testing**: Add tests and validate functionality
5. **Deployment**: Deploy to staging for team review

## Communication Patterns
- **Comments**: Use @mentions for specific questions or reviews
- **Chat**: Quick discussions about implementation decisions
- **Voice**: Complex architectural discussions
- **Async**: Document decisions in markdown files

## Conflict Resolution
- **Merge Conflicts**: Resolve immediately when detected
- **Architecture Decisions**: Senior dev has final say
- **Code Style**: Follow established patterns in CODE_STANDARDS.md

# Performance Optimization Guide

## Bundle Optimization
```javascript
// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true,
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Reduce client bundle size
      config.resolve.fallback = {
        fs: false,
        path: false,
      };
    }
    return config;
  },
};
```

## Image Optimization
```javascript
// components/OptimizedImage.jsx
import Image from 'next/image';

export const OptimizedImage = ({ src, alt, width, height, ...props }) => (
  
);
```

## API Optimization
```javascript
// utils/api.js
import { unstable_cache } from 'next/cache';

// Cache expensive API calls
export const getCachedData = unstable_cache(
  async (id) => {
    const response = await fetch(`/api/data/${id}`);
    return response.json();
  },
  ['data'],
  {
    revalidate: 3600, // Cache for 1 hour
    tags: ['data'],
  }
);

// Connection pooling for database
import { Pool } from 'pg';

const pool = new Pool({
  max: 10,
  idleTimeoutMillis: 30000,
  connectionTimeoutMillis: 2000,
});
```

## Memory Management
```javascript
// utils/memoryOptimization.js
// Clean up event listeners
useEffect(() => {
  const handleResize = () => setWindowSize(window.innerWidth);
  window.addEventListener('resize', handleResize);
  
  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);

// Optimize large lists with virtualization
import { FixedSizeList } from 'react-window';

export const VirtualizedList = ({ items }) => (
  
    {({ index, style, data }) => (
      

        {data[index].name}
      
    )}
  
);
```

# CONTEXT_CHECKLIST.md

## Essential Context Files
- [ ] PROJECT_CONTEXT.md (architecture and standards)
- [ ] CODE_STANDARDS.md (quality and style guidelines)  
- [ ] API_PATTERNS.md (backend conventions)
- [ ] COMPONENT_PATTERNS.md (frontend conventions)
- [ ] DATABASE_SCHEMA.md (data structure documentation)

## Update Triggers
- New features added → Update PROJECT_CONTEXT.md
- Code patterns change → Update relevant standards docs
- Team decisions made → Document in appropriate files
- Performance issues found → Add to optimization guidelines

# Environment Parity Checklist

## Configuration Files
- [ ] .env.example with all required variables
- [ ] replit.toml configured correctly
- [ ] package.json scripts work across environments
- [ ] Docker configuration (if needed) matches Replit

## Testing Across Environments
- [ ] Local development setup documented
- [ ] Production deployment tested
- [ ] Environment-specific configurations handled
- [ ] Database connections work in all environments

# Migration Planning

## When to Migrate from Replit
- **Traffic**: >10k monthly active users
- **Team Size**: >5 developers working simultaneously
- **Performance**: Response times >500ms consistently
- **Features**: Need for advanced DevOps, CI/CD, monitoring
- **Compliance**: Enterprise security, audit requirements

## Migration-Friendly Patterns
- Use standard frameworks (Next.js, Express, etc.)
- Avoid Replit-specific APIs for core functionality
- Containerize with Docker for portability
- Use environment variables for configuration
- Document deployment procedures

## Hybrid Approach
- **Prototyping**: Continue using Replit for new features
- **Production**: Deploy to dedicated infrastructure
- **Development**: Use Replit for collaboration and quick iterations
- **Testing**: Maintain staging environments in both