diff --git a/README.md b/README.md
index e5bbbdf..06b771d 100644
--- a/README.md
+++ b/README.md
@@ -103,6 +103,7 @@ To ensure compatibility with Supernova agentic system:
 - For **Port and Build Output**, dev server must run on **port 3000** (set in `vite.config.ts` - do not change). Builds must output to `dist/` using `npm run build`.
 - **Static Assets** should go to `public/`. Vite handles serving and inclusion automatically. If you want to use them in prototypes, serve them from this location, and reference relative to the root of the domain.
 - **Vite Configuration** can be extended by changing `vite.config.ts`, but do not remove required plugins or change the base project path.
+- **Prototyping Tooling**: The `@supernovaio/prototyping-tooling` plugin is required and must remain in the Vite configuration. It must be placed before the React plugin in the plugins array to ensure proper metadata injection into JSX elements. This plugin enables design-time features like element selection, annotation, and live editing through iframe communication.
 
 ### Project Structure
 
diff --git a/package-lock.json b/package-lock.json
index e19e15f..f4110cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,19 @@
 {
   "name": "supernova-container-template",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "supernova-container-template",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.30.1",
+        "@supernovaio/prototyping-tooling": "latest",
         "@types/node": "^22.10.5",
         "@types/react": "^18.3.17",
         "@types/react-dom": "^18.3.5",
@@ -1324,6 +1325,40 @@
         "win32"
       ]
     },
+    "node_modules/@supernovaio/prototyping-tooling": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@supernovaio/prototyping-tooling/-/prototyping-tooling-0.9.4.tgz",
+      "integrity": "sha512-KAfayi01uw+12fcIr1WY+2X/3tGklbIQZCxXlMg7bWE8qlGzZrVngjJt6oH5fwsgSCSUewIOGVXZxjg32nUD+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@babel/generator": "^7.0.0",
+        "@babel/parser": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@babel/types": "^7.0.0",
+        "react": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/generator": {
+          "optional": true
+        },
+        "@babel/parser": {
+          "optional": true
+        },
+        "@babel/traverse": {
+          "optional": true
+        },
+        "@babel/types": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
diff --git a/package.json b/package.json
index 6e9dec3..8ef320b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@supernovaio/prototyping-tooling": "latest",
     "@eslint/js": "^9.30.1",
     "@types/node": "^22.10.5",
     "@types/react": "^18.3.17",
@@ -28,4 +29,4 @@
     "typescript-eslint": "^8.35.1",
     "vite": "^7.1.4"
   }
-}
+}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 224f926..46c8e85 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
 // This is the main entry point for the application.
 // Add your top-level configuration here: providers, wrappers, analytics, etc.
 // The App component (app.tsx) is where AI-generated code will be placed.
+import "@supernovaio/prototyping-tooling/client";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
diff --git a/vite.config.ts b/vite.config.ts
index 7cda08a..3b5a389 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,11 +1,12 @@
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
 import { defineConfig } from "vite";
+import { supernovaDesignPlugin } from "@supernovaio/prototyping-tooling/build";
 
 // https://vite.dev/config/
 export default defineConfig({
   base: "./",
-  plugins: [errorMonitorPlugin(), react()],
+  plugins: [supernovaDesignPlugin(), errorMonitorPlugin(), react()],
   server: {
     port: 3000,
     allowedHosts: true,