Skip to content
Aide Aide Aide

First-class support for React

Supported projects

Currently, we only support React projects that use client-side rendering and expose a source map in their output. For example, if you are using Vite, make sure you are client-side rendering and either run your app in development mode or enable source maps in your build.

Enabling this feature

Open Aide user settings (JSON) in the Command Palette by pressing Ctrl + Shift+ P (Cmd + Shift+ P on Mac), and set "aide.enableInspectWithDevtools" to true.

"aide": {
    "enableInspectWithDevtools": false
}

A button with a browser icon should now appear in the top-right corner of the assistant panel, next to the “New session” (plus icon) and “Previous sessions” (clock icon) buttons.

Assistant actions after enabling the feature

How to use

Run your client-side rendered app on a local dev server.

If you enabled this feature, you will see a the browser icon in the assistant view top-right actions. Click it, and insert the localhost url and port of your dev server in the command palette that opens.

Make sure you are opening a dev server from the relevant workspace (e.g.: if your portfolio project is being served locally, make sure to open the portfolio workspace on Aide.). The devtools may return relative paths that work only when the correct workspace is open.

A dev server has started for the project

Start your dev server

The command palette to open the webview is open, and the dev server port is inserted

Click on the browser button and insert the dev server port

A webview at the proxied url opens up

A webview will open displaying the dev server contents

This will open up a webview pointing to a local proxy to your dev server – we need this proxy layer to inject a small script to enable React devtools.

At this point, if the devtools pick up React, you will see an inspect icon in the context attachemnt options, next to the clip (and compass, if you are in editing or agentic mode) icon. This will toggle inspecting the React tree on and off.

Inspect button is not visible in the context attachments actions

The context attachemnt actions before opening the webview

Inspect button is not visible in the context attachments actions

The context attachemnts when the devtools are connected

Known issues

We currently use the symbolicated source of a component in order to find the file on the system that corresponds to the React component, and the line range of what part of the underlying JSX was actually clicked. This has a few implications:

  1. A source map needs to be present in order to get get the symbolicated source of a React component.
  2. The app needs to be client-rendered, since we currently can’t easily get the path of a server component.
  3. You will have to navigate using URLs in the web view instead of clicking around your app links.

We know these are hard limitations, but we are working to remove them and improve both your experience and the value you can get out of this feature.