Update AppKit template for SDK 0.1.4 (#4292)

## Summary

Updates AppKit template to align with SDK 0.1.2 and fix documentation
issues causing build failures.

**Changes:**
1. **Package versions**: Bump `@databricks/appkit` and
`@databricks/appkit-ui` from `0.0.2` to `0.1.2`
2. **Import path fix**: `@databricks/app-kit` → `@databricks/appkit` in
docs
3. **Chart children fix**: Remove Recharts children pattern from
LineChart (use props instead)
4. **Import cleanup**: Remove unused recharts imports from App.tsx
5. **Documentation**: Add chart children warning, fix import paths

**Root causes addressed:**
- Agents using `<LineChart><Line .../></LineChart>` → TypeScript errors
(charts don't accept children)
- Agents using wrong import path → module not found errors
- Outdated package versions → missing features

## Test plan
- Template changes only
- Manual testing with app generation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: keugenek

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">

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")
   });

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:**

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",