mcp-talk-to-project-next-js
v1.2.5
Published
Advanced Model Context Protocol (MCP) server for Next.js project analysis with comprehensive i18n translation detection using 7 specialized validators
Maintainers
Readme
Next.js Project Analyzer MCP Server
A Model Context Protocol (MCP) server that provides comprehensive analysis of Next.js projects using Abstract Syntax Tree (AST) parsing. This server enables AI assistants to understand Next.js codebases by extracting detailed information about components, hooks, pages, features, and architectural patterns with advanced i18n translation detection.
🚀 Quick Start
Installation
# Install globally
npm install -g mcp-talk-to-project-next-js
# Or install locally
npm install mcp-talk-to-project-next-jsCLI Usage
# Analyze entire project for translations
nextjs-i18n /path/to/your/nextjs/project i18n --format=json
# Focus on specific directory
nextjs-i18n /path/to/project/src/components i18n --format=text
# Single file analysis
nextjs-i18n /path/to/project/src/pages/dashboard.tsx i18n
# Get help
nextjs-i18n --helpMCP Server Usage
Add to your Claude Desktop configuration:
{
"mcpServers": {
"nextjs-analyzer": {
"command": "npx",
"args": ["mcp-talk-to-project-next-js"],
"env": {
"NEXTJS_PROJECT_PATH": "/path/to/your/nextjs/project"
}
}
}
}🚀 Key Features
📦 Advanced Component Analysis
- Three Analysis Modes: All components (overview), specific components (pattern matching), detailed analysis (comprehensive)
- Component Discovery: List all React components (functional and class-based) across the entire project
- Props Information: Extract component props, their types, and default values
- Hook Usage: Show which hooks each component uses
- Component Dependencies: List imports and exports between components
- Component Metadata: Get component names, file locations, and export types
- Pattern Matching: Target specific components using patterns like "Button", "Modal", "Auth"
🎣 Comprehensive Hook Analysis
- Custom Hook Detection: Find all custom hooks in the project
- Built-in Hook Usage: List usage of useState, useEffect, useContext, etc.
- Hook Dependencies: Show hook dependency arrays and what they depend on
- Hook Signatures: Extract what each hook accepts and returns
- Pattern-Based Filtering: Target specific hooks using patterns like "use*", "Auth", "useState"
📄 Smart Page Analysis
- Next.js Routes: List all pages and their routing structure
- Dynamic Routes: Show dynamic routes and their parameter names
- Data Fetching: Find getStaticProps, getServerSideProps, and getStaticPaths usage
- API Routes: List all API endpoints and their methods
- Layout Components: Show _app.js, _document.js, and layout structure
- Route Filtering: Target specific pages using patterns like "api/*", "[slug]", "index"
🏗️ Feature & Module Intelligence
- Module Structure: Show feature-based organization and folder structure
- Shared Components: List reusable components and utilities
- Context Providers: Find React Context definitions and usage
- Business Logic: Show service layers and utility functions
- Type Definitions: List TypeScript interfaces and types
- Feature Targeting: Analyze specific features using patterns like "auth", "admin", "user*"
🎯 Pattern Recognition
- Architecture Patterns: Detect HOCs, render props, compound components
- React Patterns: Find context patterns, hook patterns, state management
- Next.js Patterns: Identify data fetching patterns, routing patterns
- Custom Pattern Matching: Target specific patterns with flexible filtering
🌍 i18n Translation Analysis
- Advanced Validator System: 7 specialized validators for accurate string detection
- Smart Detection: JSX text, attributes, component props, variables, object properties, form validation, and alert messages
- False Positive Prevention: Whitelist-based approach prevents technical strings from being flagged
- Project Language Detection: Automatically detect available languages from directory structure and config files
- Translation Coverage: Find strings that need translation wrapping with detailed categorization
- Missing Translation Keys: Identify missing keys across language files
- Translation File Analysis: Analyze JSON translation files for completeness
- Multi-Language Support: Support for complex i18n setups with multiple locales
- Path Targeting: Analyze specific directories or files for focused translation work
- Modular Architecture: Clean separation of concerns with dedicated validator modules
🛠️ Available Tools
The MCP server provides the following tools for analyzing Next.js projects. All tools support multiple output formats and flexible analysis modes.
Analysis Modes
all(default): Basic overview/listing of all elementsspecific: Target specific elements using pattern matchingdetailed: Comprehensive analysis with full details
Output Formats
All tools support multiple output formats:
text: Human-readable format (default)markdown: Structured markdown with headers and listsjson: Machine-readable structured data
analyze_components
Comprehensive React component analysis with flexible targeting.
Parameters:
{
"path": "string (optional) - Directory/file path relative to project root",
"format": "text|markdown|json - Output format (default: text)",
"mode": "all|specific|detailed - Analysis depth (default: all)",
"componentPattern": "string - Pattern to match specific components (e.g., 'Button', '*Modal', 'Auth*')",
"includeProps": "boolean - Include component props information",
"includeHooks": "boolean - Include hooks usage information"
}Examples:
// Get all components overview
{"mode": "all"}
// Find specific Button components
{"mode": "specific", "componentPattern": "*Button*"}
// Detailed analysis with props and hooks
{"mode": "detailed", "includeProps": true, "includeHooks": true}analyze_hooks
Analyze React hooks usage with smart filtering capabilities.
Parameters:
{
"path": "string (optional) - Directory/file path relative to project root",
"format": "text|markdown|json - Output format (default: text)",
"mode": "all|specific|detailed - Analysis depth (default: all)",
"hookPattern": "string - Pattern to match specific hooks (e.g., 'useState', 'use*', '*Auth*')",
"includeBuiltIn": "boolean - Include built-in React hooks (default: true)",
"includeCustom": "boolean - Include custom hooks (default: true)"
}Examples:
// Get all hooks overview
{"mode": "all"}
// Find all custom hooks
{"mode": "specific", "hookPattern": "use*", "includeBuiltIn": false}
// Detailed useState analysis
{"mode": "detailed", "hookPattern": "useState"}analyze_pages
Analyze Next.js pages and routing with pattern-based filtering.
Parameters:
{
"path": "string (optional) - Pages directory path (auto-detects pages/app)",
"format": "text|markdown|json - Output format (default: text)",
"mode": "all|specific|detailed - Analysis depth (default: all)",
"pagePattern": "string - Pattern to match specific pages (e.g., 'api/*', '[slug]', 'index')",
"includeApiRoutes": "boolean - Include API routes (default: true)"
}Examples:
// Get all pages overview
{"mode": "all"}
// Analyze only API routes
{"mode": "specific", "pagePattern": "api/*"}
// Detailed page analysis
{"mode": "detailed", "includeApiRoutes": true}analyze_features
Analyze project features and module organization.
Parameters:
{
"path": "string (optional) - Source directory path (default: 'src')",
"format": "text|markdown|json - Output format (default: text)",
"mode": "all|specific|detailed - Analysis depth (default: all)",
"featurePattern": "string - Pattern to match specific features (e.g., 'auth', '*admin*', 'user*')",
"includeTypes": "boolean - Include TypeScript type information"
}Examples:
// Get all features overview
{"mode": "all"}
// Analyze authentication features
{"mode": "specific", "featurePattern": "*auth*"}
// Detailed feature analysis with types
{"mode": "detailed", "includeTypes": true}analyze_patterns
Analyze React and Next.js architectural patterns.
Parameters:
{
"path": "string (optional) - Directory path to analyze",
"format": "text|markdown|json - Output format (default: text)",
"mode": "all|specific|detailed - Analysis depth (default: all)",
"patternType": "hooks|context|hoc|render-props|all - Pattern category (default: all)",
"patternPattern": "string - Pattern to match specific patterns (e.g., 'withAuth', '*Provider')"
}Examples:
// Get all patterns overview
{"mode": "all"}
// Find HOC patterns
{"mode": "specific", "patternType": "hoc"}
// Detailed context pattern analysis
{"mode": "detailed", "patternType": "context"}get_project_overview
Provides comprehensive information about the entire Next.js project.
Parameters:
{
"format": "text|markdown|json - Output format (default: text)"
}Returns: Complete project structure, technology stack, configuration, and statistics
get_help
Get help information about available commands and usage.
Parameters:
{
"format": "text|markdown|json - Output format (default: text)",
"command": "string (optional) - Get help for specific command"
}Returns: Comprehensive help documentation and usage examples
analyze_i18n
Comprehensive internationalization (i18n) analysis with advanced validator system for accurate translation detection.
Parameters:
{
"path": "string (optional) - Directory or file path to analyze (default: project root)",
"format": "text|markdown|json - Output format (default: text)",
"mode": "all|specific|detailed - Analysis depth (default: all)",
"languages": "string[] (optional) - Specific languages to analyze (auto-detected if not provided)",
"includeUntranslated": "boolean - Include untranslated strings (default: true)",
"includeMissing": "boolean - Include missing translation keys (default: true)",
"filePattern": "string - Pattern to match specific files (e.g., '**/*.tsx', 'src/components/**')"
}Advanced Validator System:
- Validator 1: JSX Text Content (HIGH) - Direct text in JSX elements
- Validator 2: User-facing JSX Attributes (HIGH) - alt, title, placeholder, label attributes
- Validator 3: User Message Variables (HIGH) - Variables with semantic names like *Message, *Text, *Label
- Validator 4: User-facing Object Properties (MEDIUM) - Object properties like {message: "text", title: "text"}
- Validator 5: Form Validation Messages (MEDIUM) - Validation error and success messages
- Validator 6: Component Props (MEDIUM) - Props passed to React components (title, message, confirmText, etc.)
- Validator 7: Alert Messages (MEDIUM) - User-facing alert(), confirm(), prompt() calls (excludes console.log)
Smart Detection Features:
- Whitelist Approach: Only flags known user-facing patterns, preventing false positives
- Component vs HTML Distinction: Differentiates between component props and HTML attributes
- Technical String Filtering: Ignores technical identifiers, CSS classes, API endpoints, debug messages
- Path Targeting: Focus analysis on specific directories or files
Examples:
// Full project analysis with all validators
{"mode": "all", "format": "json"}
// Analyze specific directory only
{"path": "src/components", "mode": "detailed"}
// Target single file for focused analysis
{"path": "src/pages/dashboard.tsx", "format": "text"}
// Focus on high-priority validators only
{"mode": "specific", "includeUntranslated": true, "format": "markdown"}
// Component-focused analysis
{"path": "src/components", "filePattern": "**/*.tsx", "format": "json"}🎯 Usage Patterns
Basic Analysis
// Get overview of all components
{"tool": "analyze_components", "args": {"mode": "all"}}
// Get overview of all pages
{"tool": "analyze_pages", "args": {"mode": "all"}}
// Get overview of all hooks
{"tool": "analyze_hooks", "args": {"mode": "all"}}Targeted Analysis
// Find specific components
{"tool": "analyze_components", "args": {"mode": "specific", "componentPattern": "Button"}}
// Find API routes only
{"tool": "analyze_pages", "args": {"mode": "specific", "pagePattern": "api/*"}}
// Find custom hooks only
{"tool": "analyze_hooks", "args": {"mode": "specific", "hookPattern": "use*", "includeBuiltIn": false}}Comprehensive Analysis
// Detailed component analysis with props and hooks
{"tool": "analyze_components", "args": {"mode": "detailed", "includeProps": true, "includeHooks": true}}
// Detailed feature analysis with TypeScript types
{"tool": "analyze_features", "args": {"mode": "detailed", "includeTypes": true}}
// Detailed pattern analysis for specific pattern type
{"tool": "analyze_patterns", "args": {"mode": "detailed", "patternType": "context"}}🏗️ Architecture
Tools Structure
src/tools/
├── types.ts # Common tool types and utilities
├── analyze-components.ts # Component analysis tool
├── analyze-hooks.ts # Hook analysis tool
├── analyze-pages.ts # Page analysis tool
├── analyze-features.ts # Feature analysis tool
├── analyze-patterns.ts # Pattern analysis tool
├── project-overview.ts # Project overview tool
├── help.ts # Help documentation tool
└── index.ts # Tool registry and executionPlugin System
src/plugins/
├── manager.ts # Plugin manager
├── registry.ts # Plugin registration
├── base.ts # Base plugin class
├── common/ # Shared utilities
├── component-extractor/ # Component analysis plugin
├── hook-extractor/ # Hook analysis plugin
├── page-extractor/ # Page analysis plugin
├── feature-extractor/ # Feature analysis plugin
└── pattern-extractor/ # Pattern analysis pluginEach plugin supports the formatData(data, format) method for consistent output formatting across all analysis modes.
📋 Installation & Setup
Prerequisites
- Node.js 18+
- npm or yarn
- A Next.js project to analyze
Installation
# Clone the repository
git clone https://github.com/devalma/mcp-talk-to-project-next-js.git
cd mcp-talk-to-project-next-js
# Install dependencies
npm install
# Build the server
npm run build🚀 Quick Start
Option 1: Use with Claude Desktop (Recommended)
- Clone and setup the MCP server:
git clone https://github.com/devalma/mcp-talk-to-project-next-js.git
cd mcp-talk-to-project-next-js
npm install
npm run build- Add to Claude Desktop config (
~/Library/Application Support/Claude/claude_desktop_config.jsonon macOS):
{
"mcpServers": {
"nextjs-analyzer": {
"command": "node",
"args": ["/absolute/path/to/mcp-talk-to-project-next-js/dist/index.js"],
"env": {
"NEXTJS_PROJECT_PATH": "/absolute/path/to/your/nextjs/project"
}
}
}
}- Restart Claude Desktop and start analyzing your Next.js projects!
Option 2: Use with npx (Now Available!)
# Use npx to run without installation
npx mcp-talk-to-project-next-js /path/to/your/nextjs/projectOption 3: Standalone CLI Usage
Test the analyzer directly from command line with support for path targeting:
# Analyze entire project
export NEXTJS_PROJECT_PATH="/path/to/your/nextjs/project"
npm run cli analyze components
# Analyze specific directory
node cli.js /path/to/project/src/components i18n --format=json
# Analyze single file
node cli.js /path/to/project/src/pages/dashboard.tsx i18n --format=text
# Focus on specific areas
node cli.js /path/to/project/src/features/auth i18n --path=components
# Use the demo project for testing
npm run test
node cli.js demo-project i18n --format=jsonTesting
Test the server with the included demo project:
# Run with demo project
npm run test
# Use CLI for testing
npm run cli analyze components
# Start development server
npm run devConfiguration
Add the MCP server to your Claude Desktop configuration:
{
"mcpServers": {
"nextjs-analyzer": {
"command": "node",
"args": ["/absolute/path/to/mcp-talk-to-project-next-js/dist/index.js"],
"env": {
"NEXTJS_PROJECT_PATH": "/absolute/path/to/your/nextjs/project"
}
}
}
}Configuration Options:
NEXTJS_PROJECT_PATH: (Required) Absolute path to the Next.js project to analyzeCACHE_ENABLED: (Optional) Enable AST caching for better performance (default: true)MAX_FILE_SIZE: (Optional) Maximum file size to parse in bytes (default: 1MB)
Configuration Examples
Example 1: Local installation (recommended for now)
{
"mcpServers": {
"nextjs-analyzer": {
"command": "node",
"args": ["/Users/you/tools/mcp-talk-to-project-next-js/dist/index.js"],
"env": {
"NEXTJS_PROJECT_PATH": "/Users/you/projects/my-nextjs-app"
}
}
}
}Example 2: Multiple projects (local installation)
{
"mcpServers": {
"nextjs-analyzer-project1": {
"command": "node",
"args": ["/Users/you/tools/mcp-talk-to-project-next-js/dist/index.js"],
"env": {
"NEXTJS_PROJECT_PATH": "/Users/you/projects/ecommerce-app"
}
},
"nextjs-analyzer-project2": {
"command": "node",
"args": ["/Users/you/tools/mcp-talk-to-project-next-js/dist/index.js"],
"env": {
"NEXTJS_PROJECT_PATH": "/Users/you/projects/blog-app"
}
}
}
}Example 3: Using with npm (development)
{
"mcpServers": {
"nextjs-analyzer-dev": {
"command": "npm",
"args": ["run", "start"],
"cwd": "/Users/you/tools/mcp-talk-to-project-next-js",
"env": {
"NEXTJS_PROJECT_PATH": "/Users/you/projects/current-project"
}
}
}
}Example 4: Using with npx (now available)
{
"mcpServers": {
"nextjs-analyzer": {
"command": "npx",
"args": ["mcp-talk-to-project-next-js"],
"env": {
"NEXTJS_PROJECT_PATH": "/Users/you/projects/my-nextjs-app"
}
}
}
}🎯 Usage Examples
Getting Component Information
Query: "What React components are in this project?"
Uses: analyze_components to scan the entire project
Example Response:
{
"components": [
{
"name": "Button",
"type": "functional",
"file": "src/components/ui/Button.tsx",
"props": ["children", "onClick", "variant", "disabled"],
"hooks": ["useState"],
"exports": "default",
"category": "shared"
},
{
"name": "LoginForm",
"type": "functional",
"file": "src/features/auth/components/LoginForm.jsx",
"props": ["onSubmit", "loading"],
"hooks": ["useForm", "useState"],
"exports": "default",
"category": "feature"
}
]
}Finding Hook Information
Query: "Show me all custom hooks and their signatures"
Uses: analyze_hooks with includeCustom: true
Example Response:
{
"customHooks": [
{
"name": "useLocalStorage",
"file": "src/hooks/useLocalStorage.ts",
"parameters": ["key", "initialValue"],
"returns": ["storedValue", "setValue"],
"dependencies": ["useState", "useEffect"]
},
{
"name": "useAuth",
"file": "src/hooks/useAuth.js",
"parameters": [],
"returns": ["user", "login", "logout", "loading"],
"dependencies": ["useContext", "useState", "useEffect"]
}
]
}Understanding Page Structure
Query: "What pages does this Next.js app have and how are they organized?"
Uses: analyze_pages to show the routing structure
Example Response:
{
"pages": [
{
"route": "/",
"file": "pages/index.js",
"component": "HomePage",
"dataFetching": ["getStaticProps"]
},
{
"route": "/blog/[slug]",
"file": "pages/blog/[slug].tsx",
"component": "BlogPost",
"dataFetching": ["getStaticProps", "getStaticPaths"],
"dynamicParams": ["slug"]
},
{
"route": "/api/users",
"file": "pages/api/users.js",
"type": "api",
"methods": ["GET", "POST"]
}
]
}Project Overview
Query: "Give me an overview of this Next.js project's structure"
Uses: get_project_overview for comprehensive project information
Example Response:
{
"projectInfo": {
"name": "my-nextjs-app",
"version": "1.0.0",
"nextVersion": "13.4.0",
"structure": "app",
"typescript": true,
"componentCount": 15,
"pageCount": 8,
"apiRouteCount": 4,
"customHookCount": 3,
"features": ["authentication", "blog", "dashboard"],
"dependencies": ["next", "react", "typescript", "tailwindcss"]
}
}Feature Analysis
Query: "What features are organized in my src folder?"
Uses: analyze_features with default srcDir: "src"
Example Response:
{
"features": [
{
"name": "authentication",
"path": "src/features/auth",
"components": [
{
"name": "LoginForm",
"file": "src/features/auth/components/LoginForm.tsx"
},
{
"name": "SignupForm",
"file": "src/features/auth/components/SignupForm.tsx"
},
{
"name": "UserProfile",
"file": "src/features/auth/components/UserProfile.tsx"
}
],
"hooks": ["useAuth", "useLogin"],
"types": ["User", "AuthState"],
"services": ["authService", "tokenService"]
},
{
"name": "blog",
"path": "src/features/blog",
"components": [
{
"name": "BlogPost",
"file": "src/features/blog/components/BlogPost.tsx"
},
{
"name": "BlogList",
"file": "src/features/blog/components/BlogList.tsx"
},
{
"name": "BlogEditor",
"file": "src/features/blog/components/BlogEditor.tsx"
}
],
"hooks": ["useBlog", "useComments"],
"types": ["Post", "Comment"],
"services": ["blogService"]
}
],
"sharedComponents": {
"path": "src/components",
"components": [
{
"name": "Button",
"file": "src/components/ui/Button.tsx"
},
{
"name": "Modal",
"file": "src/components/ui/Modal.tsx"
},
{
"name": "Layout",
"file": "src/components/layout/Layout.tsx"
}
]
}
}Specific Component Details
Query: "Tell me about the LoginForm component - what props does it accept?"
Uses: analyze_components with path "features/auth/components/LoginForm.tsx", includeProps: true
Example Response:
{
"component": {
"name": "LoginForm",
"file": "src/features/auth/components/LoginForm.tsx",
"category": "feature",
"feature": "authentication",
"props": {
"onSubmit": {
"type": "(credentials: LoginCredentials) => Promise<void>",
"required": true,
"description": "Callback function when form is submitted"
},
"loading": {
"type": "boolean",
"required": false,
"default": "false",
"description": "Shows loading state during authentication"
},
"initialEmail": {
"type": "string",
"required": false,
"description": "Pre-populate email field"
}
},
"hooks": ["useForm", "useState"],
"imports": ["Button", "Input", "useAuth"]
}
}🔧 Supported File Types
- JavaScript:
.js,.jsx - TypeScript:
.ts,.tsx - Next.js Specific:
pages/,app/, API routes - Configuration:
next.config.js,package.json
🏛️ Architecture
src/
├── index.ts # MCP server entry point
├── tools/ # MCP tools implementation
│ ├── analyze-components.ts # Component analysis tool
│ ├── analyze-hooks.ts # Hook analysis tool
│ ├── analyze-pages.ts # Page analysis tool
│ ├── analyze-features.ts # Feature analysis tool
│ ├── analyze-patterns.ts # Pattern analysis tool
│ ├── project-overview.ts # Project overview tool
│ ├── help.ts # Help documentation tool
│ └── index.ts # Tool registry
├── plugins/ # Analysis plugins
│ ├── manager.ts # Plugin manager
│ ├── registry.ts # Plugin registration
│ ├── base.ts # Base plugin class
│ ├── common/ # Shared utilities
│ ├── component-extractor/ # Component analysis plugin
│ ├── hook-extractor/ # Hook analysis plugin
│ ├── page-extractor/ # Page analysis plugin
│ ├── feature-extractor/ # Feature analysis plugin
│ └── pattern-extractor/ # Pattern analysis plugin
├── resources/ # MCP resources
│ ├── handlers.ts # Resource handlers
│ ├── registry.ts # Resource registration
│ └── types.ts # Resource types
├── parsers/
│ └── ast.ts # AST parsing utilities
├── utils/
│ └── file.ts # File system utilities
└── types/
├── info.ts # Information result types
└── plugin.ts # Plugin types🚦 Performance
- AST Caching: Parsed ASTs are cached to avoid re-parsing unchanged files
- Selective Scanning: Only scans requested directories or files
- Memory Management: Efficient memory usage for large codebases
- Fast Retrieval: Quick information extraction from cached ASTs
- Plugin Architecture: Modular design for extensibility
🔍 Information Capabilities
Component Information
- Component type (functional/class)
- Props interface and types
- State usage presence
- Lifecycle methods (class components)
- Hook usage list
- JSX structure overview
Hook Information
- Hook definitions and signatures
- Dependencies and parameters
- Custom hook composition
- Built-in hook usage locations
- Hook return types
Page Information
- Static vs dynamic routes
- Data fetching methods present
- Page components and their props
- API route endpoints and methods
- Layout component usage
Feature Information
- Module boundaries and structure
- Shared component locations
- Business logic organization
- Utility function locations
- Type definition locations
Pattern Analysis
- React patterns (Context, HOCs, Render Props)
- Next.js patterns (Data fetching, Routing)
- Architecture patterns identification
🐛 Troubleshooting
Common Issues
Server not connecting:
- Verify Node.js version (18+)
- Check that the build completed successfully
- Ensure correct path in MCP configuration
Information not available:
- Verify the project is a valid Next.js project
- Check file permissions
- Ensure TypeScript files can be parsed
Performance issues:
- Large projects may take time on first scan
- Clear cache if experiencing memory issues
- Consider scanning specific directories instead of entire project
npx now available:
- Package successfully published to npm
- Use
npx mcp-talk-to-project-next-jsto run without installation - For development or customization, use the local installation method
- On first run, npx may take time to download and cache the package
- Use
npx --verbose mcp-talk-to-project-next-jsfor debugging
Debug Mode
Run with debug logging:
DEBUG=mcp:nextjs npm run start🤝 Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests for new functionality
- Submit a pull request
📝 License
MIT License - see LICENSE for details
