diff --git a/web/app/components/devtools/agentation/agentation.tsx b/web/app/components/devtools/agentation/agentation.tsx
new file mode 100644
index 0000000000..12b0a034ad
--- /dev/null
+++ b/web/app/components/devtools/agentation/agentation.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { Agentation as AgentationComponent } from 'agentation'
+
+export const Agentation = () => {
+  return <AgentationComponent />
+}
diff --git a/web/app/components/devtools/agentation/loader.tsx b/web/app/components/devtools/agentation/loader.tsx
new file mode 100644
index 0000000000..347becf6e4
--- /dev/null
+++ b/web/app/components/devtools/agentation/loader.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { lazy, Suspense } from 'react'
+import { IS_DEV } from '@/config'
+
+const Agentation = lazy(() =>
+  import('./agentation').then(module => ({
+    default: module.Agentation,
+  })),
+)
+
+export const AgentationLoader = () => {
+  if (!IS_DEV)
+    return null
+
+  return (
+    <Suspense fallback={null}>
+      <Agentation />
+    </Suspense>
+  )
+}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 845cae2d4e..6cfa63b5cc 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -10,6 +10,7 @@ import { DatasetAttr } from '@/types/feature'
 import { cn } from '@/utils/classnames'
 import { ToastProvider } from './components/base/toast'
 import BrowserInitializer from './components/browser-initializer'
+import { AgentationLoader } from './components/devtools/agentation/loader'
 import { ReactScanLoader } from './components/devtools/react-scan/loader'
 import { I18nServerProvider } from './components/provider/i18n-server'
 import { PWAProvider } from './components/provider/serwist'
@@ -121,6 +122,7 @@ const LocaleLayout = async ({
             </ThemeProvider>
           </JotaiProvider>
           <RoutePrefixHandle />
+          <AgentationLoader />
         </PWAProvider>
       </body>
     </html>
diff --git a/web/package.json b/web/package.json
index 69cc08bd32..f9a59f275b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -204,6 +204,7 @@
     "@typescript/native-preview": "7.0.0-dev.20251209.1",
     "@vitejs/plugin-react": "5.1.2",
     "@vitest/coverage-v8": "4.0.17",
+    "agentation": "1.3.2",
     "autoprefixer": "10.4.21",
     "code-inspector-plugin": "1.3.6",
     "cross-env": "10.1.0",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index c98b57ee48..7302b363b1 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -499,6 +499,9 @@ importers:
       '@vitest/coverage-v8':
         specifier: 4.0.17
         version: 4.0.17(vitest@4.0.17(@types/node@18.15.0)(happy-dom@20.0.11)(jiti@1.21.7)(jsdom@27.3.0(canvas@3.2.0))(sass@1.93.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      agentation:
+        specifier: 1.3.2
+        version: 1.3.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       autoprefixer:
         specifier: 10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -4073,6 +4076,12 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  agentation@1.3.2:
+    resolution: {integrity: sha512-9yZ/3hTcNePr1asnMyipxAZU8nFdBibNfw7wTdLUd3ULTTQCp9QZX7Y5PTMzkYWX4fhqEI2LOjMCb3vkmZga9w==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+
   ahooks@3.9.5:
     resolution: {integrity: sha512-TrjXie49Q8HuHKTa84Fm9A+famMDAG1+7a9S9Gq6RQ0h90Jgqmiq3CkObuRjWT/C4d6nRZCw35Y2k2fmybb5eA==}
     engines: {node: '>=18'}
@@ -12635,6 +12644,11 @@ snapshots:
 
   agent-base@7.1.4: {}
 
+  agentation@1.3.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   ahooks@3.9.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4