@databricks/appkit 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (248) hide show
  1. package/CLAUDE.md +121 -1228
  2. package/NOTICE.md +1 -1
  3. package/bin/appkit.js +3 -0
  4. package/dist/analytics/analytics.d.ts.map +1 -1
  5. package/dist/analytics/analytics.js +17 -30
  6. package/dist/analytics/analytics.js.map +1 -1
  7. package/dist/app/index.d.ts +5 -1
  8. package/dist/app/index.d.ts.map +1 -1
  9. package/dist/app/index.js +38 -9
  10. package/dist/app/index.js.map +1 -1
  11. package/dist/appkit/package.js +1 -1
  12. package/dist/cache/index.js +3 -3
  13. package/dist/cache/index.js.map +1 -1
  14. package/dist/cli/commands/docs.js +47 -0
  15. package/dist/cli/commands/docs.js.map +1 -0
  16. package/dist/cli/commands/generate-types.js +38 -0
  17. package/dist/cli/commands/generate-types.js.map +1 -0
  18. package/dist/cli/commands/lint.js +104 -0
  19. package/dist/cli/commands/lint.js.map +1 -0
  20. package/dist/cli/commands/setup.js +121 -0
  21. package/dist/cli/commands/setup.js.map +1 -0
  22. package/dist/cli/index.d.ts +1 -0
  23. package/dist/cli/index.js +24 -0
  24. package/dist/cli/index.js.map +1 -0
  25. package/dist/index.js.map +1 -1
  26. package/dist/plugin/plugin.d.ts +1 -0
  27. package/dist/plugin/plugin.d.ts.map +1 -1
  28. package/dist/plugin/plugin.js +1 -0
  29. package/dist/plugin/plugin.js.map +1 -1
  30. package/dist/server/remote-tunnel/remote-tunnel-manager.js +9 -9
  31. package/dist/server/remote-tunnel/remote-tunnel-manager.js.map +1 -1
  32. package/dist/server/utils.js +6 -6
  33. package/dist/server/utils.js.map +1 -1
  34. package/dist/shared/src/execute.d.ts +1 -0
  35. package/dist/shared/src/execute.d.ts.map +1 -1
  36. package/dist/shared/src/plugin.d.ts +3 -0
  37. package/dist/shared/src/plugin.d.ts.map +1 -1
  38. package/dist/telemetry/types.d.ts +1 -0
  39. package/dist/telemetry/types.d.ts.map +1 -1
  40. package/dist/type-generator/index.js +1 -1
  41. package/dist/type-generator/index.js.map +1 -1
  42. package/dist/type-generator/query-registry.js +9 -1
  43. package/dist/type-generator/query-registry.js.map +1 -1
  44. package/docs/docs/api/appkit/Class.AppKitError/index.html +77 -0
  45. package/docs/docs/api/appkit/Class.AppKitError.md +154 -0
  46. package/docs/docs/api/appkit/Class.AuthenticationError/index.html +110 -0
  47. package/docs/docs/api/appkit/Class.AuthenticationError.md +236 -0
  48. package/docs/docs/api/appkit/Class.ConfigurationError/index.html +112 -0
  49. package/docs/docs/api/appkit/Class.ConfigurationError.md +243 -0
  50. package/docs/docs/api/appkit/Class.ConnectionError/index.html +120 -0
  51. package/docs/docs/api/appkit/Class.ConnectionError.md +265 -0
  52. package/docs/docs/api/appkit/Class.ExecutionError/index.html +116 -0
  53. package/docs/docs/api/appkit/Class.ExecutionError.md +250 -0
  54. package/docs/docs/api/appkit/Class.InitializationError/index.html +104 -0
  55. package/docs/docs/api/appkit/Class.InitializationError.md +222 -0
  56. package/docs/docs/api/appkit/Class.Plugin/index.html +149 -0
  57. package/docs/docs/api/appkit/Class.Plugin.md +392 -0
  58. package/docs/docs/api/appkit/Class.ServerError/index.html +108 -0
  59. package/docs/docs/api/appkit/Class.ServerError.md +229 -0
  60. package/docs/docs/api/appkit/Class.TunnelError/index.html +108 -0
  61. package/docs/docs/api/appkit/Class.TunnelError.md +231 -0
  62. package/docs/docs/api/appkit/Class.ValidationError/index.html +106 -0
  63. package/docs/docs/api/appkit/Class.ValidationError.md +225 -0
  64. package/docs/docs/api/appkit/Function.appKitTypesPlugin/index.html +24 -0
  65. package/docs/docs/api/appkit/Function.appKitTypesPlugin.md +20 -0
  66. package/docs/docs/api/appkit/Function.createApp/index.html +24 -0
  67. package/docs/docs/api/appkit/Function.createApp.md +31 -0
  68. package/docs/docs/api/appkit/Function.isSQLTypeMarker/index.html +25 -0
  69. package/docs/docs/api/appkit/Function.isSQLTypeMarker.md +32 -0
  70. package/docs/docs/api/appkit/Interface.BasePluginConfig/index.html +28 -0
  71. package/docs/docs/api/appkit/Interface.BasePluginConfig.md +37 -0
  72. package/docs/docs/api/appkit/Interface.CacheConfig/index.html +63 -0
  73. package/docs/docs/api/appkit/Interface.CacheConfig.md +131 -0
  74. package/docs/docs/api/appkit/Interface.ITelemetry/index.html +73 -0
  75. package/docs/docs/api/appkit/Interface.ITelemetry.md +144 -0
  76. package/docs/docs/api/appkit/Interface.StreamExecutionSettings/index.html +26 -0
  77. package/docs/docs/api/appkit/Interface.StreamExecutionSettings.md +30 -0
  78. package/docs/docs/api/appkit/Interface.TelemetryConfig/index.html +32 -0
  79. package/docs/docs/api/appkit/Interface.TelemetryConfig.md +48 -0
  80. package/docs/docs/api/appkit/TypeAlias.IAppRouter/index.html +18 -0
  81. package/docs/docs/api/appkit/TypeAlias.IAppRouter.md +8 -0
  82. package/docs/docs/api/appkit/Variable.sql/index.html +98 -0
  83. package/docs/docs/api/appkit/Variable.sql.md +260 -0
  84. package/docs/docs/api/appkit/index.html +28 -0
  85. package/docs/docs/api/appkit-ui/data/AreaChart/index.html +29 -0
  86. package/docs/docs/api/appkit-ui/data/AreaChart.md +79 -0
  87. package/docs/docs/api/appkit-ui/data/BarChart/index.html +29 -0
  88. package/docs/docs/api/appkit-ui/data/BarChart.md +74 -0
  89. package/docs/docs/api/appkit-ui/data/DataTable/index.html +36 -0
  90. package/docs/docs/api/appkit-ui/data/DataTable.md +69 -0
  91. package/docs/docs/api/appkit-ui/data/DonutChart/index.html +29 -0
  92. package/docs/docs/api/appkit-ui/data/DonutChart.md +72 -0
  93. package/docs/docs/api/appkit-ui/data/HeatmapChart/index.html +35 -0
  94. package/docs/docs/api/appkit-ui/data/HeatmapChart.md +91 -0
  95. package/docs/docs/api/appkit-ui/data/LineChart/index.html +29 -0
  96. package/docs/docs/api/appkit-ui/data/LineChart.md +77 -0
  97. package/docs/docs/api/appkit-ui/data/PieChart/index.html +29 -0
  98. package/docs/docs/api/appkit-ui/data/PieChart.md +72 -0
  99. package/docs/docs/api/appkit-ui/data/RadarChart/index.html +29 -0
  100. package/docs/docs/api/appkit-ui/data/RadarChart.md +74 -0
  101. package/docs/docs/api/appkit-ui/data/ScatterChart/index.html +29 -0
  102. package/docs/docs/api/appkit-ui/data/ScatterChart.md +76 -0
  103. package/docs/docs/api/appkit-ui/index.html +23 -0
  104. package/docs/docs/api/appkit-ui/styling/index.html +74 -0
  105. package/docs/docs/api/appkit-ui/styling.md +81 -0
  106. package/docs/docs/api/appkit-ui/ui/Accordion/index.html +48 -0
  107. package/docs/docs/api/appkit-ui/ui/Accordion.md +139 -0
  108. package/docs/docs/api/appkit-ui/ui/Alert/index.html +41 -0
  109. package/docs/docs/api/appkit-ui/ui/Alert.md +89 -0
  110. package/docs/docs/api/appkit-ui/ui/AlertDialog/index.html +97 -0
  111. package/docs/docs/api/appkit-ui/ui/AlertDialog.md +282 -0
  112. package/docs/docs/api/appkit-ui/ui/AspectRatio/index.html +27 -0
  113. package/docs/docs/api/appkit-ui/ui/AspectRatio.md +46 -0
  114. package/docs/docs/api/appkit-ui/ui/Avatar/index.html +41 -0
  115. package/docs/docs/api/appkit-ui/ui/Avatar.md +90 -0
  116. package/docs/docs/api/appkit-ui/ui/Badge/index.html +27 -0
  117. package/docs/docs/api/appkit-ui/ui/Badge.md +38 -0
  118. package/docs/docs/api/appkit-ui/ui/Breadcrumb/index.html +69 -0
  119. package/docs/docs/api/appkit-ui/ui/Breadcrumb.md +193 -0
  120. package/docs/docs/api/appkit-ui/ui/Button/index.html +27 -0
  121. package/docs/docs/api/appkit-ui/ui/Button.md +39 -0
  122. package/docs/docs/api/appkit-ui/ui/ButtonGroup/index.html +38 -0
  123. package/docs/docs/api/appkit-ui/ui/ButtonGroup.md +68 -0
  124. package/docs/docs/api/appkit-ui/ui/Calendar/index.html +34 -0
  125. package/docs/docs/api/appkit-ui/ui/Calendar.md +154 -0
  126. package/docs/docs/api/appkit-ui/ui/Card/index.html +69 -0
  127. package/docs/docs/api/appkit-ui/ui/Card.md +222 -0
  128. package/docs/docs/api/appkit-ui/ui/Carousel/index.html +55 -0
  129. package/docs/docs/api/appkit-ui/ui/Carousel.md +152 -0
  130. package/docs/docs/api/appkit-ui/ui/ChartContainer/index.html +58 -0
  131. package/docs/docs/api/appkit-ui/ui/ChartContainer.md +343 -0
  132. package/docs/docs/api/appkit-ui/ui/Checkbox/index.html +27 -0
  133. package/docs/docs/api/appkit-ui/ui/Checkbox.md +53 -0
  134. package/docs/docs/api/appkit-ui/ui/Collapsible/index.html +41 -0
  135. package/docs/docs/api/appkit-ui/ui/Collapsible.md +125 -0
  136. package/docs/docs/api/appkit-ui/ui/Command/index.html +83 -0
  137. package/docs/docs/api/appkit-ui/ui/Command.md +287 -0
  138. package/docs/docs/api/appkit-ui/ui/ContextMenu/index.html +111 -0
  139. package/docs/docs/api/appkit-ui/ui/ContextMenu.md +419 -0
  140. package/docs/docs/api/appkit-ui/ui/Dialog/index.html +90 -0
  141. package/docs/docs/api/appkit-ui/ui/Dialog.md +285 -0
  142. package/docs/docs/api/appkit-ui/ui/Drawer/index.html +90 -0
  143. package/docs/docs/api/appkit-ui/ui/Drawer.md +387 -0
  144. package/docs/docs/api/appkit-ui/ui/DropdownMenu/index.html +111 -0
  145. package/docs/docs/api/appkit-ui/ui/DropdownMenu.md +478 -0
  146. package/docs/docs/api/appkit-ui/ui/Empty/index.html +54 -0
  147. package/docs/docs/api/appkit-ui/ui/Empty.md +109 -0
  148. package/docs/docs/api/appkit-ui/ui/Field/index.html +87 -0
  149. package/docs/docs/api/appkit-ui/ui/Field.md +201 -0
  150. package/docs/docs/api/appkit-ui/ui/FormControl/index.html +59 -0
  151. package/docs/docs/api/appkit-ui/ui/FormControl.md +128 -0
  152. package/docs/docs/api/appkit-ui/ui/HoverCard/index.html +39 -0
  153. package/docs/docs/api/appkit-ui/ui/HoverCard.md +131 -0
  154. package/docs/docs/api/appkit-ui/ui/Input/index.html +27 -0
  155. package/docs/docs/api/appkit-ui/ui/Input.md +35 -0
  156. package/docs/docs/api/appkit-ui/ui/InputGroup/index.html +59 -0
  157. package/docs/docs/api/appkit-ui/ui/InputGroup.md +123 -0
  158. package/docs/docs/api/appkit-ui/ui/InputOTP/index.html +48 -0
  159. package/docs/docs/api/appkit-ui/ui/InputOTP.md +124 -0
  160. package/docs/docs/api/appkit-ui/ui/Item/index.html +78 -0
  161. package/docs/docs/api/appkit-ui/ui/Item.md +185 -0
  162. package/docs/docs/api/appkit-ui/ui/Kbd/index.html +30 -0
  163. package/docs/docs/api/appkit-ui/ui/Kbd.md +39 -0
  164. package/docs/docs/api/appkit-ui/ui/Label/index.html +27 -0
  165. package/docs/docs/api/appkit-ui/ui/Label.md +44 -0
  166. package/docs/docs/api/appkit-ui/ui/Menubar/index.html +117 -0
  167. package/docs/docs/api/appkit-ui/ui/Menubar.md +484 -0
  168. package/docs/docs/api/appkit-ui/ui/NavigationMenu/index.html +76 -0
  169. package/docs/docs/api/appkit-ui/ui/NavigationMenu.md +338 -0
  170. package/docs/docs/api/appkit-ui/ui/Pagination/index.html +69 -0
  171. package/docs/docs/api/appkit-ui/ui/Pagination.md +191 -0
  172. package/docs/docs/api/appkit-ui/ui/Popover/index.html +45 -0
  173. package/docs/docs/api/appkit-ui/ui/Popover.md +173 -0
  174. package/docs/docs/api/appkit-ui/ui/Progress/index.html +27 -0
  175. package/docs/docs/api/appkit-ui/ui/Progress.md +51 -0
  176. package/docs/docs/api/appkit-ui/ui/RadioGroup/index.html +33 -0
  177. package/docs/docs/api/appkit-ui/ui/RadioGroup.md +83 -0
  178. package/docs/docs/api/appkit-ui/ui/ResizableHandle/index.html +41 -0
  179. package/docs/docs/api/appkit-ui/ui/ResizableHandle.md +136 -0
  180. package/docs/docs/api/appkit-ui/ui/ScrollArea/index.html +34 -0
  181. package/docs/docs/api/appkit-ui/ui/ScrollArea.md +83 -0
  182. package/docs/docs/api/appkit-ui/ui/Select/index.html +82 -0
  183. package/docs/docs/api/appkit-ui/ui/Select.md +267 -0
  184. package/docs/docs/api/appkit-ui/ui/Separator/index.html +27 -0
  185. package/docs/docs/api/appkit-ui/ui/Separator.md +56 -0
  186. package/docs/docs/api/appkit-ui/ui/Sheet/index.html +76 -0
  187. package/docs/docs/api/appkit-ui/ui/Sheet.md +236 -0
  188. package/docs/docs/api/appkit-ui/ui/Sidebar/index.html +183 -0
  189. package/docs/docs/api/appkit-ui/ui/Sidebar.md +490 -0
  190. package/docs/docs/api/appkit-ui/ui/Skeleton/index.html +27 -0
  191. package/docs/docs/api/appkit-ui/ui/Skeleton.md +43 -0
  192. package/docs/docs/api/appkit-ui/ui/Slider/index.html +27 -0
  193. package/docs/docs/api/appkit-ui/ui/Slider.md +61 -0
  194. package/docs/docs/api/appkit-ui/ui/Spinner/index.html +24 -0
  195. package/docs/docs/api/appkit-ui/ui/Spinner.md +22 -0
  196. package/docs/docs/api/appkit-ui/ui/Switch/index.html +27 -0
  197. package/docs/docs/api/appkit-ui/ui/Switch.md +46 -0
  198. package/docs/docs/api/appkit-ui/ui/Table/index.html +69 -0
  199. package/docs/docs/api/appkit-ui/ui/Table.md +236 -0
  200. package/docs/docs/api/appkit-ui/ui/Tabs/index.html +48 -0
  201. package/docs/docs/api/appkit-ui/ui/Tabs.md +177 -0
  202. package/docs/docs/api/appkit-ui/ui/Textarea/index.html +27 -0
  203. package/docs/docs/api/appkit-ui/ui/Textarea.md +35 -0
  204. package/docs/docs/api/appkit-ui/ui/Toaster/index.html +27 -0
  205. package/docs/docs/api/appkit-ui/ui/Toaster.md +75 -0
  206. package/docs/docs/api/appkit-ui/ui/Toggle/index.html +27 -0
  207. package/docs/docs/api/appkit-ui/ui/Toggle.md +48 -0
  208. package/docs/docs/api/appkit-ui/ui/ToggleGroup/index.html +33 -0
  209. package/docs/docs/api/appkit-ui/ui/ToggleGroup.md +88 -0
  210. package/docs/docs/api/appkit-ui/ui/Tooltip/index.html +46 -0
  211. package/docs/docs/api/appkit-ui/ui/Tooltip.md +134 -0
  212. package/docs/docs/api/appkit-ui.md +15 -0
  213. package/docs/docs/api/appkit.md +48 -0
  214. package/docs/docs/api/index.html +28 -0
  215. package/docs/docs/api.md +24 -0
  216. package/docs/docs/app-management/index.html +106 -0
  217. package/docs/docs/app-management.md +171 -0
  218. package/docs/docs/architecture/index.html +71 -0
  219. package/docs/docs/architecture.md +69 -0
  220. package/docs/docs/category/development/index.html +16 -0
  221. package/docs/docs/category/development.md +3 -0
  222. package/docs/docs/configuration/index.html +66 -0
  223. package/docs/docs/configuration.md +150 -0
  224. package/docs/docs/core-principles/index.html +38 -0
  225. package/docs/docs/core-principles.md +31 -0
  226. package/docs/docs/development/index.html +34 -0
  227. package/docs/docs/development/llm-guide/index.html +74 -0
  228. package/docs/docs/development/llm-guide.md +74 -0
  229. package/docs/docs/development/local-development/index.html +27 -0
  230. package/docs/docs/development/local-development.md +20 -0
  231. package/docs/docs/development/project-setup/index.html +69 -0
  232. package/docs/docs/development/project-setup.md +246 -0
  233. package/docs/docs/development/remote-bridge/index.html +76 -0
  234. package/docs/docs/development/remote-bridge.md +80 -0
  235. package/docs/docs/development/type-generation/index.html +65 -0
  236. package/docs/docs/development/type-generation.md +110 -0
  237. package/docs/docs/development.md +21 -0
  238. package/docs/docs/index.html +58 -0
  239. package/docs/docs/plugins/index.html +151 -0
  240. package/docs/docs/plugins.md +313 -0
  241. package/docs/docs.md +64 -0
  242. package/llms.txt +121 -1228
  243. package/package.json +11 -11
  244. package/scripts/postinstall.js +1 -1
  245. package/AGENTS.md +0 -1231
  246. package/bin/appkit-lint.js +0 -129
  247. package/bin/generate-types.js +0 -27
  248. package/bin/setup-claude.js +0 -190
