A powerful VS Code extension that generates comprehensive context files from your Next.js codebase for optimal use with Large Language Models (LLMs) like ChatGPT, Claude, and others.

🎯 Now with Professional Step-by-Step UI and 12 Expert Prompt Templates!

Initial file selection interface with step-by-step guidance and empty selection state

• Interactive Step Wizard - guided 5-step process for perfect context generation
• Activity Bar Integration - dedicated panel in VS Code sidebar
• File Selection Tree - visual file picker with checkboxes
• Real-time Progress - see your progress through each step
• Professional Templates - 12 expert-crafted prompt templates

Choose from 12 specialized templates for different use cases:

• 🐛 Bug Fix Analysis - Debug issues and identify problems
• 🚀 Feature Development - Plan and implement new features
• 🔄 Refactoring Help - Large-scale code improvements

• 🔍 Code Review - Comprehensive code quality analysis
• ⚡ Performance Optimization - Speed and efficiency improvements
• 🏗️ Architecture Analysis - Deep architectural insights

• 📚 Documentation Generation - Create comprehensive docs
• 👋 Developer Onboarding - Help new team members

• 🔒 Security Audit - Security vulnerability assessment
• 🧪 Testing Strategy - Testing approach and coverage
• 🔄 Migration Planning - Technology migration assistance

12 expert-crafted prompt templates organized in a clean grid layout for easy selection

• App Router prioritization with intelligent file categorization
• Server Components and Client Components detection
• Support for all App Router conventions (layout, page, loading, error, not-found, template, global-error)
• Route Handlers (route.ts/js) detection
• Middleware support

Files are intelligently categorized and prioritized for optimal LLM processing:

1. A: Core Configurations (Priority 80-100)

   • Next.js config files (next.config.js/ts/mjs)
   • Package configuration (package.json)
   • TypeScript/JavaScript config
   • Styling configuration (Tailwind, etc.)
   • Middleware

2. B: App Router Structure (Priority 60-80)

   • Layouts, pages, loading states
   • Error boundaries and templates
   • API routes in app directory

3. C: Pages Router Structure (Priority 68-78)

   • _app, _document, _error
   • API routes in pages directory
   • Custom error pages (404, 500)

4. D: Components (Priority 50-55)

   • Client components ('use client')
   • Server components
   • UI components

5. E: Hooks & Utilities (Priority 45-48)

   • Custom hooks
   • Utility functions and libraries

6. F: Data Layer (Priority 40-42)

   • State management (Redux, Zustand, Context)
   • Database schemas and migrations

7. G: Styling (Priority 30-35)

   • Global styles and component styles

8. H: Other Files (Priority 10-25)

   • TypeScript/JavaScript files
   • Configuration files
   • Documentation

• XML Format - Structured tags for better LLM parsing
• Markdown Format - Traditional markdown with code blocks
• JSON Format - Structured data for programmatic use

• Personal Instructions - Add your own analysis requirements
• Custom Rules - Define specific focus areas
• Combined Output - Professional templates + your custom input

Comprehensive default ignore patterns for modern Next.js development:

• Build outputs: .next/, .swc/, out/, build/, dist/, .turbo/
• Dependencies: node_modules/
• Environment: .env* files
• Lock files: All package manager lock files (package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb)
• Media files: Images, fonts, audio, video
• Development tools: Coverage reports, logs, temporary files
• AI IDEs: .cursor/, .windsurf/ configurations

• Token usage estimation with LLM-specific limits
• File statistics and metadata
• Progress indicators during generation
• Structured output with categories and priorities

1. Download the latest .vsix file from the releases
2. Open VS Code
3. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open Command Palette
4. Type Extensions: Install from VSIX...
5. Select the downloaded .vsix file
6. Restart VS Code if prompted

1. Clone and build from source:

   git clone https://github.com/sriem/nextjs-contextify
   cd nextjs-contextify
   npm install
   npm run build

To create a distributable VSIX package:

1. Install VSCE (Visual Studio Code Extension Manager):

   npm install -g @vscode/vsce

2. Build the Extension:

   npm run build

3. Create VSIX Package:

   vsce package

   This creates a nextjs-contextify-X.X.X.vsix file in the root directory.

4. Package with Specific Version:

   vsce package --pre-release
   # or
   vsce package 2.1.1

1. Open VS Code
2. Go to Extensions view (Ctrl+Shift+X)
3. Click the ... menu in the Extensions view
4. Select Install from VSIX...
5. Choose your .vsix file

code --install-extension nextjs-contextify-2.1.1.vsix

1. Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)
2. Type Extensions: Install from VSIX...
3. Select your .vsix file

For development and testing:

# Clone the repository
git clone https://github.com/sriem/nextjs-contextify
cd nextjs-contextify

# Install dependencies
npm install

