Select Component

Select Component is a new feature in Dyad v0.8.0 that allows you to select a component and edit it.

Look for the icon above in the preview header bar. When you click it, you can select a component and have the AI edit that specific part of your app.

For Dyad apps created after v0.8.0, this feature is enabled by default and ready to use. For apps created before v0.8.0, you'll need to follow one of the upgrade paths below.

Quick upgrade

Dyad provides a one-click upgrade for older Dyad apps built with the default React/Vite.js template.

Go to the App Details page by clicking on your app name in the top-left corner.

At the bottom of the app details page, you will see an Upgrades section. Look for the upgrade named Enable select component to edit and click Upgrade.

If it suceeds, then you can start using the feature.

If you run into an error, follow the manual upgrade steps below.

Manual upgrade

To do a manual upgrade, you will want to open your Dyad app code directory in your terminal and IDE (e.g. VS Code, Cursor).

React.js / Vite

If you created a React.js / Vite app, which is Dyad's default template, you can manually upgrade by doing the following steps:

Install the @dyad-sh/react-vite-component-tagger npm package

pnpm add @dyad-sh/react-vite-component-tagger
# or
npm install @dyad-sh/react-vite-component-tagger

Add the plugin to vite.config.ts

Update your vite.config.ts file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dyadComponentTagger from "@dyad-sh/react-vite-component-tagger";
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [dyadComponentTagger(), react()],
});

Commit the changes (optional)

You can commit these changes in Git or let Dyad commit them with your next edit.

Now, you should be able to use this feature.

Next.js

If you created a Next.js app, you can manually upgrade by doing the following steps:

Install the @dyad-sh/nextjs-webpack-component-tagger npm package

pnpm add @dyad-sh/nextjs-webpack-component-tagger
# or
npm install @dyad-sh/nextjs-webpack-component-tagger

Add the loader to your next.config.ts file

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  webpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.module.rules.push({
        test: /\.(jsx|tsx)$/,
        exclude: /node_modules/,
        enforce: "pre",
        use: "@dyad-sh/nextjs-webpack-component-tagger",
      });
    }
    return config;
  },
};
 
export default nextConfig;