package/llms.txt CHANGED
@@ -1,1231 +1,124 @@
1
- # llms.txt — LLM Guide for Building Great Databricks Apps with AppKit
2
- Project: Databricks AppKit
1
+ ## For AI Agents/Assistants
3
2
 
4
- This document is written *for LLMs* generating code in a brand-new project folder that installs AppKit from npm. It is intentionally prescriptive.
5
-
6
- ## High-level mission
7
-
8
- Build **full-stack TypeScript apps** on Databricks using:
9
-
10
- - **Backend**: `@databricks/appkit`
11
- - **Frontend**: `@databricks/appkit-ui`
12
- - **Analytics**: SQL files in `config/queries/*.sql` executed via the AppKit analytics plugin
13
-
14
- This file is designed to work even when you *do not* have access to the AppKit source repo. Prefer only public package APIs and portable project structures.
15
-
16
- ## Hard rules (LLM guardrails)
17
-
18
- - **Do not invent APIs**. If unsure, stick to the patterns shown in this file and only documented exports from `@databricks/appkit` and `@databricks/appkit-ui`.
19
- - **`createApp()` is async**. Prefer **top-level `await createApp(...)`**. If you can’t, use `void createApp(...)` and do not ignore promise rejection.
20
- - **Always memoize query parameters** passed to `useAnalyticsQuery` / charts to avoid refetch loops.
21
- - **Always handle loading/error/empty states** in UI (use `Skeleton`, error text, empty state).
22
- - **Always use `sql.*` helpers** for query parameters (do not pass raw strings/numbers unless the query expects none).
23
- - **Never construct SQL strings dynamically**. Use parameterized queries with `:paramName`.
24
- - **Never use `require()`**. Use ESM `import/export`.
25
-
26
- ## TypeScript import rules (when using `verbatimModuleSyntax`)
27
-
28
- If your `tsconfig.json` uses `"verbatimModuleSyntax": true`, **always use `import type` for type-only imports** (otherwise builds can fail in strict setups):
29
-
30
- ```ts
31
- import type { ReactNode } from "react";
32
- import { useMemo } from "react";
33
- ```
34
-
35
- ## Canonical project layout
36
-
37
- Recommended structure (client/server split):
38
-
39
- ```
40
- my-app/
41
- ├── server/
42
- │ ├── index.ts # backend entry point (AppKit)
43
- │ └── .env # optional local dev env vars (do not commit)
44
- ├── client/
45
- │ ├── index.html
46
- │ ├── vite.config.ts
47
- │ └── src/
48
- │ ├── main.tsx
49
- │ └── App.tsx
50
- ├── config/
51
- │ └── queries/
52
- │ └── my_query.sql
53
- ├── app.yaml
54
- ├── package.json
55
- └── tsconfig.json
56
- ```
57
-
58
- Why this layout:
59
-
60
- - The AppKit `server()` plugin automatically serves:
61
- - **Dev**: Vite dev server (HMR) from `client/`
62
- - **Prod**: static files from `client/dist` (built by Vite)
63
-
64
- ## Project scaffolding (start here)
65
-
66
- ### `package.json`
67
-
68
- ```json
69
- {
70
- "name": "my-app",
71
- "private": true,
72
- "version": "0.0.0",
73
- "type": "module",
74
- "scripts": {
75
- "dev": "NODE_ENV=development tsx watch server/index.ts",
76
- "build": "npm run build:server && npm run build:client",
77
- "build:server": "tsdown --out-dir build server/index.ts",
78
- "build:client": "tsc -b && vite build --config client/vite.config.ts",
79
- "start": "node build/index.mjs"
80
- },
81
- "dependencies": {
82
- "@databricks/appkit": "^0.1.2"
83
- "@databricks/appkit-ui": "^0.1.2",
84
- "react": "^19.2.3",
85
- "react-dom": "^19.2.3"
86
- },
87
- "devDependencies": {
88
- "@types/node": "^20.0.0",
89
- "@types/react": "^19.0.0",
90
- "@types/react-dom": "^19.0.0",
91
- "@vitejs/plugin-react": "^5.1.1",
92
- "tsdown": "^0.15.7",
93
- "tsx": "^4.19.0",
94
- "typescript": "~5.6.0",
95
- "vite": "^7.2.4"
96
- }
97
- }
98
- ```
99
-
100
- ### `client/index.html`
101
-
102
- ```html
103
- <!doctype html>
104
- <html lang="en">
105
- <head>
106
- <meta charset="UTF-8" />
107
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
108
- <title>My App</title>
109
- </head>
110
- <body>
111
- <div id="root"></div>
112
- <script type="module" src="/src/main.tsx"></script>
113
- </body>
114
- </html>
115
- ```
116
-
117
- ### `client/src/main.tsx`
118
-
119
- ```tsx
120
- import { StrictMode } from "react";
121
- import { createRoot } from "react-dom/client";
122
- import App from "./App";
123
-
124
- createRoot(document.getElementById("root")!).render(
125
- <StrictMode>
126
- <App />
127
- </StrictMode>,
128
- );
129
- ```
130
-
131
- ### `client/src/App.tsx` (minimal)
132
-
133
- ```tsx
134
- export default function App() {
135
- return (
136
- <div className="p-8">
137
- <h1 className="text-2xl font-bold">My App</h1>
138
- </div>
139
- );
140
- }
141
- ```
142
-
143
- ### `client/vite.config.ts`
144
-
145
- ```ts
146
- import { defineConfig } from "vite";
147
- import react from "@vitejs/plugin-react";
148
-
149
- export default defineConfig({
150
- plugins: [react()],
151
- });
152
- ```
153
-
154
- ### `tsconfig.json`
155
-
156
- ```json
157
- {
158
- "compilerOptions": {
159
- "target": "ES2022",
160
- "lib": ["ES2022", "DOM", "DOM.Iterable"],
161
- "module": "ESNext",
162
- "moduleResolution": "bundler",
163
- "jsx": "react-jsx",
164
- "strict": true,
165
- "skipLibCheck": true,
166
- "noEmit": true,
167
- "allowImportingTsExtensions": true,
168
- "verbatimModuleSyntax": true
169
- },
170
- "include": ["server", "client/src"]
171
- }
172
- ```
173
-
174
- ### `server/index.ts`
175
-
176
- ```ts
177
- import { createApp, server } from "@databricks/appkit";
178
-
179
- await createApp({
180
- plugins: [server()],
181
- });
182
- ```
183
-
184
- ### Running the app
185
-
186
- ```bash
187
- # Install dependencies
188
- npm install
189
-
190
- # Development (starts backend + Vite dev server)
191
- npm run dev
192
-
193
- # Production build
194
- npm run build
195
- npm start
196
- ```
197
-
198
- ## Integrating into an existing app
199
-
200
- If you already have a React/Vite app and want to add AppKit:
201
-
202
- ### 1. Install dependencies
203
-
204
- ```bash
205
- npm install @databricks/appkit @databricks/appkit-ui react react-dom
206
- npm install -D tsx tsdown vite @vitejs/plugin-react typescript
207
-
208
- # If you don't already have a client/ folder, create one and move your Vite app into it:
209
- # - move index.html -> client/index.html
210
- # - move vite.config.ts -> client/vite.config.ts
211
- # - move src/ -> client/src/
212
- #
213
- ```
214
-
215
- ### 2. Create `server/index.ts` (new file)
216
-
217
- ```ts
218
- import { createApp, server } from "@databricks/appkit";
219
-
220
- await createApp({
221
- plugins: [server()],
222
- });
223
- ```
224
-
225
- ### 3. Update `package.json` scripts
226
-
227
- ```json
228
- {
229
- "scripts": {
230
- "dev": "NODE_ENV=development tsx watch server/index.ts",
231
- "build": "npm run build:server && npm run build:client",
232
- "build:server": "tsdown --out-dir build server/index.ts",
233
- "build:client": "tsc -b && vite build --config client/vite.config.ts",
234
- "start": "node build/index.mjs"
235
- }
236
- }
237
- ```
238
-
239
- ### 4. That's it
240
-
241
- - AppKit's server plugin will automatically serve your Vite app in dev mode and `client/dist` in production.
242
- - If your Vite app must stay at the repo root (no `client/` folder), AppKit can still work, but the recommended layout is `client/` + `server/`.
243
-
244
- ### Adding analytics to an existing app
245
-
246
- ```ts
247
- // server/index.ts
248
- import { createApp, server, analytics } from "@databricks/appkit";
249
-
250
- await createApp({
251
- plugins: [server(), analytics()],
252
- });
253
- ```
254
-
255
- Then create `config/queries/` and add your `.sql` files.
256
-
257
- ## Environment variables
258
-
259
- ### Required for Databricks Apps deployment
260
-
261
- These are typically **provided by Databricks Apps runtime** (exact set can vary by platform/version):
262
-
263
- | Variable | Description |
264
- |----------|-------------|
265
- | `DATABRICKS_HOST` | Workspace URL (e.g. `https://xxx.cloud.databricks.com`) |
266
- | `DATABRICKS_APP_PORT` | Port to bind (default: `8000`) |
267
- | `DATABRICKS_APP_NAME` | App name in Databricks |
268
-
269
- ### Required for SQL queries (analytics plugin)
270
-
271
- | Variable | Description | How to set |
272
- |----------|-------------|------------|
273
- | `DATABRICKS_WAREHOUSE_ID` | SQL warehouse ID | In `app.yaml`: `valueFrom: sql-warehouse` |
274
-
275
- ### Optional
276
-
277
- | Variable | Description | Default |
278
- |----------|-------------|---------|
279
- | `DATABRICKS_WORKSPACE_ID` | Workspace ID | Auto-fetched from API |
280
- | `NODE_ENV` | `"development"` or `"production"` | — |
281
- | `FLASK_RUN_HOST` | Host to bind | `0.0.0.0` |
282
-
283
- ### Local development
284
-
285
- For local development, you need to authenticate with Databricks. Options:
286
-
287
- **Option 1: Databricks CLI Auth (recommended)**
288
-
289
- ```bash
290
- # Configure once
291
- databricks auth login --host [host] --profile [profile-name]
292
-
293
- # If you used `DEFAULT` as the profile name then you can just run
294
-
295
- `npm run dev`
296
-
297
- # To run with a specific profile
298
- DATABRICKS_CONFIG_PROFILE=my-profile npm run dev
299
- # If your Databricks SDK expects a different variable name, try:
300
- # DATABRICKS_PROFILE=my-profile npm run dev
301
- ```
302
-
303
- **Option 2: Environment variables**
304
-
305
- ```bash
306
- export DATABRICKS_HOST="https://xxx.cloud.databricks.com"
307
- export DATABRICKS_TOKEN="dapi..."
308
- export DATABRICKS_WAREHOUSE_ID="abc123..."
309
- npm run dev
310
- ```
311
-
312
- **Option 3: `.env` file (auto-loaded by AppKit)**
313
-
314
- ```bash
315
- # .env (add to .gitignore!)
316
- DATABRICKS_HOST=https://xxx.cloud.databricks.com
317
- DATABRICKS_TOKEN=dapi...
318
- DATABRICKS_WAREHOUSE_ID=abc123...
319
- ```
320
-
321
- ### Telemetry (optional)
322
-
323
- | Variable | Description |
324
- |----------|-------------|
325
- | `OTEL_EXPORTER_OTLP_ENDPOINT` | OpenTelemetry collector endpoint |
326
- | `OTEL_SERVICE_NAME` | Service name for traces |
327
-
328
- ## Backend: `@databricks/appkit`
329
-
330
- ### Minimal server (golden template)
331
-
332
- The smallest valid AppKit server:
333
-
334
- ```ts
335
- // server/index.ts
336
- import { createApp, server } from "@databricks/appkit";
337
-
338
- await createApp({
339
- plugins: [server()],
340
- });
341
- ```
342
-
343
- ### Server plugin (`server()`)
344
-
345
- What it does:
346
-
347
- - Starts an Express server (default `host=0.0.0.0`, `port=8000`)
348
- - Mounts plugin routes under `/api/<pluginName>/...`
349
- - Adds `/health` (returns `{ status: "ok" }`)
350
- - Serves frontend:
351
- - **Development** (`NODE_ENV=development`): runs a Vite dev server in middleware mode
352
- - **Production**: auto-detects static frontend directory (checks `dist`, `client/dist`, `build`, `public`, `out`)
353
-
354
- Config (real options):
355
-
356
- ```ts
357
- import { createApp, server } from "@databricks/appkit";
358
-
359
- await createApp({
360
- plugins: [
361
- server({
362
- port: 8000, // default: Number(process.env.DATABRICKS_APP_PORT) || 8000
363
- host: "0.0.0.0", // default: process.env.FLASK_RUN_HOST || "0.0.0.0"
364
- autoStart: true, // default: true
365
- staticPath: "dist", // optional: force a specific static directory
366
- }),
367
- ],
368
- });
369
- ```
370
-
371
- Manual server start (when you need to `.extend()` Express):
372
-
373
- ```ts
374
- import { createApp, server } from "@databricks/appkit";
375
-
376
- const appkit = await createApp({
377
- plugins: [server({ autoStart: false })],
378
- });
379
-
380
- appkit.server.extend((app) => {
381
- app.get("/custom", (_req, res) => res.json({ ok: true }));
382
- });
383
-
384
- await appkit.server.start();
385
- ```
386
-
387
- ### Analytics plugin (`analytics()`)
388
-
389
- Add SQL query execution backed by Databricks SQL Warehouses.
390
-
391
- ```ts
392
- import { analytics, createApp, server } from "@databricks/appkit";
393
-
394
- await createApp({
395
- plugins: [server(), analytics({})],
396
- });
397
- ```
398
-
399
- Where queries live:
400
-
401
- - Put `.sql` files in `config/queries/`.
402
- - Query key is the filename without `.sql` (e.g. `spend_summary.sql` → `"spend_summary"`).
403
-
404
- SQL parameters:
405
-
406
- - Use `:paramName` placeholders.
407
- - Optionally annotate parameter types using SQL comments:
408
-
409
- ```sql
410
- -- @param startDate DATE
411
- -- @param endDate DATE
412
- -- @param limit NUMERIC
413
- SELECT ...
414
- WHERE usage_date BETWEEN :startDate AND :endDate
415
- LIMIT :limit
416
- ```
417
-
418
- Supported `-- @param` types (case-insensitive):
419
-
420
- - `STRING`, `NUMERIC`, `BOOLEAN`, `DATE`, `TIMESTAMP`, `BINARY`
421
-
422
- Server-injected params (important):
423
-
424
- - `:workspaceId` is **injected by the server** and **must not** be annotated.
425
- - Example:
426
-
427
- ```sql
428
- WHERE workspace_id = :workspaceId
429
- ```
430
-
431
- HTTP endpoints exposed (mounted under `/api/analytics`):
432
-
433
- - `POST /api/analytics/query/:query_key`
434
- - `POST /api/analytics/users/me/query/:query_key`
435
- - `GET /api/analytics/arrow-result/:jobId`
436
- - `GET /api/analytics/users/me/arrow-result/:jobId`
437
-
438
- Formats:
439
-
440
- - `format: "JSON"` (default) returns JSON rows
441
- - `format: "ARROW"` returns an Arrow “statement_id” payload over SSE, then the client fetches binary Arrow from `/api/analytics/arrow-result/:jobId`
442
-
443
- ### Execution context and `asUser(req)`
444
-
445
- AppKit manages Databricks authentication via two contexts:
446
-
447
- - **ServiceContext** (singleton): Initialized at app startup with service principal credentials
448
- - **ExecutionContext**: Determined at runtime - either service principal or user context
449
-
450
- **Headers used for user context:**
451
-
452
- - `x-forwarded-user`: required in production; identifies the user
453
- - `x-forwarded-access-token`: required for user token passthrough
454
-
455
- **Using `asUser(req)` for user-scoped operations:**
456
-
457
- The `asUser(req)` pattern allows plugins to execute operations using the requesting user's credentials:
458
-
459
- ```ts
460
- // In a custom plugin route handler
461
- router.post("/users/me/data", async (req, res) => {
462
- // Execute as the user (uses their Databricks permissions)
463
- const result = await this.asUser(req).query("SELECT ...");
464
- res.json(result);
465
- });
466
-
467
- // Service principal execution (default)
468
- router.post("/system/data", async (req, res) => {
469
- const result = await this.query("SELECT ...");
470
- res.json(result);
471
- });
472
- ```
473
-
474
- **Context helper functions (exported from `@databricks/appkit`):**
475
-
476
- - `getExecutionContext()`: Returns current context (user or service)
477
- - `getCurrentUserId()`: Returns user ID in user context, service user ID otherwise
478
- - `getWorkspaceClient()`: Returns the appropriate WorkspaceClient for current context
479
- - `getWarehouseId()`: `Promise<string>` (from `DATABRICKS_WAREHOUSE_ID` or auto-selected in dev)
480
- - `getWorkspaceId()`: `Promise<string>` (from `DATABRICKS_WORKSPACE_ID` or fetched)
481
- - `isInUserContext()`: Returns `true` if currently executing in user context
482
-
483
- **Development mode behavior:**
484
-
485
- In local development (`NODE_ENV=development`), if `asUser(req)` is called without a user token, it logs a warning and falls back to the service principal.
486
-
487
- ### Custom plugins (backend)
488
-
489
- If you need custom API routes or background logic, implement an AppKit plugin.
490
-
491
- ```ts
492
- import { Plugin, toPlugin } from "@databricks/appkit";
493
- import type express from "express";
494
-
495
- class MyPlugin extends Plugin {
496
- name = "my-plugin";
497
- envVars = []; // list required env vars here
498
-
499
- injectRoutes(router: express.Router) {
500
- this.route(router, {
501
- name: "hello",
502
- method: "get",
503
- path: "/hello",
504
- handler: async (_req, res) => {
505
- res.json({ ok: true });
506
- },
507
- });
508
- }
509
- }
510
-
511
- export const myPlugin = toPlugin<typeof MyPlugin, Record<string, never>, "my-plugin">(
512
- MyPlugin,
513
- "my-plugin",
514
- );
515
- ```
516
-
517
- ### Caching (global + plugin-level)
518
-
519
- Global:
520
-
521
- ```ts
522
- await createApp({
523
- plugins: [server(), analytics({})],
524
- cache: {
525
- enabled: true,
526
- ttl: 3600, // seconds
527
- strictPersistence: false,
528
- },
529
- });
530
- ```
531
-
532
- - Storage auto-selects **Lakebase persistent cache when healthy**, otherwise falls back to in-memory.
533
-
534
- Plugin-level:
535
-
536
- ```ts
537
- // inside a Plugin subclass:
538
- const value = await this.cache.getOrExecute(
539
- ["my-plugin", "data", userId],
540
- async () => expensiveWork(),
541
- userKey,
542
- { ttl: 300 },
543
- );
544
- ```
545
-
546
- ## Frontend: `@databricks/appkit-ui`
547
-
548
- ### Imports
549
-
550
- - React-facing APIs: `@databricks/appkit-ui/react`
551
- - Non-React utilities (sql markers, arrow, SSE): `@databricks/appkit-ui/js`
552
-
553
- ```tsx
554
- import { useAnalyticsQuery, Card, Skeleton } from "@databricks/appkit-ui/react";
555
- import { sql } from "@databricks/appkit-ui/js";
556
- ```
557
-
558
- ### `useAnalyticsQuery(queryKey, parameters, options?)`
559
-
560
- Facts:
561
-
562
- - Uses **SSE** under the hood (not `fetch()` polling).
563
- - By default it hits `POST /api/analytics/query/:queryKey`.
564
- - Returns `{ data, loading, error }` where `data` is `null` until loaded.
565
- - `format` is `"JSON"` or `"ARROW"` (uppercase).
566
-
567
- When to use it:
568
-
569
- - Use `useAnalyticsQuery` **only** when you need a custom UI (cards/KPIs/forms/conditional rendering).
570
- - If you just need a standard chart or table, prefer the built-in components (`BarChart`, `LineChart`, `DataTable`, etc.) so you don’t re-implement loading/error/empty states.
571
-
572
- Limitations (common LLM pitfall):
573
-
574
- - There is **no `enabled` option**. Use conditional rendering to mount/unmount the component.
575
- - There is **no `refetch()`**. Change `parameters` (memoized) or re-mount to re-run the query.
576
-
577
- Recommended usage pattern (memoized params + explicit states):
578
-
579
- ```tsx
580
- import { useMemo } from "react";
581
- import { useAnalyticsQuery, Skeleton } from "@databricks/appkit-ui/react";
582
- import { sql } from "@databricks/appkit-ui/js";
583
-
584
- export function Users() {
585
- const params = useMemo(
586
- () => ({
587
- status: sql.string("active"),
588
- limit: sql.number(50),
589
- }),
590
- [],
591
- );
592
-
593
- const { data, loading, error } = useAnalyticsQuery("users_list", params);
594
-
595
- if (loading) return <Skeleton className="h-24 w-full" />;
596
- if (error) return <div className="text-destructive">Error: {error}</div>;
597
- if (!data || data.length === 0) return <div>No results</div>;
598
-
599
- return <pre>{JSON.stringify(data[0], null, 2)}</pre>;
600
- }
601
- ```
602
-
603
- Options:
604
-
605
- - `format?: "JSON" | "ARROW"` (default `"JSON"`)
606
- - `autoStart?: boolean` (default `true`)
607
- - `maxParametersSize?: number` (default `100 * 1024` bytes)
608
-
609
- ### `useChartData({ queryKey, parameters, format, transformer })`
610
-
611
- - `format` here is **lowercase**: `"json" | "arrow" | "auto"` (default `"auto"`)
612
- - Auto-selection heuristics:
613
- - If `parameters._preferArrow === true` → Arrow
614
- - If `parameters._preferJson === true` → JSON
615
- - If `parameters.limit` is a number > 500 → Arrow
616
- - If `parameters.startDate` and `parameters.endDate` exist → Arrow
617
-
618
- ### Charts (unified query/data API)
619
-
620
- All charts support:
621
-
622
- - **Query mode**: `queryKey` + `parameters`
623
- - **Data mode**: `data` (inline JSON, no server)
624
-
625
- Available chart components:
626
-
627
- - `BarChart`, `LineChart`, `AreaChart`, `PieChart`, `DonutChart`, `HeatmapChart`, `ScatterChart`, `RadarChart`
628
-
629
- Avoid double-fetching:
630
-
631
- ```tsx
632
- // ❌ Wrong: fetches the same query twice
633
- // const { data } = useAnalyticsQuery("spend_data", params);
634
- // return <LineChart queryKey="spend_data" parameters={params} />;
635
-
636
- // ✅ Correct: let the chart fetch
637
- return <LineChart queryKey="spend_data" parameters={params} />;
638
- ```
639
-
640
- Query mode (recommended for Databricks-backed analytics):
641
-
642
- ```tsx
643
- import { LineChart } from "@databricks/appkit-ui/react";
644
- import { sql } from "@databricks/appkit-ui/js";
645
- import { useMemo } from "react";
646
-
647
- export function SpendChart() {
648
- const params = useMemo(
649
- () => ({
650
- startDate: sql.date("2024-01-01"),
651
- endDate: sql.date("2024-12-31"),
652
- aggregationLevel: sql.string("day"),
653
- }),
654
- [],
655
- );
656
-
657
- return (
658
- <LineChart
659
- queryKey="spend_data"
660
- parameters={params}
661
- format="auto" // "auto" | "json" | "arrow"
662
- xKey="period"
663
- yKey="cost_usd"
664
- smooth
665
- showSymbol={false}
666
- />
667
- );
668
- }
669
- ```
670
-
671
- **Chart props reference (important):**
672
-
673
- Charts are **self-contained ECharts components**. Configure via props, NOT children:
674
-
675
- ```tsx
676
- // ✅ Correct: use props for customization
677
- <BarChart
678
- queryKey="sales_by_region"
679
- parameters={{}}
680
- xKey="region" // X-axis field
681
- yKey={["revenue", "expenses"]} // Y-axis field(s) - string or string[]
682
- colors={['#40d1f5', '#4462c9']} // Custom colors
683
- stacked // Stack bars (BarChart, AreaChart)
684
- orientation="horizontal" // "vertical" (default) | "horizontal"
685
- showLegend // Show legend
686
- height={400} // Height in pixels (default: 300)
687
- />
688
-
689
- <LineChart
690
- queryKey="trend_data"
691
- parameters={{}}
692
- xKey="date"
693
- yKey="value"
694
- smooth // Smooth curves (default: true)
695
- showSymbol={false} // Hide data point markers
696
- />
697
- ```
698
-
699
- **❌ CRITICAL: Charts do NOT accept Recharts children**
700
-
701
- ```tsx
702
- // ❌ WRONG - AppKit charts are NOT Recharts wrappers
703
- import { BarChart } from "@databricks/appkit-ui/react";
704
- import { Bar, XAxis, YAxis, CartesianGrid } from "recharts";
705
-
706
- <BarChart queryKey="data" parameters={{}}>
707
- <CartesianGrid /> // ❌ This will cause TypeScript errors
708
- <XAxis dataKey="x" /> // ❌ Not supported
709
- <Bar dataKey="y" /> // ❌ Not supported
710
- </BarChart>
711
-
712
- // ✅ CORRECT - use props instead
713
- <BarChart
714
- queryKey="data"
715
- parameters={{}}
716
- xKey="x"
717
- yKey="y"
718
- />
719
- ```
720
-
721
- ### SQL helpers (`sql.*`)
722
-
723
- Use these to build typed parameters (they return marker objects: `{ __sql_type, value }`):
724
-
725
- - `sql.string(value)` → STRING (accepts string|number|boolean)
726
- - `sql.number(value)` → NUMERIC (accepts number|string)
727
- - `sql.boolean(value)` → BOOLEAN (accepts boolean|string("true"/"false")|number(1/0))
728
- - `sql.date(value)` → DATE (accepts Date or `"YYYY-MM-DD"`)
729
- - `sql.timestamp(value)` → TIMESTAMP (accepts Date, ISO string, or unix time)
730
-
731
- Binary parameters (important):
732
-
733
- - Databricks SQL Warehouse doesn't support `BINARY` as a parameter type.
734
- - `sql.binary(value)` returns a **STRING marker containing hex**, so use `UNHEX(:param)` in SQL.
735
- - `sql.binary` accepts `Uint8Array`, `ArrayBuffer`, or a hex string.
736
-
737
- ### SQL result types (important)
738
-
739
- Databricks SQL JSON results can return some numeric-like fields (especially `DECIMAL`) as strings. If a field behaves like a string at runtime, convert explicitly:
740
-
741
- ```ts
742
- const value = Number(row.amount);
743
- ```
744
-
745
- If you need more reliable numeric fidelity for large datasets, prefer `format: "ARROW"` and process Arrow on the client.
746
-
747
- ### `connectSSE` (custom SSE connections)
748
-
749
- For custom streaming endpoints (not analytics), use the `connectSSE` utility:
750
-
751
- ```tsx
752
- import { connectSSE } from "@databricks/appkit-ui/js";
753
- import { useEffect, useState } from "react";
754
-
755
- function useCustomStream(endpoint: string) {
756
- const [messages, setMessages] = useState<string[]>([]);
757
- const [connected, setConnected] = useState(false);
758
-
759
- useEffect(() => {
760
- const controller = new AbortController();
761
-
762
- connectSSE({
763
- url: endpoint,
764
- payload: { key: "value" }, // optional: makes it a POST
765
- onMessage: async ({ data }) => {
766
- setConnected(true);
767
- setMessages((prev) => [...prev, data]);
768
- },
769
- onError: (error) => {
770
- console.error("SSE error:", error);
771
- setConnected(false);
772
- },
773
- signal: controller.signal,
774
- maxRetries: 3, // default: 3
775
- retryDelay: 2000, // default: 2000ms (exponential backoff)
776
- timeout: 300000, // default: 5 minutes
777
- maxBufferSize: 1048576, // default: 1MB
778
- });
779
-
780
- return () => controller.abort();
781
- }, [endpoint]);
782
-
783
- return { messages, connected };
784
- }
785
- ```
786
-
787
- Options:
788
-
789
- - `url`: SSE endpoint URL (required)
790
- - `payload`: Optional request body (if provided, uses POST; otherwise GET)
791
- - `onMessage({ id, data })`: Called for each SSE message
792
- - `onError(error)`: Called on connection errors
793
- - `signal`: AbortSignal to cancel the connection
794
- - `lastEventId`: Resume from a specific event ID
795
- - `maxRetries`: Max retry attempts (default: 3)
796
- - `retryDelay`: Base delay between retries in ms (default: 2000)
797
- - `timeout`: Connection timeout in ms (default: 300000)
798
- - `maxBufferSize`: Max buffer size in bytes (default: 1MB)
799
-
800
- ### `ArrowClient` (advanced Arrow processing)
801
-
802
- For low-level Arrow data handling:
803
-
804
- ```tsx
805
- import { ArrowClient } from "@databricks/appkit-ui/js";
806
-
807
- // Process Arrow buffer
808
- const table = await ArrowClient.processArrowBuffer(buffer);
809
-
810
- // Fetch and process Arrow data in one call
811
- const table = await ArrowClient.fetchAndProcessArrow(url, headers);
812
-
813
- // Extract fields from table
814
- const fields = ArrowClient.extractArrowFields(table);
815
- // → [{ name: "date", type: ... }, { name: "value", type: ... }]
816
-
817
- // Extract columns as arrays
818
- const columns = ArrowClient.extractArrowColumns(table);
819
- // → { date: [...], value: [...] }
820
-
821
- // Extract chart data
822
- const { xData, yDataMap } = ArrowClient.extractChartData(table, "date", ["value", "count"]);
823
- // → { xData: [...], yDataMap: { value: [...], count: [...] } }
824
-
825
- // Auto-detect chart fields from Arrow table
826
- const detected = ArrowClient.detectFieldsFromArrow(table);
827
- // → { xField: "date", yFields: ["value"], chartType: "timeseries" }
828
- ```
829
-
830
- ### DataTable
831
-
832
- `DataTable` is a production-ready table integrated with `useAnalyticsQuery`.
833
-
834
- Key behaviors:
835
-
836
- - `parameters` is required (use `{}` if none)
837
- - Supports opinionated mode (auto columns) and full-control mode (`children(table)`)
838
-
839
- ```tsx
840
- import { DataTable } from "@databricks/appkit-ui/react";
841
-
842
- export function UsersTable() {
843
- return (
844
- <DataTable
845
- queryKey="users_list"
846
- parameters={{}}
847
- filterColumn="email"
848
- filterPlaceholder="Filter by email..."
849
- pageSize={25}
850
- pageSizeOptions={[10, 25, 50, 100]}
851
- />
852
- );
853
- }
854
- ```
855
-
856
- ### UI components (primitives)
857
-
858
- AppKit-UI ships shadcn-style primitives. Import from `@databricks/appkit-ui/react`.
859
-
860
- Note: Exact exports can vary by AppKit-UI version. Prefer using IDE auto-import/autocomplete to confirm what your installed version exports.
861
-
862
- Radix constraint (common bug):
863
-
864
- - `SelectItem` cannot have `value=""`. Use a sentinel value like `"all"` or `"none"`.
865
-
866
- **Available components:**
867
-
868
- `Accordion`, `Alert`, `AlertDialog`, `AspectRatio`, `Avatar`, `Badge`, `Breadcrumb`, `Button`, `ButtonGroup`, `Calendar`, `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `Carousel`, `Checkbox`, `Collapsible`, `Command`, `ContextMenu`, `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `Drawer`, `DropdownMenu`, `Empty`, `Field`, `Form`, `HoverCard`, `Input`, `InputGroup`, `InputOtp`, `Item`, `Kbd`, `Label`, `Menubar`, `NavigationMenu`, `Pagination`, `Popover`, `Progress`, `RadioGroup`, `Resizable`, `ScrollArea`, `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `Separator`, `Sheet`, `Sidebar`, `Skeleton`, `Slider`, `Sonner`, `Spinner`, `Switch`, `Table`, `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Textarea`, `Toggle`, `ToggleGroup`, `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider`
869
-
870
- ### Card pattern
871
-
872
- ```tsx
873
- import {
874
- Card,
875
- CardHeader,
876
- CardTitle,
877
- CardDescription,
878
- CardContent,
879
- CardFooter,
880
- } from "@databricks/appkit-ui/react";
881
-
882
- function MetricCard({ title, value, description }: Props) {
883
- return (
884
- <Card>
885
- <CardHeader>
886
- <CardDescription>{description}</CardDescription>
887
- <CardTitle className="text-3xl">{value}</CardTitle>
888
- </CardHeader>
889
- <CardContent>
890
- {/* Optional content */}
891
- </CardContent>
892
- <CardFooter>
893
- {/* Optional footer */}
894
- </CardFooter>
895
- </Card>
896
- );
897
- }
898
- ```
899
-
900
- ### Select pattern
901
-
902
- ```tsx
903
- import {
904
- Select,
905
- SelectTrigger,
906
- SelectValue,
907
- SelectContent,
908
- SelectItem,
909
- } from "@databricks/appkit-ui/react";
910
-
911
- function DateRangeSelect({ value, onChange }: Props) {
912
- return (
913
- <Select value={value} onValueChange={onChange}>
914
- <SelectTrigger className="w-40">
915
- <SelectValue placeholder="Select range" />
916
- </SelectTrigger>
917
- <SelectContent>
918
- <SelectItem value="7d">Last 7 days</SelectItem>
919
- <SelectItem value="30d">Last 30 days</SelectItem>
920
- <SelectItem value="90d">Last 90 days</SelectItem>
921
- </SelectContent>
922
- </Select>
923
- );
924
- }
925
- ```
926
-
927
- ### Tabs pattern
928
-
929
- ```tsx
930
- import { Tabs, TabsList, TabsTrigger, TabsContent } from "@databricks/appkit-ui/react";
931
-
932
- function Dashboard() {
933
- return (
934
- <Tabs defaultValue="overview">
935
- <TabsList>
936
- <TabsTrigger value="overview">Overview</TabsTrigger>
937
- <TabsTrigger value="analytics">Analytics</TabsTrigger>
938
- </TabsList>
939
- <TabsContent value="overview">
940
- <p>Overview content</p>
941
- </TabsContent>
942
- <TabsContent value="analytics">
943
- <p>Analytics content</p>
944
- </TabsContent>
945
- </Tabs>
946
- );
947
- }
948
- ```
949
-
950
- ### Dialog pattern
951
-
952
- ```tsx
953
- import {
954
- Dialog,
955
- DialogTrigger,
956
- DialogContent,
957
- DialogHeader,
958
- DialogTitle,
959
- DialogDescription,
960
- DialogFooter,
961
- Button,
962
- } from "@databricks/appkit-ui/react";
963
-
964
- function ConfirmDialog() {
965
- return (
966
- <Dialog>
967
- <DialogTrigger asChild>
968
- <Button variant="destructive">Delete</Button>
969
- </DialogTrigger>
970
- <DialogContent>
971
- <DialogHeader>
972
- <DialogTitle>Confirm deletion</DialogTitle>
973
- <DialogDescription>
974
- This action cannot be undone.
975
- </DialogDescription>
976
- </DialogHeader>
977
- <DialogFooter>
978
- <Button variant="outline">Cancel</Button>
979
- <Button variant="destructive">Delete</Button>
980
- </DialogFooter>
981
- </DialogContent>
982
- </Dialog>
983
- );
984
- }
985
- ```
986
-
987
- ### TooltipProvider requirement
988
-
989
- If using tooltips anywhere in your app, wrap your root component with `TooltipProvider`:
990
-
991
- ```tsx
992
- import { TooltipProvider } from "@databricks/appkit-ui/react";
993
-
994
- function App() {
995
- return (
996
- <TooltipProvider>
997
- {/* Your app content */}
998
- </TooltipProvider>
999
- );
1000
- }
1001
- ```
1002
-
1003
- ### Button variants
1004
-
1005
- ```tsx
1006
- import { Button } from "@databricks/appkit-ui/react";
1007
-
1008
- <Button variant="default">Primary</Button>
1009
- <Button variant="secondary">Secondary</Button>
1010
- <Button variant="outline">Outline</Button>
1011
- <Button variant="ghost">Ghost</Button>
1012
- <Button variant="destructive">Destructive</Button>
1013
- <Button variant="link">Link</Button>
1014
- ```
1015
-
1016
- ### Loading skeleton pattern
1017
-
1018
- ```tsx
1019
- import { Card, CardHeader, Skeleton } from "@databricks/appkit-ui/react";
1020
-
1021
- function LoadingCard() {
1022
- return (
1023
- <Card>
1024
- <CardHeader>
1025
- <Skeleton className="h-4 w-24 mb-2" />
1026
- <Skeleton className="h-8 w-20 mb-2" />
1027
- <Skeleton className="h-4 w-28" />
1028
- </CardHeader>
1029
- </Card>
1030
- );
1031
- }
1032
- ```
1033
-
1034
- ## Stylesheet
1035
-
1036
- In the main css file import the following
1037
-
1038
- ```css
1039
- @import "@databricks/appkit-ui/styles.css";
1040
- ```
1041
-
1042
- That will provide a default theme for the app using css variables.
1043
-
1044
- ### Customizing theme (light/dark mode)
1045
-
1046
- - Full list of variables to customize the theme.
1047
-
1048
- ```css
1049
- @import "@databricks/appkit-ui/styles.css";
1050
-
1051
- :root {
1052
- --radius: 0.625rem;
1053
- --background: oklch(1 0 0);
1054
- --foreground: oklch(0.141 0.005 285.823);
1055
- --card: oklch(1 0 0);
1056
- --card-foreground: oklch(0.141 0.005 285.823);
1057
- --popover: oklch(1 0 0);
1058
- --popover-foreground: oklch(0.141 0.005 285.823);
1059
- --primary: oklch(0.21 0.006 285.885);
1060
- --primary-foreground: oklch(0.985 0 0);
1061
- --secondary: oklch(0.967 0.001 286.375);
1062
- --secondary-foreground: oklch(0.21 0.006 285.885);
1063
- --muted: oklch(0.967 0.001 286.375);
1064
- --muted-foreground: oklch(0.552 0.016 285.938);
1065
- --accent: oklch(0.967 0.001 286.375);
1066
- --accent-foreground: oklch(0.21 0.006 285.885);
1067
- --destructive: oklch(0.577 0.245 27.325);
1068
- --destructive-foreground: oklch(0.985 0 0);
1069
- --success: oklch(0.603 0.135 166.892);
1070
- --success-foreground: oklch(1 0 0);
1071
- --warning: oklch(0.795 0.157 78.748);
1072
- --warning-foreground: oklch(0.199 0.027 238.732);
1073
- --border: oklch(0.92 0.004 286.32);
1074
- --input: oklch(0.92 0.004 286.32);
1075
- --ring: oklch(0.705 0.015 286.067);
1076
- --chart-1: oklch(0.646 0.222 41.116);
1077
- --chart-2: oklch(0.6 0.118 184.704);
1078
- --chart-3: oklch(0.398 0.07 227.392);
1079
- --chart-4: oklch(0.828 0.189 84.429);
1080
- --chart-5: oklch(0.769 0.188 70.08);
1081
- --sidebar: oklch(0.985 0 0);
1082
- --sidebar-foreground: oklch(0.141 0.005 285.823);
1083
- --sidebar-primary: oklch(0.21 0.006 285.885);
1084
- --sidebar-primary-foreground: oklch(0.985 0 0);
1085
- --sidebar-accent: oklch(0.967 0.001 286.375);
1086
- --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
1087
- --sidebar-border: oklch(0.92 0.004 286.32);
1088
- --sidebar-ring: oklch(0.705 0.015 286.067);
1089
- }
1090
-
1091
- @media (prefers-color-scheme: dark) {
1092
- :root {
1093
- --background: oklch(0.141 0.005 285.823);
1094
- --foreground: oklch(0.985 0 0);
1095
- --card: oklch(0.21 0.006 285.885);
1096
- --card-foreground: oklch(0.985 0 0);
1097
- --popover: oklch(0.21 0.006 285.885);
1098
- --popover-foreground: oklch(0.985 0 0);
1099
- --primary: oklch(0.92 0.004 286.32);
1100
- --primary-foreground: oklch(0.21 0.006 285.885);
1101
- --secondary: oklch(0.274 0.006 286.033);
1102
- --secondary-foreground: oklch(0.985 0 0);
1103
- --muted: oklch(0.274 0.006 286.033);
1104
- --muted-foreground: oklch(0.705 0.015 286.067);
1105
- --accent: oklch(0.274 0.006 286.033);
1106
- --accent-foreground: oklch(0.985 0 0);
1107
- --destructive: oklch(0.704 0.191 22.216);
1108
- --destructive-foreground: oklch(0.985 0 0);
1109
- --success: oklch(0.67 0.12 167);
1110
- --success-foreground: oklch(1 0 0);
1111
- --warning: oklch(0.83 0.165 85);
1112
- --warning-foreground: oklch(0.199 0.027 238.732);
1113
- --border: oklch(1 0 0 / 10%);
1114
- --input: oklch(1 0 0 / 15%);
1115
- --ring: oklch(0.552 0.016 285.938);
1116
- --chart-1: oklch(0.488 0.243 264.376);
1117
- --chart-2: oklch(0.696 0.17 162.48);
1118
- --chart-3: oklch(0.769 0.188 70.08);
1119
- --chart-4: oklch(0.627 0.265 303.9);
1120
- --chart-5: oklch(0.645 0.246 16.439);
1121
- --sidebar: oklch(0.21 0.006 285.885);
1122
- --sidebar-foreground: oklch(0.985 0 0);
1123
- --sidebar-primary: oklch(0.488 0.243 264.376);
1124
- --sidebar-primary-foreground: oklch(0.985 0 0);
1125
- --sidebar-accent: oklch(0.274 0.006 286.033);
1126
- --sidebar-accent-foreground: oklch(0.985 0 0);
1127
- --sidebar-border: oklch(1 0 0 / 10%);
1128
- --sidebar-ring: oklch(0.552 0.016 285.938);
1129
- }
1130
- }
1131
-
1132
- ```
1133
-
1134
- - If any variable is changed, it must be changed for both light and dark mode.
1135
-
1136
- ## Type generation (QueryRegistry + IntelliSense)
1137
-
1138
- Goal: generate `client/src/appKitTypes.d.ts` so query keys, params, and result rows are type-safe.
1139
-
1140
- ### Vite plugin: `appKitTypesPlugin`
1141
-
1142
- Correct option names:
1143
-
1144
- - `outFile?: string` (default `src/appKitTypes.d.ts`)
1145
- - `watchFolders?: string[]` (default `["../config/queries"]`)
1146
-
1147
- ```ts
1148
- // client/vite.config.ts
1149
- import { defineConfig } from "vite";
1150
- import react from "@vitejs/plugin-react";
1151
- import { appKitTypesPlugin } from "@databricks/appkit";
1152
-
1153
- export default defineConfig({
1154
- plugins: [
1155
- react(),
1156
- appKitTypesPlugin({
1157
- outFile: "src/appKitTypes.d.ts",
1158
- watchFolders: ["../config/queries"],
1159
- }),
1160
- ],
1161
- });
1162
- ```
1163
-
1164
- Important nuance:
1165
-
1166
- - When the frontend is served through AppKit in dev mode, AppKit’s dev server already includes `appKitTypesPlugin()` internally.
1167
- - You still want it in your client build pipeline if you run `vite build` separately.
1168
-
1169
- ### CLI: `appkit-generate-types`
3
+ To view specific documentation files referenced below, use the appkit CLI:
1170
4
 
1171
5
  ```bash
