diff --git a/experimental/aitools/templates/appkit/template/{{.project_name}}/client/src/App.tsx b/experimental/aitools/templates/appkit/template/{{.project_name}}/client/src/App.tsx
index 3701eafcd7..91c80d2bf5 100644
--- a/experimental/aitools/templates/appkit/template/{{.project_name}}/client/src/App.tsx
+++ b/experimental/aitools/templates/appkit/template/{{.project_name}}/client/src/App.tsx
@@ -16,7 +16,6 @@ import {
   SelectValue,
 } from '@databricks/appkit-ui/react';
 import { sql } from "@databricks/appkit-ui/js";
-import { Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
 import { trpc } from './lib/trpc';
 import { useState, useEffect } from 'react';
 
@@ -184,15 +183,13 @@ function App() {
             <CardTitle>Sales Trend Custom Line Chart</CardTitle>
           </CardHeader>
           <CardContent>
-            <LineChart queryKey="mocked_sales" parameters={salesParameters}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <Line type="monotone" dataKey="revenue" stroke="#40d1f5" />
-              <Line type="monotone" dataKey="expenses" stroke="#4462c9" />
-              <Line type="monotone" dataKey="customers" stroke="#EB1600" />
-              <XAxis dataKey="month" />
-              <YAxis />
-              <Tooltip />
-            </LineChart>
+            <LineChart
+              queryKey="mocked_sales"
+              parameters={salesParameters}
+              xKey="month"
+              yKey={["revenue", "expenses", "customers"]}
+              colors={['#40d1f5', '#4462c9', '#EB1600']}
+            />
           </CardContent>
         </Card>
         <Card className="shadow-lg flex min-w-0">
diff --git a/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/appkit-sdk.md b/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/appkit-sdk.md
index 5ab00768e1..f08a0c4971 100644
--- a/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/appkit-sdk.md
+++ b/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/appkit-sdk.md
@@ -17,7 +17,7 @@ import { MyInterface, MyType } from '../../shared/types';
 ## Server Setup
 
 ```typescript
-import { createApp, server, analytics } from '@databricks/app-kit';
+import { createApp, server, analytics } from '@databricks/appkit';
 
 const app = await createApp({
   plugins: [
@@ -45,12 +45,11 @@ Use cases:
 - Data that needs transformation before display
 
 ```typescript
-import { useAnalyticsQuery, Skeleton } from '@databricks/app-kit-ui/react';
-
-interface QueryResult { column_name: string; value: number; }
+import { useAnalyticsQuery, Skeleton } from '@databricks/appkit-ui/react';
+import { sql } from '@databricks/appkit-ui/js';
 
 function CustomDisplay() {
-  const { data, loading, error } = useAnalyticsQuery<QueryResult[]>('query_name', {
+  const { data, loading, error } = useAnalyticsQuery('query_name', {
     start_date: sql.date(Date.now()),
     category: sql.string("tools")
   });
diff --git a/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/frontend.md b/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/frontend.md
index a270b46b9e..bdb3498c1d 100644
--- a/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/frontend.md
+++ b/experimental/aitools/templates/appkit/template/{{.project_name}}/docs/frontend.md
@@ -35,23 +35,23 @@ function MyDashboard() {
 
 Components automatically fetch data, show loading states, display errors, and render with sensible defaults.
 
-**Custom Visualization (Recharts):**
+**⚠️ CRITICAL: AppKit charts do NOT support children**
 
 ```typescript
+// ❌ WRONG - AppKit charts don't accept Recharts children
 import { BarChart } from '@databricks/appkit-ui/react';
-import { Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
-
-<BarChart queryKey="sales_by_region" parameters={{}}>
-  <CartesianGrid strokeDasharray="3 3" />
-  <XAxis dataKey="region" />
-  <YAxis />
-  <Tooltip />
-  <Legend />
-  <Bar dataKey="revenue" fill="#40d1f5" />
-  <Bar dataKey="expenses" fill="#4462c9" />
+import { Bar, XAxis, YAxis } from 'recharts';
+<BarChart queryKey="sales" parameters={{}}>
+  <XAxis dataKey="region" />  // TypeScript error!
+  <Bar dataKey="revenue" />    // TypeScript error!
 </BarChart>
+
+// ✅ CORRECT - Use simple self-closing syntax
+<BarChart queryKey="sales" parameters={{}} />
 ```
 
+AppKit charts auto-configure axes, tooltips, and styling. Do NOT import Recharts components.
+
 Databricks brand colors: `['#40d1f5', '#4462c9', '#EB1600', '#0B2026', '#4A4A4A', '#353a4a']`
 
 **❌ Don't double-fetch:**
diff --git a/experimental/aitools/templates/appkit/template/{{.project_name}}/package.json b/experimental/aitools/templates/appkit/template/{{.project_name}}/package.json
index 480d310043..318173a490 100644
--- a/experimental/aitools/templates/appkit/template/{{.project_name}}/package.json
+++ b/experimental/aitools/templates/appkit/template/{{.project_name}}/package.json
@@ -27,8 +27,8 @@
   "license": "Unlicensed",
   "description": "",
   "dependencies": {
-    "@databricks/appkit": "^0.0.2",
-    "@databricks/appkit-ui": "^0.0.2",
+    "@databricks/appkit": "^0.1.4",
+    "@databricks/appkit-ui": "^0.1.4",
     "@databricks/sdk-experimental": "^0.14.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",