Tutorial

Send changes to your IDE agent with inspecta

After you fix styles on a live page, the last step is getting those changes into your codebase. inspecta turns every edit into a ready-to-use payload you can send directly to Cursor or GitHub Copilot in VS Code.

Before you start

To send changes straight to your IDE agent, you’ll need the project running locally. Open the page on localhost in Chrome with inspecta, and have the codebase open in Cursor or VS Code.

What gets exported

Each export includes:

  • The CSS property changes you made in the visual editor
  • DOM context so the AI knows which element to target
  • Instructions for your IDE agent to use your project settings and stack to make the edit

No more copying hex codes into a chat window and hoping the model picks the right selector.

Step 1: Set up the connection

  1. Install the extension. Download the inspecta IDE extension (one file works for both Cursor and VS Code). In your editor, press Cmd + Shift + P (Mac) or Ctrl + Shift + P (Windows/Linux), choose Install from VSIX, and select the downloaded file.
  2. Open the bridge. In your IDE, click inspecta closed (click to open) in the bottom toolbar to start the inspecta server.
  3. Connect. In the inspecta inspector panel, click the reconnect button.

Step 2: Make an edit

Make an edit on the live page.

Step 3: Send to AI for implementation

inspecta delivers payloads straight to your IDE agent. You do not need to paste anything manually in the editor.

  • Element toolbar: Select an element on the page and click Send to AI in the element toolbar. This opens the Send to AI popup, where you can add an optional prompt before clicking Send.
  • General prompt: Type a broader instruction in the prompt box at the bottom of the main inspector panel and send from there. Use this when your request is not tied to one element’s edits.
  • CSS changes panel (one element): Open the CSS changes panel and send a specific element’s edits straight to your IDE agent.
  • CSS changes panel (bulk): Open the CSS changes panel and send all changes at once.

Once your IDE agent implements the changes, inspecta removes them automatically from the CSS changes panel.