1172
- # Requires DATABRICKS_WAREHOUSE_ID (or pass as 3rd arg)
1173
- npx appkit-generate-types [rootDir] [outFile] [warehouseId]
1174
-
1175
- # Example:
1176
- npx appkit-generate-types . client/src/appKitTypes.d.ts
1177
-
1178
- # Force regeneration (skip cache):
1179
- npx appkit-generate-types --no-cache
1180
- ```
1181
-
1182
- ## Databricks Apps config: `app.yaml`
1183
-
1184
- Bind a SQL warehouse for Apps runtime:
1185
-
1186
- ```yaml
1187
- env:
1188
- - name: DATABRICKS_WAREHOUSE_ID
1189
- valueFrom: sql-warehouse
1190
- ```
1191
-
1192
- Full example with command:
1193
-
1194
- ```yaml
1195
- command:
1196
- - node
1197
- - build/index.mjs
1198
- env:
1199
- - name: DATABRICKS_WAREHOUSE_ID
1200
- valueFrom: sql-warehouse
1201
- ```
1202
-
1203
- ## LLM checklist (before you "finalize" code)
1204
-
1205
- - **Project setup**
1206
- - `package.json` has `"type": "module"`
1207
- - `tsx` is in devDependencies for dev server
1208
- - `dev` script uses `NODE_ENV=development tsx watch server/index.ts`
1209
- - `client/index.html` exists with `<div id="root"></div>` and script pointing to `client/src/main.tsx`
1210
-
1211
- - **Backend**
1212
- - `await createApp({ plugins: [...] })` is used (or `void createApp` with intent)
1213
- - `server()` is included (always)
1214
- - If using SQL: `analytics({})` included + `config/queries/*.sql` present
1215
- - Queries use `:param` placeholders, and params are passed from UI using `sql.*`
1216
- - If query needs workspace scoping: uses `:workspaceId`
1217
-
1218
- - **Frontend**
1219
- - `useMemo` wraps parameters objects
1220
- - Loading/error/empty states are explicit
1221
- - Charts use `format="auto"` unless you have a reason to force `"json"`/`"arrow"`
1222
- - Charts use props (`xKey`, `yKey`, `colors`) NOT children (they're ECharts-based, not Recharts)
1223
- - If using tooltips: root is wrapped with `<TooltipProvider>`
1224
-
1225
- - **Never**
1226
- - Don't build SQL strings manually
1227
- - Don't pass untyped raw params for annotated queries
1228
- - Don't ignore `createApp()`'s promise
1229
- - Don't invent UI components not listed in this file
1230
- - Don't pass Recharts children (`<Bar>`, `<XAxis>`, etc.) to AppKit chart components
1231
-
6
+ npx @databricks/appkit docs <path>
7
+ ```
8
+
9
+ Examples:
10
+ - View main documentation: `npx @databricks/appkit docs`
11
+ - View specific file: `npx @databricks/appkit docs ./docs/docs.md`
12
+ - View API reference: `npx @databricks/appkit docs ./docs/docs/api.md`
13
+ - View component docs: `npx @databricks/appkit docs ./docs/docs/api/appkit-ui/components/Sidebar.md`
14
+
15
+ The CLI will display the documentation content directly in the terminal.
16
+
17
+ ---
18
+
19
+ # AppKit
20
+
21
+ > Node.js + React SDK for Databricks Apps. Built for humans and AI.
22
+
23
+
24
+ ## Appkit
25
+
26
+ - [Getting started](./docs/docs.md): Learn how to get started with AppKit.
27
+ - [API reference](./docs/docs/api.md): This section contains the API reference for the AppKit packages.
28
+ - [@databricks/appkit](./docs/docs/api/appkit.md): Core library for building Databricks applications with type-safe SQL queries,
29
+ - [Abstract Class: AppKitError](./docs/docs/api./docs/Class.AppKitError.md): Base error class for all AppKit errors.
30
+ - [Class: AuthenticationError](./docs/docs/api./docs/Class.AuthenticationError.md): Error thrown when authentication fails.
31
+ - [Class: ConfigurationError](./docs/docs/api./docs/Class.ConfigurationError.md): Error thrown when configuration is missing or invalid.
32
+ - [Class: ConnectionError](./docs/docs/api./docs/Class.ConnectionError.md): Error thrown when a connection or network operation fails.
33
+ - [Class: ExecutionError](./docs/docs/api./docs/Class.ExecutionError.md): Error thrown when an operation execution fails.
34
+ - [Class: InitializationError](./docs/docs/api./docs/Class.InitializationError.md): Error thrown when a service or component is not properly initialized.
35
+ - [Abstract Class: Plugin<TConfig>](./docs/docs/api./docs/Class.Plugin.md): Base abstract class for creating AppKit plugins
36
+ - [Class: ServerError](./docs/docs/api./docs/Class.ServerError.md): Error thrown when server lifecycle operations fail.
37
+ - [Class: TunnelError](./docs/docs/api./docs/Class.TunnelError.md): Error thrown when remote tunnel operations fail.
38
+ - [Class: ValidationError](./docs/docs/api./docs/Class.ValidationError.md): Error thrown when input validation fails.
39
+ - [Function: appKitTypesPlugin()](./docs/docs/api./docs/Function.appKitTypesPlugin.md): Vite plugin to generate types for AppKit queries.
40
+ - [Function: createApp()](./docs/docs/api./docs/Function.createApp.md): Bootstraps AppKit with the provided configuration.
41
+ - [Function: isSQLTypeMarker()](./docs/docs/api./docs/Function.isSQLTypeMarker.md): Type guard to check if a value is a SQL type marker
42
+ - [Interface: BasePluginConfig](./docs/docs/api./docs/Interface.BasePluginConfig.md): Base configuration interface for AppKit plugins
43
+ - [Interface: CacheConfig](./docs/docs/api./docs/Interface.CacheConfig.md): Configuration for caching
44
+ - [Interface: ITelemetry](./docs/docs/api./docs/Interface.ITelemetry.md): Plugin-facing interface for OpenTelemetry instrumentation.
45
+ - [Interface: StreamExecutionSettings](./docs/docs/api./docs/Interface.StreamExecutionSettings.md): Configuration for streaming execution with default and user-scoped settings
46
+ - [Interface: TelemetryConfig](./docs/docs/api./docs/Interface.TelemetryConfig.md): OpenTelemetry configuration for AppKit applications
47
+ - [Type Alias: IAppRouter](./docs/docs/api./docs/TypeAlias.IAppRouter.md): Express router type for plugin route registration
48
+ - [Variable: sql](./docs/docs/api./docs/Variable.sql.md): SQL helper namespace
49
+ - [@databricks/appkit-ui](./docs/docs/api/appkit-ui.md): The library provides a set of UI primitives for building Databricks apps in React.
50
+ - [AreaChart](./docs/docs/api/appkit-ui/data/AreaChart.md): Area Chart component for trend visualization with filled areas.
51
+ - [BarChart](./docs/docs/api/appkit-ui/data/BarChart.md): Bar Chart component for categorical comparisons.
52
+ - [DataTable](./docs/docs/api/appkit-ui/data/DataTable.md): Production-ready data table with automatic data fetching and state management
53
+ - [DonutChart](./docs/docs/api/appkit-ui/data/DonutChart.md): Donut Chart component (Pie chart with inner radius).
54
+ - [HeatmapChart](./docs/docs/api/appkit-ui/data/HeatmapChart.md): Heatmap Chart component for matrix-style data visualization.
55
+ - [LineChart](./docs/docs/api/appkit-ui/data/LineChart.md): Line Chart component for time-series and trend visualization.
56
+ - [PieChart](./docs/docs/api/appkit-ui/data/PieChart.md): Pie Chart component for proportional data visualization.
57
+ - [RadarChart](./docs/docs/api/appkit-ui/data/RadarChart.md): Radar Chart component for multi-dimensional data comparison.
58
+ - [ScatterChart](./docs/docs/api/appkit-ui/data/ScatterChart.md): Scatter Chart component for correlation and distribution visualization.
59
+ - [Styling](./docs/docs/api/appkit-ui/styling.md): This guide covers how to style AppKit UI components using CSS variables and theming.
60
+ - [Accordion](./docs/docs/api/appkit-ui/ui/Accordion.md): Collapsible content sections organized in a vertical stack
61
+ - [Alert](./docs/docs/api/appkit-ui/ui/Alert.md): Displays important information with optional icon and multiple variants
62
+ - [AlertDialog](./docs/docs/api/appkit-ui/ui/AlertDialog.md): Modal dialog that interrupts the user with critical information requiring immediate action
63
+ - [AspectRatio](./docs/docs/api/appkit-ui/ui/AspectRatio.md): Container that maintains a specific aspect ratio for its content
64
+ - [Avatar](./docs/docs/api/appkit-ui/ui/Avatar.md): Displays user profile picture or initials in a circular container
65
+ - [Badge](./docs/docs/api/appkit-ui/ui/Badge.md): Small label for displaying status, categories, or counts
66
+ - [Breadcrumb](./docs/docs/api/appkit-ui/ui/Breadcrumb.md): Navigation component showing the current page's location in the site hierarchy
67
+ - [Button](./docs/docs/api/appkit-ui/ui/Button.md): Clickable button with multiple variants and sizes
68
+ - [ButtonGroup](./docs/docs/api/appkit-ui/ui/ButtonGroup.md): Container for grouping related buttons together with shared borders
69
+ - [Calendar](./docs/docs/api/appkit-ui/ui/Calendar.md): Date picker component for selecting single dates or date ranges
70
+ - [Card](./docs/docs/api/appkit-ui/ui/Card.md): Container for grouping related content with header, body, and footer sections
71
+ - [Carousel](./docs/docs/api/appkit-ui/ui/Carousel.md): Slideshow component for cycling through content with navigation controls
72
+ - [ChartContainer](./docs/docs/api/appkit-ui/ui/ChartContainer.md): Container for rendering data visualizations using Recharts
73
+ - [Checkbox](./docs/docs/api/appkit-ui/ui/Checkbox.md): Checkbox input for selecting multiple options
74
+ - [Collapsible](./docs/docs/api/appkit-ui/ui/Collapsible.md): Interactive component that expands and collapses content
75
+ - [Command](./docs/docs/api/appkit-ui/ui/Command.md): Command palette for keyboard-driven navigation and actions
76
+ - [ContextMenu](./docs/docs/api/appkit-ui/ui/ContextMenu.md): Menu triggered by right-clicking an element
77
+ - [Dialog](./docs/docs/api/appkit-ui/ui/Dialog.md): Modal dialog that overlays the page content
78
+ - [Drawer](./docs/docs/api/appkit-ui/ui/Drawer.md): Draggable panel that slides in from screen edges
79
+ - [DropdownMenu](./docs/docs/api/appkit-ui/ui/DropdownMenu.md): Menu that displays when triggered by a button or element
80
+ - [Empty](./docs/docs/api/appkit-ui/ui/Empty.md): Empty state component for displaying no-data scenarios
81
+ - [Field](./docs/docs/api/appkit-ui/ui/Field.md): Form field wrapper with label and input positioning
82
+ - [FormControl](./docs/docs/api/appkit-ui/ui/FormControl.md): Wrapper for form control elements with accessibility attributes
83
+ - [HoverCard](./docs/docs/api/appkit-ui/ui/HoverCard.md): Content card that appears when hovering over an element
84
+ - [Input](./docs/docs/api/appkit-ui/ui/Input.md): Text input field for single-line user input
85
+ - [InputGroup](./docs/docs/api/appkit-ui/ui/InputGroup.md): Container for combining input fields with addons and buttons
86
+ - [InputOTP](./docs/docs/api/appkit-ui/ui/InputOTP.md): One-time password input with individual character slots
87
+ - [Item](./docs/docs/api/appkit-ui/ui/Item.md): Flexible container for list items with media, content, and actions
88
+ - [Kbd](./docs/docs/api/appkit-ui/ui/Kbd.md): Visual representation of keyboard keys
89
+ - [Label](./docs/docs/api/appkit-ui/ui/Label.md): Text label associated with form controls
90
+ - [Menubar](./docs/docs/api/appkit-ui/ui/Menubar.md): Horizontal menu bar with dropdown menus
91
+ - [NavigationMenu](./docs/docs/api/appkit-ui/ui/NavigationMenu.md): Horizontal navigation menu with dropdown submenus
92
+ - [Pagination](./docs/docs/api/appkit-ui/ui/Pagination.md): Navigation component for paginated content
93
+ - [Popover](./docs/docs/api/appkit-ui/ui/Popover.md): Floating content panel anchored to a trigger element
94
+ - [Progress](./docs/docs/api/appkit-ui/ui/Progress.md): Visual indicator showing task completion percentage
95
+ - [RadioGroup](./docs/docs/api/appkit-ui/ui/RadioGroup.md): Group of radio buttons for selecting a single option
96
+ - [ResizableHandle](./docs/docs/api/appkit-ui/ui/ResizableHandle.md): Draggable handle for resizing panels
97
+ - [ScrollArea](./docs/docs/api/appkit-ui/ui/ScrollArea.md): Container with custom scrollbars for overflow content
98
+ - [Select](./docs/docs/api/appkit-ui/ui/Select.md): Dropdown control for selecting a value from a list
99
+ - [Separator](./docs/docs/api/appkit-ui/ui/Separator.md): Visual divider line between content sections
100
+ - [Sheet](./docs/docs/api/appkit-ui/ui/Sheet.md): Sliding panel that overlays content from screen edges
101
+ - [Sidebar](./docs/docs/api/appkit-ui/ui/Sidebar.md): Collapsible navigation sidebar with mobile support
102
+ - [Skeleton](./docs/docs/api/appkit-ui/ui/Skeleton.md): Loading placeholder with pulsing animation
103
+ - [Slider](./docs/docs/api/appkit-ui/ui/Slider.md): Draggable input for selecting numeric values within a range
104
+ - [Spinner](./docs/docs/api/appkit-ui/ui/Spinner.md): Animated loading indicator
105
+ - [Switch](./docs/docs/api/appkit-ui/ui/Switch.md): Toggle control for switching between on and off states
106
+ - [Table](./docs/docs/api/appkit-ui/ui/Table.md): Structured data display with rows and columns
107
+ - [Tabs](./docs/docs/api/appkit-ui/ui/Tabs.md): Tabbed interface for organizing content into separate panels
108
+ - [Textarea](./docs/docs/api/appkit-ui/ui/Textarea.md): Multi-line text input field
109
+ - [Toaster](./docs/docs/api/appkit-ui/ui/Toaster.md): Toast notification system for displaying temporary messages
110
+ - [Toggle](./docs/docs/api/appkit-ui/ui/Toggle.md): Button that toggles between pressed and unpressed states
111
+ - [ToggleGroup](./docs/docs/api/appkit-ui/ui/ToggleGroup.md): Group of toggle buttons for selecting one or more options
112
+ - [Tooltip](./docs/docs/api/appkit-ui/ui/Tooltip.md): Brief informational message that appears on hover
113
+ - [App management](./docs/docs/app-management.md): Manage your AppKit application throughout its lifecycle using the Databricks CLI. This guide covers deploying, starting, stopping, monitoring, and deleting apps.
114
+ - [Architecture](./docs/docs/architecture.md): AppKit follows a plugin-based architecture designed for building production-ready Databricks applications. This document provides a high-level overview of the system components and their interactions.
115
+ - [Development](./docs/docs/category/development.md): Guides for developing AppKit applications
116
+ - [Configuration](./docs/docs/configuration.md): This guide covers environment variables and configuration options for AppKit applications.
117
+ - [Core principles](./docs/docs/core-principles.md): Learn about the fundamental concepts and principles behind AppKit.
118
+ - [Development](./docs/docs/development.md): AppKit provides multiple development workflows to suit different needs: local development with hot reload, AI-assisted development with MCP, and remote tunneling to deployed backends.
119
+ - [LLM Guide](./docs/docs/development/llm-guide.md): This document provides prescriptive guidance for AI coding assistants generating code with Databricks AppKit. It is intentionally opinionated to ensure consistent, production-ready code generation.
120
+ - [Local development](./docs/docs/development/local-development.md): Once your app is bootstrapped according to the Manual quick start guide, you can start the development server with hot reload for both UI and backend code.
121
+ - [Project setup](./docs/docs/development/project-setup.md): This guide covers the recommended project structure and scaffolding for AppKit applications.
122
+ - [Remote Bridge](./docs/docs/development/remote-bridge.md): Remote bridge allows you to develop against a deployed backend while keeping your UI and queries local. This is useful for testing against production data or debugging deployed backend code without redeploying your app.
123
+ - [Type generation](./docs/docs/development/type-generation.md): AppKit can automatically generate TypeScript types for your SQL queries, providing end-to-end type safety from database to UI.
124
+ - [Plugins](./docs/docs/plugins.md): Plugins are modular extensions that add capabilities to your AppKit application. They follow a defined lifecycle and have access to shared services like caching, telemetry, and streaming.