ReSuggestor

Overview

ReSuggestor is a VS Code extension that analyzes React and frontend modules for performance issues using a hybrid compile-time and runtime audit. It runs a Cursor AI agent against your selected files, uses Chrome DevTools MCP for live browser tracing, and surfaces actionable optimization suggestions in an interactive panel. You can review findings, inspect before/after code, and apply selected fixes directly from the editor.

Install from VS Code Marketplace

1. Open Extensions in VS Code or Cursor (Cmd+Shift+X / Ctrl+Shift+X).
2. Search for ReSuggestor.
3. Click Install.

After installation, complete the Pre-requisites below before running your first analysis.

Pre-requisites

Before using ReSuggestor, make sure the following are installed and configured.

Node.js

ReSuggestor and the Chrome DevTools MCP server both require Node.js 18 or later.

1. Check your version:

   node --version
   

2. If Node is missing or outdated, install it from https://nodejs.org.
3. Confirm npm is available:

   npm --version
   

Chrome DevTools MCP

Runtime analysis depends on the Chrome DevTools MCP server so the AI agent can open pages, run performance traces, and read Core Web Vitals.

1. Install chrome-devtools-mcp globally from the npmjs.org registry:

   npm install -g chrome-devtools-mcp --registry=https://registry.npmjs.org/
   

2. Get the installed binary path:

   which chrome-devtools-mcp
   

   Example output: /usr/local/bin/chrome-devtools-mcp
3. Open Cursor Settings → MCP → New MCP Server, or edit your MCP config file directly:
   • Global: ~/.cursor/mcp.json (required for ReSuggestor / cursor-agent CLI)
   • Project-level: .cursor/mcp.json in the workspace root (IDE only)
4. Add the Chrome DevTools server using the path from step 2 as command:

   {
     "mcpServers": {
       "chrome-devtools": {
         "command": "/usr/local/bin/chrome-devtools-mcp"
       }
     }
   }
   

   Replace /usr/local/bin/chrome-devtools-mcp with the actual path returned by which chrome-devtools-mcp.
5. Toggle the server off/on in Settings → MCP, or restart Cursor.

Cursor CLI (cursor-agent)

ReSuggestor spawns the Cursor CLI to run analysis and apply fixes in the background.

1. Install the CLI (macOS, Linux, or WSL):

   curl https://cursor.com/install -fsS | bash
   

   On Windows PowerShell (then use WSL for the agent):

   irm 'https://cursor.com/install?win32=true' | iex
   

2. Add the CLI to your PATH if needed:

   echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
   source ~/.zshrc
   

3. Verify installation:

   cursor-agent --version
   

4. Set your Cursor API key (required for headless/CLI usage):

   export CURSOR_API_KEY=your_api_key_here
   

   To persist it across terminal sessions:

   echo 'export CURSOR_API_KEY=your_api_key_here' >> ~/.bashrc
   source ~/.bashrc
   

   On macOS with zsh, use ~/.zshrc instead of ~/.bashrc:

   echo 'export CURSOR_API_KEY=your_api_key_here' >> ~/.zshrc
   source ~/.zshrc
   

   Replace your_api_key_here with your key from Cursor Settings → API Keys.
5. Authenticate by running cursor-agent once and signing in when prompted. A Cursor subscription is required.

Note: ReSuggestor invokes cursor-agent with --approve-mcps and --force, so MCP servers (including Chrome DevTools) must already be configured in Cursor.

How to Use

1. Open a frontend project in VS Code or Cursor.

2. Start your dev server (for example on port 3000).

3. Run an analysis

   • Right-click a folder or file in the Explorer and choose Analyze This Module.
   • Or use the Review MR status bar action for GitLab merge request workflows.
   • Select compile-time and runtime parameters in the config panel.
   • Enter the port your app is running on when prompted.
   • Wait for analysis to finish, then review suggestions in the panel.

4. Apply fixes

   • Select one or more suggestions and click Build Selected.
   • View the full report via View full report in the suggestion panel header.

GitLab integration (optional)

Enable GitLab in Settings → ReSuggestor GitLab and configure your instance URL, token, owner, and repository. Then use ReSuggestor: GitLab MR Diffs from the Command Palette or the Review MR status bar button.

Development Setup

To work on the extension locally:

1. Clone the repository

   git clone https://prod-gitlab-ui.sprinklr.com/sprinklr/frontend/frontend-interns-2026/performance-optimizer.git
   cd performance-optimizer
   

2. Install dependencies

   npm install
   

3. Build the extension

   npm run build
   

4. Launch in Extension Development Host

   • Open this folder in VS Code or Cursor.
   • Press F5 (or use Run → Start Debugging) to open a new Extension Development Host window.
   • If F5 is not configured yet, create .vscode/launch.json:

     {
       "version": "0.2.0",
       "configurations": [
         {
           "name": "Run Extension",
           "type": "extensionHost",
           "request": "launch",
           "args": ["--extensionDevelopmentPath=${workspaceFolder}"]
         }
       ]
     }
     

5. Package a VSIX

   npm run package
   

Project Explanation

What ReSuggestor Does

ReSuggestor is a module-scoped performance optimizer for frontend codebases. Instead of scanning an entire repository, you point it at a specific folder or file — for example, a React route module, a feature directory, or a single component tree. The extension collects all files under that target, runs a structured audit, and returns verified, actionable recommendations you can apply selectively.

The analysis combines two approaches:

• Compile-time analysis — static checks for code-splitting, HTML markup, CSS architecture, namespace/scope health, asset configuration, and custom parameters you define.
• Runtime analysis — live browser tracing via Chrome DevTools MCP against URLs discovered from the target module, measuring Core Web Vitals, load speed, theme-switch performance, DOM complexity, and other runtime metrics.

End-to-End Workflow

User selects module
       ↓
Config panel (compile-time + runtime parameters)
       ↓
File discovery (walks target directory, skips node_modules/.git)
       ↓
Dev server check (validates app is running on entered port)
       ↓
cursor-agent runs analysis prompt
       ↓
Agent writes .resuggestor/MODULE_OPTIMIZATION_REPORT.md
       + .resuggestor/MODULE_OPTIMIZATION_SUGGESTIONS.json
       ↓
Suggestion panel displays findings
       ↓
User selects fixes → cursor-agent applies changes
       ↓
.resuggestor/APPLY_RESULTS.md written after apply phase

Key Components

Generated Artifacts

After analysis, the following files are created in .resuggestor/ at the target project root (not inside the extension repo):

Add .resuggestor/ to your project's .gitignore if you do not want these artifacts committed.

Suggestion Panel

The suggestion panel lets you:

• Browse compile-time and runtime suggestions with issue, root cause, and fix summaries
• Expand Details to see before/after code side by side and implementation steps
• Select individual fixes and apply them in batch
• Open the full markdown report for deeper context

Commands

Design Principles

ReSuggestor follows a zero-hallucination approach: the analysis agent is instructed to verify file contents and MCP trace results rather than guess. If a metric or route cannot be confirmed, it is reported as a blocked audit instead of producing placeholder recommendations. Runtime tracing is scoped only to URLs that belong to the selected module.