# Build the extension
npm run build

# Package for distribution
vsce package

# Install locally for testing
code --install-extension nextjs-contextify-*.vsix

1. Open your Next.js project in VS Code
2. Click the Next.js Contextify icon in the Activity Bar
3. Follow the 5-step guided process:

• Use the 📁 File Selection panel to choose specific files
• Or leave empty for automatic smart selection
• See real-time file count and selection status

File selection interface showing 453 selected items with detailed breakdown of directories and individual files

Comprehensive view of selected files and directories with expandable lists and item counts

• Choose output format (XML/Markdown/JSON)
• Select target LLM (Claude/GPT/Gemini/Custom)
• Enable/disable ready-to-use prompts

Configuration interface with output format selection and target LLM options

Dropdown menu showing all available target LLM options including Claude, ChatGPT, Gemini, and Custom

• Browse 12 expert-crafted templates
• Select the one matching your use case
• Or skip for custom-only analysis

Professional prompts interface with selected Migration Planning template and continue option

• Add your specific instructions
• Define custom analysis rules
• Combine with professional templates

Custom input step allowing personal instructions and custom rules for tailored analysis

• Generate your optimized context file
• Copy directly to clipboard
• View token usage statistics

• Next.js Contextify: Quick Generate - Fast XML generation with defaults
• Next.js Contextify: Generate Context - Classic step-by-step wizard
• Next.js Contextify: Generate with LLM Prompts - Quick prompt selection

Create a .nextjscollectorignore file in your project root:

# Custom ignore patterns
*.test.ts
*.spec.js
/cypress/
/playwright/
custom-folder/
specific-file.ts

• 🐛 Debugging - Get expert help finding and fixing bugs
• 🚀 Feature Development - Plan new features with architectural guidance
• 📚 Documentation - Generate comprehensive project documentation
• 🔍 Code Reviews - Thorough analysis with specific recommendations
• ⚡ Performance - Identify optimization opportunities
• 🔒 Security - Vulnerability assessment and fixes
• 🧪 Testing - Improve test coverage and strategy
• 🔄 Migrations - Plan technology upgrades and migrations

Generated files include:

• Context: Prioritized file contents with metadata
• Professional Prompts: Expert-level analysis requests
• Token Estimates: LLM-specific usage calculations
• Project Structure: Visual directory tree
• Instructions: Ready-to-paste LLM prompts

• 🔧 Parent-Child Selection Fix - Fixed child directories not being deselected when parent is deselected
• 📁 Recursive Directory Handling - Improved recursive selection/deselection of nested directories
• 🔄 Tree View Synchronization - Better checkbox state management for directory hierarchies
• 📊 Enhanced Logging - Better debugging for directory selection operations

• 🔧 Selection Sync Fix - Fixed UI not updating when all files are deselected
• ✅ Empty State Handling - Proper "no files selected" display when selection is cleared
• 🔄 Event Propagation - Improved event handling between Tree View and UI

• Node.js 18+
• VS Code 1.85.0+

git clone https://github.com/sriem/nextjs-contextify
cd nextjs-contextify
npm install

npm run build

npm run watch

npm run vscode:prepublish

• 🐛 Bug Fix Analysis: Systematic debugging approach with root cause analysis
• 🚀 Feature Development: Architectural planning for new features
• 🔄 Refactoring Help: Strategic code improvement and modernization

• 🔍 Code Review: Comprehensive quality assessment with SOLID principles
• ⚡ Performance Optimization: Core Web Vitals and rendering optimization
• 🏗️ Architecture Analysis: Scalability and maintainability evaluation

• 📚 Documentation Generation: Professional README, API docs, and guides
• 👋 Developer Onboarding: Team integration and knowledge transfer

• 🔒 Security Audit: OWASP Top 10 compliance and vulnerability assessment
• 🧪 Testing Strategy: Test pyramid approach and quality gates
• 🔄 Migration Planning: Technology upgrade roadmaps and risk assessment

Contributions are welcome! Please feel free to submit a Pull Request.

• Follow TypeScript best practices
• Maintain comprehensive test coverage
• Update documentation for new features
• Ensure compatibility with latest Next.js versions

• VS Code 1.85.0 or higher
• Next.js project (works with any version, optimized for 13+)

• Very large codebases (10,000+ files) may take longer to process
• Binary files are automatically skipped to prevent corruption

MIT License - see LICENSE file for details.

Sergej Riemann

• GitHub: @sriem
• Website: www.sergej-riemann.dev

• Next.js team for the amazing framework
• VS Code team for the excellent extension API
• The developer community for feedback and contributions
• AI/LLM providers for inspiring better developer tools

⭐ Star this repo if you find it helpful!

Transform your Next.js codebase into AI-ready context with professional prompts and intelligent analysis.