feat: Update app kit template (#4043)

## Changes
<!-- Brief summary of your changes that is easy to understand -->

Update the AppKit template to improve the base css, remove some
unnecessary code and add some examples of chart usage.

Added a mocked query to show some data on the charts.

Light mode

<img width="1689" height="1179" alt="image"
src="https://github.com/user-attachments/assets/c6ed133f-0925-4130-bfde-e7685d0fc666"
/>



Dark mode

<img width="1535" height="1105" alt="image"
src="https://github.com/user-attachments/assets/3fa87701-9e20-4b23-b7c2-1f8f0390ce7c"
/>





## Why
<!-- Why are these changes needed? Provide the context that the reviewer
might be missing.
For example, were there any decisions behind the change that are not
reflected in the code itself? -->

## Tests
Manually

<!-- If your PR needs to be included in the release notes for next
release,
add a separate entry in NEXT_CHANGELOG.md as part of your PR. -->

---------

Co-authored-by: MarioCadenas <[email protected]>
Co-authored-by: Fabian Jakobs <[email protected]>

Author: MarioCadenas

experimental/apps-mcp/templates/appkit/template/{{.project_name}}/CLAUDE.md

@@ -77,6 +77,7 @@ This template uses `@databricks/app-kit` which provides:
 - **Server setup**: `createApp()` with `server()` and `analytics()` plugins
 - **SQL queries**: Store SQL files in `config/queries/` directory
 - **React hooks**: `useAnalyticsQuery<T>()` for executing SQL queries from frontend
+- **Visualization Components**: AreaChart, BarChart, LineChart, PieChart, RadarChart, DataTable
 - **Authentication**: Automatic Databricks workspace authentication
 
 ### Server Setup Pattern:
@@ -87,13 +88,9 @@ import { createApp, server, analytics } from '@databricks/app-kit';
 const app = await createApp({
   plugins: [
     server({
-      watch: process.env.NODE_ENV === 'development',
-      staticPath,
       autoStart: false,
     }),
-    analytics({
-      timeout: 10000,
-    }),
+    analytics(),
   ],
 });
 
@@ -136,13 +133,27 @@ const { data, loading, error } = useAnalyticsQuery<T>(
 - `enabled` - Query always executes on mount. Use conditional rendering instead: `{selectedId && <MyComponent id={selectedId} />}`
 - `refetch` - Not available. Re-mount component to re-query.
 
+### Frontend Visualization Pattern:
+
+```typescript
+import { AreaChart } from '@databricks/app-kit/react';
+
+function MyComponent() {
+  return (
+    <div>
+      <AreaChart queryKey="query_name" parameters={{}} />
+    </div>
+  );
+}
+```
+
 ### SQL Query Files:
 
 **IMPORTANT**: ALWAYS use SQL files in `config/queries/` for data retrieval. NEVER use tRPC for SQL queries.
 
 - Store ALL SQL queries in `config/queries/` directory
 - Name files descriptively: `trip_statistics.sql`, `user_metrics.sql`, `sales_by_region.sql`
-- Reference by filename (without extension) in `useAnalyticsQuery`
+- Reference by filename (without extension) in `useAnalyticsQuery` or directly in a visualization component passing it as `queryKey`
 - App Kit automatically executes queries against configured Databricks warehouse
 - Benefits: Built-in caching, proper connection pooling, better performance
 
@@ -164,6 +175,31 @@ WHERE column_value >= :min_value
   AND (:optional_filter = '' OR status = :optional_filter)
 ```
 
+### Query Types
+
+Once the schema and the result of a query has been discovered, create its corresponding type in `config/queries/schema.ts` using a zod schema.
+
+Example
+
+```typescript
+import { z } from 'zod';
+
+export const querySchemas = {
+  mocked_sales: z.array(
+    z.object({
+      max_month_num: z.number().min(1).max(12),
+    })
+  ),
+
+  hello_world: z.array(
+    z.object({
+      value: z.string(),
+    })
+  ),
+};
+
+```
+
 **Key Points:**
 
 - Parameters use colon prefix: `:parameter_name`
@@ -173,7 +209,7 @@ WHERE column_value >= :min_value
 #### Frontend Parameter Passing:
 
 ```typescript
-const { data } = useAnalyticsQuery<ResultType[]>('filtered_data', {
+const { data } = useAnalyticsQuery('filtered_data', {
   min_value: minValue,
   max_value: maxValue,
   category: category,
@@ -287,7 +323,7 @@ function MyComponent() {
 
 **Decision Tree for Data Operations:**
 
-1. **Is it a SQL query?** → Use `config/queries/*.sql` + `useAnalyticsQuery`
+1. **Is it a SQL query?** → Use `config/queries/*.sql` + a Visualization component or `useAnalyticsQuery` if no component is available
    - SELECT statements
    - Aggregations, JOINs, GROUP BY
    - Analytics and reporting queries
@@ -427,30 +463,52 @@ npm run test:e2e:ui     # Run with Playwright UI
 - Forms should have loading states: `disabled={isLoading}`
 - Show empty states with helpful text when no data exists
 
-## Data Visualization with Recharts
+## Data Visualization with App Kit UI
 
-The template includes Recharts. Use Databricks brand colors: `['#40d1f5', '#4462c9', '#EB1600', '#0B2026', '#4A4A4A', '#353a4a']` (via `stroke` or `fill` props).
+App Kit UI provides an abstraction over Recharts.
+
+It exports a list of components where each component also exports its own props, so for example to use the `LineChart` it would be used as follows:
+
+```typescript
+import { LineChart } from '@databricks/app-kit-ui/react';
+
+function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>My Data</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <LineChart queryKey="my_data" parameters={{}} />
+      </CardContent>
+    </Card>
+  );
+}
+```
+Each component exports their props, so to know the props from `LineChart`, `LineChartProps` can be imported too.
+
+The Visualization components provided by the App Kit UI library can also be used in full control mode combined with Recharts, which is included in the template.
+Use Databricks brand colors: `['#40d1f5', '#4462c9', '#EB1600', '#0B2026', '#4A4A4A', '#353a4a']` (via `stroke` or `fill` props).
 
 ```tsx
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { LineChart } from '@databricks/app-kit-ui/react';
+import { Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 <Card>
   <CardHeader><CardTitle>My Metrics</CardTitle></CardHeader>
   <CardContent>
-    {loading && <Skeleton className="h-[300px] w-full" />}
-    {error && <div className="text-destructive">Error: {error}</div>}
-    {data && (
-      <ResponsiveContainer width="100%" height={300}>
-        <LineChart data={data}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="name" />
-          <YAxis />
-          <Tooltip />
-          <Line type="monotone" dataKey="value" stroke="#40d1f5" />
-        </LineChart>
-      </ResponsiveContainer>
-    )}
+    <LineChart queryKey="query_name" parameters={salesParameters}>
+      <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>
   </CardContent>
 </Card>
 ```
+
+Every component handles loading, errors and data fetching internally, so the only thing needed is the `queryKey` and `parameters`.
+When rendering fully custom mode, it also needs the recharts components for that specific visualization component.

…late/{{.project_name}}/postcss.config.js ….project_name}}/client/postcss.config.jsexperimental/apps-mcp/templates/appkit/template/{{.project_name}}/postcss.config.js renamed to experimental/apps-mcp/templates/appkit/template/{{.project_name}}/client/postcss.config.js experimental/apps-mcp/templates/appkit/template/{{.project_name}}/postcss.config.js renamed to experimental/apps-mcp/templates/appkit/template/{{.project_name}}/client/postcss.config.js

@@ -1,12 +1,14 @@
-import { useAnalyticsQuery } from '@databricks/app-kit/react';
+import { useAnalyticsQuery, AreaChart, LineChart, RadarChart } from '@databricks/app-kit-ui/react';
+import { Line, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import type { QueryResult } from '../../shared/types';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { trpc } from './lib/trpc';
 import { useState, useEffect } from 'react';
 
 function App() {
-  const { data, loading, error } = useAnalyticsQuery<QueryResult[]>('hello_world', {
+  const { data, loading, error } = useAnalyticsQuery('hello_world', {
     message: 'hello world',
   });
 
@@ -44,16 +46,18 @@ function App() {
       });
   }, []);
 
+  const [maxMonthNum, setMaxMonthNum] = useState<number>(12);
+
+  const salesParameters = { max_month_num: maxMonthNum };
+
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex flex-col items-center justify-center p-4">
+    <div className="min-h-screen bg-background flex flex-col items-center justify-center p-4 w-full">
       <div className="mb-8 text-center">
-        <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-slate-900 to-slate-700 dark:from-slate-100 dark:to-slate-300 bg-clip-text text-transparent">
-          Minimal Databricks App
-        </h1>
+        <h1 className="text-4xl font-bold mb-2 text-foreground">Minimal Databricks App</h1>
         <p className="text-lg text-muted-foreground max-w-md">A minimal Databricks App powered by Databricks AppKit</p>
       </div>
 
-      <div className="flex flex-col gap-6 w-full max-w-md">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-7xl">
         <Card className="shadow-lg">
           <CardHeader>
             <CardTitle>SQL Query Result</CardTitle>
@@ -69,9 +73,7 @@ function App() {
             {data && data.length > 0 && (
               <div className="space-y-2">
                 <div className="text-sm text-muted-foreground">Query: SELECT :message AS value</div>
-                <div className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-                  {data[0].value}
-                </div>
+                <div className="text-2xl font-bold text-primary">{data[0].value}</div>
               </div>
             )}
             {data && data.length === 0 && <div className="text-muted-foreground">No results</div>}
@@ -95,10 +97,8 @@ function App() {
             {health && (
               <div className="space-y-2">
                 <div className="flex items-center gap-2">
-                  <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-                  <div className="text-lg font-semibold text-green-600 dark:text-green-400">
-                    {health.status.toUpperCase()}
-                  </div>
+                  <div className="w-2 h-2 rounded-full bg-[hsl(var(--success))] animate-pulse"></div>
+                  <div className="text-lg font-semibold text-[hsl(var(--success))]">{health.status.toUpperCase()}</div>
                 </div>
                 <div className="text-sm text-muted-foreground">
                   Last checked: {new Date(health.timestamp).toLocaleString()}
@@ -116,7 +116,7 @@ function App() {
             {modelLoading && (
               <div className="space-y-2">
                 <Skeleton className="h-4 w-48" />
-                <div className="bg-slate-100 dark:bg-slate-800 p-3 rounded-md border border-slate-200 dark:border-slate-700 space-y-2">
+                <div className="bg-muted p-3 rounded-md border border-border space-y-2">
                   <Skeleton className="h-4 w-full" />
                   <Skeleton className="h-4 w-5/6" />
                   <Skeleton className="h-4 w-4/6" />
@@ -127,13 +127,69 @@ function App() {
             {modelResponse && (
               <div className="space-y-2">
                 <div className="text-sm text-muted-foreground">Prompt: &quot;How are you today?&quot;</div>
-                <div className="text-base bg-slate-100 dark:bg-slate-800 p-3 rounded-md border border-slate-200 dark:border-slate-700">
-                  {modelResponse}
-                </div>
+                <div className="text-base bg-muted p-3 rounded-md border border-border">{modelResponse}</div>
               </div>
             )}
           </CardContent>
         </Card>
+
+        <Card className="shadow-lg md:col-span-3">
+          <CardHeader>
+            <CardTitle>Sales Data Filter</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="max-w-md">
+              <div className="space-y-2">
+                <Label htmlFor="max-month">Show data up to month</Label>
+                <Select value={maxMonthNum.toString()} onValueChange={(value) => setMaxMonthNum(parseInt(value))}>
+                  <SelectTrigger id="max-month">
+                    <SelectValue placeholder="All months" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {[...Array(12)].map((_, i) => (
+                      <SelectItem key={i + 1} value={(i + 1).toString()}>
+                        {i + 1 === 12 ? 'All months (12)' : `Month ${i + 1}`}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-lg flex min-w-0">
+          <CardHeader>
+            <CardTitle>Sales Trend Area Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <AreaChart queryKey="mocked_sales" parameters={salesParameters} />
+          </CardContent>
+        </Card>
+        <Card className="shadow-lg flex min-w-0">
+          <CardHeader>
+            <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>
+          </CardContent>
+        </Card>
+        <Card className="shadow-lg flex min-w-0">
+          <CardHeader>
+            <CardTitle>Sales Trend Radar Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RadarChart queryKey="mocked_sales" parameters={salesParameters} />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

experimental/apps-mcp/templates/appkit/template/{{.project_name}}/client/src/App.tsx

@@ -0,0 +1,18 @@
+// Auto-generated by AppKit - DO NOT EDIT
+import "@databricks/app-kit-ui/react";
+
+declare module "@databricks/app-kit-ui/react" {
+  interface PluginRegistry {
+
+  }
+
+  interface QueryRegistry {
+    mocked_sales: {
+        max_month_num: number;
+    }[];
+    hello_world: {
+        value: string;
+    }[];
+  }
+
+}

experimental/apps-mcp/templates/appkit/template/{{.project_name}}/client/src/appKitTypes.d.ts

@@ -52,6 +52,7 @@ function SelectContent({
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         data-slot="select-content"
+        style={{ backgroundColor: 'hsl(var(--card))', opacity: 1 }}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
           position === 'popper' &&