PerfPilot AI is an intelligent tool designed to analyze Next.js applications, identify performance issues, and provide actionable recommendations to improve speed and user experience. Built for the Next.js Global Hackathon 2025, PerfPilot AI focuses on optimizing applications for the latest Next.js 14/15 features.
Watch our demo video to see PerfPilot AI in action. The video demonstrates the key features, analysis process, and how the tool can help optimize your Next.js applications.
- Comprehensive Code Analysis: Detect performance issues in Next.js components and applications
- Bundle Size Analysis: Identify heavy dependencies, unnecessary packages, and tree-shaking issues
- Multi-file Support: Upload and analyze multiple files at once for a holistic performance assessment
- Visual Performance Dashboard: Intuitive performance score and category breakdowns
- Interactive Data Visualizations: Beautiful, interactive charts powered by Recharts showing performance metrics and issue distribution
- AI-Powered Recommendations: Get personalized, priority-ranked recommendations from GPT-4o
- Code Examples: Actionable code snippets to fix detected issues
- Export Functionality: Save analysis results as JSON or formatted HTML reports
- Next.js 14/15 Features: Support for the latest Next.js features including:
- Partial Prerendering (PPR)
- React Server Components
- Server Actions
- Metadata API
- Route Handlers with Edge Runtime
- Core Web Vitals Focus: Optimize for LCP, CLS, and INP metrics
- Performance History Dashboard: Track performance improvements over time
- Copy/Paste Code Fixes: Easily implement recommended solutions
- Images: Missing next/image components, dimensions, and priority props
- Rendering Strategy: Opportunities for Partial Prerendering and Suspense boundaries
- Imports: Large dependencies that could be loaded dynamically
- Fonts: Font optimization with next/font
- Scripts: Script loading strategies with next/script
- Components: Proper use of Server Components and Client Components
- Routing: Efficient route handlers and metadata optimization
- Data Fetching: Optimized data fetching and revalidation strategies
- Heavy Dependencies: Identify large packages increasing bundle size
- Unnecessary Dependencies: Detect packages that aren't needed in Next.js projects
- Duplicate Functionality: Find multiple packages serving the same purpose
- Tree-shaking Issues: Identify import patterns preventing effective tree-shaking
- Bundle Score: Get an overall assessment of your bundle health
PerfPilot AI provides rich, interactive data visualizations to help you understand your performance metrics:
- Performance Score Distribution: Area chart showing your score in relation to performance zones
- Issues by Category: Bar chart showing the distribution of issues across different categories
- Issues by Severity: Pie chart displaying the proportion of critical, warning, and info issues
- Performance by Category: Radar chart visualizing performance scores across all categories
- Bundle Size Distribution: Pie chart showing the distribution of dependency issues
- Heaviest Dependencies: Bar chart identifying the largest packages in your bundle
-
Clone the repository:
git clone https://github.com/yourusername/perfpilot-ai.git cd perfpilot-ai -
Install dependencies:
npm install
-
Set up your environment variables: Create a
.env.localfile with your OpenAI API key:OPENAI_API_KEY=your_api_key_here -
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser to use PerfPilot AI.
- Navigate to the "Analyze" page
- Choose to either:
- Upload your Next.js files (supports multiple files)
- Paste your Next.js code directly
- Click "Analyze Performance"
- View the detailed analysis results, including:
- Performance score and interactive charts
- Issue categories and severity breakdown
- Specific detected issues
- AI recommendations with code examples
- Performance insights and metrics
- Bundle analysis (when applicable)
- Optionally:
- Export your results as JSON or HTML reports
- Save your analysis to the dashboard to track improvements over time
We've included sample files for testing PerfPilot AI's analysis capabilities. These are organized into two categories:
Located in the test_files/jsx directory:
blog-page.jsx: Example blog page component with various performance issuesdashboard.jsx: Dashboard component with optimization opportunitieshero-section.jsx: Hero section with image and layout issueslayout.jsx: Layout component with font and metadata optimization needsproduct-page.jsx: Product page with data fetching and rendering issues
Usage Tip: For best results, upload all JSX files together for a more comprehensive analysis.
Located in the test_files/bundle directory:
comprehensive-package.json: Contains multiple types of bundle issuesduplicate-functionality-package.json: Features redundant packages serving similar purposesheavy-deps-package.json: Includes unnecessarily large dependenciestreeshaking-package.json: Demonstrates problematic import patternsunnecessary-deps-package.json: Contains packages not needed in Next.js projects
Usage Tip: Upload these files individually to see different types of bundle analysis insights.
- main: Contains the stable, submitted version for the Next.js Global Hackathon
- test: Contains the latest development work and improvements
Note for Judges: Our official hackathon submission is in the
mainbranch. For those interested in our latest developments and experimental features, please check thetestbranch.
- Next.js 14/15 - The React Framework with App Router
- Vercel AI SDK - For AI-powered recommendations
- OpenAI GPT-4o - Advanced language model for analysis
- Recharts - A composable charting library for React
- Shadcn/ui - Beautifully designed components
- Tailwind CSS - Utility-first CSS framework
- Radix UI - Accessible component primitives
PerfPilot AI is an entry for the Next.js Global Hackathon 2025. The project aims to win in the following categories:
- Fastest App: By implementing Partial Prerendering, optimized code loading, and edge runtime
- Best Use of AI: Leveraging the Vercel AI SDK for intelligent performance analysis
- Highest Quality App: With attention to design detail, accessibility, and user experience
For more details about our hackathon strategy and implementation plan, see:
This project is licensed under the MIT License - see the LICENSE file for details.