A performance insights and knowledge assistant agent built on top of Chrome DevTools internals, Mastra, AI SDK and NextJS

PerfAgent - AI-Powered Web Performance Analysis

PerfAgent is an advanced web performance analysis tool that leverages AI to help developers analyze and optimize their web applications. It provides detailed insights into Core Web Vitals and other performance metrics through interactive visualizations and AI-assisted recommendations.

Features

• AI-Powered Analysis: Utilizes large language models to analyze performance traces and provide actionable insights.
• Performance Visualization:
  • Flame graph visualization for CPU profile analysis
  • Network waterfall charts for request timing analysis
  • Interactive timeline views for user interactions
• Core Web Vitals Analysis: Comprehensive analysis of LCP, INP, CLS, and other performance metrics.
• Chat Interface: Engage with the AI assistant through a familiar chat interface to get targeted performance advice.
• Trace Processing: Upload and process Chrome DevTools performance traces for detailed analysis.
• Report Generation: Generate markdown reports with actionable optimization recommendations.

Project Structure

Main Directories

• /app: Next.js app router pages and API routes
  • /api: Backend API routes for AI integration, suggestions, and more
  • /chat: The main chat interface for interacting with the AI
  • /actions: Server actions for subscription management
  • /workers: Web workers for handling CPU-intensive tasks
• /components: React components
  • /flamegraph: Flame graph visualization components
  • /network-activity: Network request visualization
  • /trace-details: Components for displaying trace insights
  • /app-sidebar: Navigation and sidebar components
  • /ui: shadcn base components built with Radix UI
• /lib: Utilities and shared code
  • /ai: AI-related code and prompts
    • /mastra: Mastra AI agents and workflows
  • /stores: Zustand state management stores

Core Components

• Flame Graph Visualization: Int