@databricks/appkit 0.3.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 (239) hide show
  1. package/CLAUDE.md +121 -1231
  2. package/NOTICE.md +1 -1
  3. package/bin/appkit.js +3 -0
  4. package/dist/appkit/package.js +1 -1
  5. package/dist/cache/index.js +3 -3
  6. package/dist/cache/index.js.map +1 -1
  7. package/dist/cli/commands/docs.js +47 -0
  8. package/dist/cli/commands/docs.js.map +1 -0
  9. package/dist/cli/commands/generate-types.js +38 -0
  10. package/dist/cli/commands/generate-types.js.map +1 -0
  11. package/dist/cli/commands/lint.js +104 -0
  12. package/dist/cli/commands/lint.js.map +1 -0
  13. package/dist/cli/commands/setup.js +121 -0
  14. package/dist/cli/commands/setup.js.map +1 -0
  15. package/dist/cli/index.d.ts +1 -0
  16. package/dist/cli/index.js +24 -0
  17. package/dist/cli/index.js.map +1 -0
  18. package/dist/index.js.map +1 -1
  19. package/dist/plugin/plugin.d.ts +1 -0
  20. package/dist/plugin/plugin.d.ts.map +1 -1
  21. package/dist/plugin/plugin.js +1 -0
  22. package/dist/plugin/plugin.js.map +1 -1
  23. package/dist/server/remote-tunnel/remote-tunnel-manager.js +9 -9
  24. package/dist/server/remote-tunnel/remote-tunnel-manager.js.map +1 -1
  25. package/dist/server/utils.js +6 -6
  26. package/dist/server/utils.js.map +1 -1
  27. package/dist/shared/src/execute.d.ts +1 -0
  28. package/dist/shared/src/execute.d.ts.map +1 -1
  29. package/dist/shared/src/plugin.d.ts +3 -0
  30. package/dist/shared/src/plugin.d.ts.map +1 -1
  31. package/dist/telemetry/types.d.ts +1 -0
  32. package/dist/telemetry/types.d.ts.map +1 -1
  33. package/dist/type-generator/index.js +1 -1
  34. package/dist/type-generator/index.js.map +1 -1
  35. package/docs/docs/api/appkit/Class.AppKitError/index.html +77 -0
  36. package/docs/docs/api/appkit/Class.AppKitError.md +154 -0
  37. package/docs/docs/api/appkit/Class.AuthenticationError/index.html +110 -0
  38. package/docs/docs/api/appkit/Class.AuthenticationError.md +236 -0
  39. package/docs/docs/api/appkit/Class.ConfigurationError/index.html +112 -0
  40. package/docs/docs/api/appkit/Class.ConfigurationError.md +243 -0
  41. package/docs/docs/api/appkit/Class.ConnectionError/index.html +120 -0
  42. package/docs/docs/api/appkit/Class.ConnectionError.md +265 -0
  43. package/docs/docs/api/appkit/Class.ExecutionError/index.html +116 -0
  44. package/docs/docs/api/appkit/Class.ExecutionError.md +250 -0
  45. package/docs/docs/api/appkit/Class.InitializationError/index.html +104 -0
  46. package/docs/docs/api/appkit/Class.InitializationError.md +222 -0
  47. package/docs/docs/api/appkit/Class.Plugin/index.html +149 -0
  48. package/docs/docs/api/appkit/Class.Plugin.md +392 -0
  49. package/docs/docs/api/appkit/Class.ServerError/index.html +108 -0
  50. package/docs/docs/api/appkit/Class.ServerError.md +229 -0
  51. package/docs/docs/api/appkit/Class.TunnelError/index.html +108 -0
  52. package/docs/docs/api/appkit/Class.TunnelError.md +231 -0
  53. package/docs/docs/api/appkit/Class.ValidationError/index.html +106 -0
  54. package/docs/docs/api/appkit/Class.ValidationError.md +225 -0
  55. package/docs/docs/api/appkit/Function.appKitTypesPlugin/index.html +24 -0
  56. package/docs/docs/api/appkit/Function.appKitTypesPlugin.md +20 -0
  57. package/docs/docs/api/appkit/Function.createApp/index.html +24 -0
  58. package/docs/docs/api/appkit/Function.createApp.md +31 -0
  59. package/docs/docs/api/appkit/Function.isSQLTypeMarker/index.html +25 -0
  60. package/docs/docs/api/appkit/Function.isSQLTypeMarker.md +32 -0
  61. package/docs/docs/api/appkit/Interface.BasePluginConfig/index.html +28 -0
  62. package/docs/docs/api/appkit/Interface.BasePluginConfig.md +37 -0
  63. package/docs/docs/api/appkit/Interface.CacheConfig/index.html +63 -0
  64. package/docs/docs/api/appkit/Interface.CacheConfig.md +131 -0
  65. package/docs/docs/api/appkit/Interface.ITelemetry/index.html +73 -0
  66. package/docs/docs/api/appkit/Interface.ITelemetry.md +144 -0
  67. package/docs/docs/api/appkit/Interface.StreamExecutionSettings/index.html +26 -0
  68. package/docs/docs/api/appkit/Interface.StreamExecutionSettings.md +30 -0
  69. package/docs/docs/api/appkit/Interface.TelemetryConfig/index.html +32 -0
  70. package/docs/docs/api/appkit/Interface.TelemetryConfig.md +48 -0
  71. package/docs/docs/api/appkit/TypeAlias.IAppRouter/index.html +18 -0
  72. package/docs/docs/api/appkit/TypeAlias.IAppRouter.md +8 -0
  73. package/docs/docs/api/appkit/Variable.sql/index.html +98 -0
  74. package/docs/docs/api/appkit/Variable.sql.md +260 -0
  75. package/docs/docs/api/appkit/index.html +28 -0
  76. package/docs/docs/api/appkit-ui/data/AreaChart/index.html +29 -0
  77. package/docs/docs/api/appkit-ui/data/AreaChart.md +79 -0
  78. package/docs/docs/api/appkit-ui/data/BarChart/index.html +29 -0
  79. package/docs/docs/api/appkit-ui/data/BarChart.md +74 -0
  80. package/docs/docs/api/appkit-ui/data/DataTable/index.html +36 -0
  81. package/docs/docs/api/appkit-ui/data/DataTable.md +69 -0
  82. package/docs/docs/api/appkit-ui/data/DonutChart/index.html +29 -0
  83. package/docs/docs/api/appkit-ui/data/DonutChart.md +72 -0
  84. package/docs/docs/api/appkit-ui/data/HeatmapChart/index.html +35 -0
  85. package/docs/docs/api/appkit-ui/data/HeatmapChart.md +91 -0
  86. package/docs/docs/api/appkit-ui/data/LineChart/index.html +29 -0
  87. package/docs/docs/api/appkit-ui/data/LineChart.md +77 -0
  88. package/docs/docs/api/appkit-ui/data/PieChart/index.html +29 -0
  89. package/docs/docs/api/appkit-ui/data/PieChart.md +72 -0
  90. package/docs/docs/api/appkit-ui/data/RadarChart/index.html +29 -0
  91. package/docs/docs/api/appkit-ui/data/RadarChart.md +74 -0
  92. package/docs/docs/api/appkit-ui/data/ScatterChart/index.html +29 -0
  93. package/docs/docs/api/appkit-ui/data/ScatterChart.md +76 -0
  94. package/docs/docs/api/appkit-ui/index.html +23 -0
  95. package/docs/docs/api/appkit-ui/styling/index.html +74 -0
  96. package/docs/docs/api/appkit-ui/styling.md +81 -0
  97. package/docs/docs/api/appkit-ui/ui/Accordion/index.html +48 -0
  98. package/docs/docs/api/appkit-ui/ui/Accordion.md +139 -0
  99. package/docs/docs/api/appkit-ui/ui/Alert/index.html +41 -0
  100. package/docs/docs/api/appkit-ui/ui/Alert.md +89 -0
  101. package/docs/docs/api/appkit-ui/ui/AlertDialog/index.html +97 -0
  102. package/docs/docs/api/appkit-ui/ui/AlertDialog.md +282 -0
  103. package/docs/docs/api/appkit-ui/ui/AspectRatio/index.html +27 -0
  104. package/docs/docs/api/appkit-ui/ui/AspectRatio.md +46 -0
  105. package/docs/docs/api/appkit-ui/ui/Avatar/index.html +41 -0
  106. package/docs/docs/api/appkit-ui/ui/Avatar.md +90 -0
  107. package/docs/docs/api/appkit-ui/ui/Badge/index.html +27 -0
  108. package/docs/docs/api/appkit-ui/ui/Badge.md +38 -0
  109. package/docs/docs/api/appkit-ui/ui/Breadcrumb/index.html +69 -0
  110. package/docs/docs/api/appkit-ui/ui/Breadcrumb.md +193 -0
  111. package/docs/docs/api/appkit-ui/ui/Button/index.html +27 -0
  112. package/docs/docs/api/appkit-ui/ui/Button.md +39 -0
  113. package/docs/docs/api/appkit-ui/ui/ButtonGroup/index.html +38 -0
  114. package/docs/docs/api/appkit-ui/ui/ButtonGroup.md +68 -0
  115. package/docs/docs/api/appkit-ui/ui/Calendar/index.html +34 -0
  116. package/docs/docs/api/appkit-ui/ui/Calendar.md +154 -0
  117. package/docs/docs/api/appkit-ui/ui/Card/index.html +69 -0
  118. package/docs/docs/api/appkit-ui/ui/Card.md +222 -0
  119. package/docs/docs/api/appkit-ui/ui/Carousel/index.html +55 -0
  120. package/docs/docs/api/appkit-ui/ui/Carousel.md +152 -0
  121. package/docs/docs/api/appkit-ui/ui/ChartContainer/index.html +58 -0
  122. package/docs/docs/api/appkit-ui/ui/ChartContainer.md +343 -0
  123. package/docs/docs/api/appkit-ui/ui/Checkbox/index.html +27 -0
  124. package/docs/docs/api/appkit-ui/ui/Checkbox.md +53 -0
  125. package/docs/docs/api/appkit-ui/ui/Collapsible/index.html +41 -0
  126. package/docs/docs/api/appkit-ui/ui/Collapsible.md +125 -0
  127. package/docs/docs/api/appkit-ui/ui/Command/index.html +83 -0
  128. package/docs/docs/api/appkit-ui/ui/Command.md +287 -0
  129. package/docs/docs/api/appkit-ui/ui/ContextMenu/index.html +111 -0
  130. package/docs/docs/api/appkit-ui/ui/ContextMenu.md +419 -0
  131. package/docs/docs/api/appkit-ui/ui/Dialog/index.html +90 -0
  132. package/docs/docs/api/appkit-ui/ui/Dialog.md +285 -0
  133. package/docs/docs/api/appkit-ui/ui/Drawer/index.html +90 -0
  134. package/docs/docs/api/appkit-ui/ui/Drawer.md +387 -0
  135. package/docs/docs/api/appkit-ui/ui/DropdownMenu/index.html +111 -0
  136. package/docs/docs/api/appkit-ui/ui/DropdownMenu.md +478 -0
  137. package/docs/docs/api/appkit-ui/ui/Empty/index.html +54 -0
  138. package/docs/docs/api/appkit-ui/ui/Empty.md +109 -0
  139. package/docs/docs/api/appkit-ui/ui/Field/index.html +87 -0
  140. package/docs/docs/api/appkit-ui/ui/Field.md +201 -0
  141. package/docs/docs/api/appkit-ui/ui/FormControl/index.html +59 -0
  142. package/docs/docs/api/appkit-ui/ui/FormControl.md +128 -0
  143. package/docs/docs/api/appkit-ui/ui/HoverCard/index.html +39 -0
  144. package/docs/docs/api/appkit-ui/ui/HoverCard.md +131 -0
  145. package/docs/docs/api/appkit-ui/ui/Input/index.html +27 -0
  146. package/docs/docs/api/appkit-ui/ui/Input.md +35 -0
  147. package/docs/docs/api/appkit-ui/ui/InputGroup/index.html +59 -0
  148. package/docs/docs/api/appkit-ui/ui/InputGroup.md +123 -0
  149. package/docs/docs/api/appkit-ui/ui/InputOTP/index.html +48 -0
  150. package/docs/docs/api/appkit-ui/ui/InputOTP.md +124 -0
  151. package/docs/docs/api/appkit-ui/ui/Item/index.html +78 -0
  152. package/docs/docs/api/appkit-ui/ui/Item.md +185 -0
  153. package/docs/docs/api/appkit-ui/ui/Kbd/index.html +30 -0
  154. package/docs/docs/api/appkit-ui/ui/Kbd.md +39 -0
  155. package/docs/docs/api/appkit-ui/ui/Label/index.html +27 -0
  156. package/docs/docs/api/appkit-ui/ui/Label.md +44 -0
  157. package/docs/docs/api/appkit-ui/ui/Menubar/index.html +117 -0
  158. package/docs/docs/api/appkit-ui/ui/Menubar.md +484 -0
  159. package/docs/docs/api/appkit-ui/ui/NavigationMenu/index.html +76 -0
  160. package/docs/docs/api/appkit-ui/ui/NavigationMenu.md +338 -0
  161. package/docs/docs/api/appkit-ui/ui/Pagination/index.html +69 -0
  162. package/docs/docs/api/appkit-ui/ui/Pagination.md +191 -0
  163. package/docs/docs/api/appkit-ui/ui/Popover/index.html +45 -0
  164. package/docs/docs/api/appkit-ui/ui/Popover.md +173 -0
  165. package/docs/docs/api/appkit-ui/ui/Progress/index.html +27 -0
  166. package/docs/docs/api/appkit-ui/ui/Progress.md +51 -0
  167. package/docs/docs/api/appkit-ui/ui/RadioGroup/index.html +33 -0
  168. package/docs/docs/api/appkit-ui/ui/RadioGroup.md +83 -0
  169. package/docs/docs/api/appkit-ui/ui/ResizableHandle/index.html +41 -0
  170. package/docs/docs/api/appkit-ui/ui/ResizableHandle.md +136 -0
  171. package/docs/docs/api/appkit-ui/ui/ScrollArea/index.html +34 -0
  172. package/docs/docs/api/appkit-ui/ui/ScrollArea.md +83 -0
  173. package/docs/docs/api/appkit-ui/ui/Select/index.html +82 -0
  174. package/docs/docs/api/appkit-ui/ui/Select.md +267 -0
  175. package/docs/docs/api/appkit-ui/ui/Separator/index.html +27 -0
  176. package/docs/docs/api/appkit-ui/ui/Separator.md +56 -0
  177. package/docs/docs/api/appkit-ui/ui/Sheet/index.html +76 -0
  178. package/docs/docs/api/appkit-ui/ui/Sheet.md +236 -0
  179. package/docs/docs/api/appkit-ui/ui/Sidebar/index.html +183 -0
  180. package/docs/docs/api/appkit-ui/ui/Sidebar.md +490 -0
  181. package/docs/docs/api/appkit-ui/ui/Skeleton/index.html +27 -0
  182. package/docs/docs/api/appkit-ui/ui/Skeleton.md +43 -0
  183. package/docs/docs/api/appkit-ui/ui/Slider/index.html +27 -0
  184. package/docs/docs/api/appkit-ui/ui/Slider.md +61 -0
  185. package/docs/docs/api/appkit-ui/ui/Spinner/index.html +24 -0
  186. package/docs/docs/api/appkit-ui/ui/Spinner.md +22 -0
  187. package/docs/docs/api/appkit-ui/ui/Switch/index.html +27 -0
  188. package/docs/docs/api/appkit-ui/ui/Switch.md +46 -0
  189. package/docs/docs/api/appkit-ui/ui/Table/index.html +69 -0
  190. package/docs/docs/api/appkit-ui/ui/Table.md +236 -0
  191. package/docs/docs/api/appkit-ui/ui/Tabs/index.html +48 -0
  192. package/docs/docs/api/appkit-ui/ui/Tabs.md +177 -0
  193. package/docs/docs/api/appkit-ui/ui/Textarea/index.html +27 -0
  194. package/docs/docs/api/appkit-ui/ui/Textarea.md +35 -0
  195. package/docs/docs/api/appkit-ui/ui/Toaster/index.html +27 -0
  196. package/docs/docs/api/appkit-ui/ui/Toaster.md +75 -0
  197. package/docs/docs/api/appkit-ui/ui/Toggle/index.html +27 -0
  198. package/docs/docs/api/appkit-ui/ui/Toggle.md +48 -0
  199. package/docs/docs/api/appkit-ui/ui/ToggleGroup/index.html +33 -0
  200. package/docs/docs/api/appkit-ui/ui/ToggleGroup.md +88 -0
  201. package/docs/docs/api/appkit-ui/ui/Tooltip/index.html +46 -0
  202. package/docs/docs/api/appkit-ui/ui/Tooltip.md +134 -0
  203. package/docs/docs/api/appkit-ui.md +15 -0
  204. package/docs/docs/api/appkit.md +48 -0
  205. package/docs/docs/api/index.html +28 -0
  206. package/docs/docs/api.md +24 -0
  207. package/docs/docs/app-management/index.html +106 -0
  208. package/docs/docs/app-management.md +171 -0
  209. package/docs/docs/architecture/index.html +71 -0
  210. package/docs/docs/architecture.md +69 -0
  211. package/docs/docs/category/development/index.html +16 -0
  212. package/docs/docs/category/development.md +3 -0
  213. package/docs/docs/configuration/index.html +66 -0
  214. package/docs/docs/configuration.md +150 -0
  215. package/docs/docs/core-principles/index.html +38 -0
  216. package/docs/docs/core-principles.md +31 -0
  217. package/docs/docs/development/index.html +34 -0
  218. package/docs/docs/development/llm-guide/index.html +74 -0
  219. package/docs/docs/development/llm-guide.md +74 -0
  220. package/docs/docs/development/local-development/index.html +27 -0
  221. package/docs/docs/development/local-development.md +20 -0
  222. package/docs/docs/development/project-setup/index.html +69 -0
  223. package/docs/docs/development/project-setup.md +246 -0
  224. package/docs/docs/development/remote-bridge/index.html +76 -0
  225. package/docs/docs/development/remote-bridge.md +80 -0
  226. package/docs/docs/development/type-generation/index.html +65 -0
  227. package/docs/docs/development/type-generation.md +110 -0
  228. package/docs/docs/development.md +21 -0
  229. package/docs/docs/index.html +58 -0
  230. package/docs/docs/plugins/index.html +151 -0
  231. package/docs/docs/plugins.md +313 -0
  232. package/docs/docs.md +64 -0
  233. package/llms.txt +121 -1231
  234. package/package.json +11 -11
  235. package/scripts/postinstall.js +1 -1
  236. package/AGENTS.md +0 -1234
  237. package/bin/appkit-lint.js +0 -129
  238. package/bin/generate-types.js +0 -27
  239. package/bin/setup-claude.js +0 -190
package/docs/docs/development/remote-bridge/index.html ADDED
@@ -0,0 +1,76 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-development/remote-bridge" data-has-hydrated="false">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="generator" content="Docusaurus v3.9.2">
6
+ <title data-rh="true">Remote Bridge | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/development/remote-bridge"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Remote Bridge | AppKit"><meta data-rh="true" name="description" content="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."><meta data-rh="true" property="og:description" content="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."><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/development/remote-bridge"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/remote-bridge" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/remote-bridge" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Development","item":"https://databricks.github.io/appkit/docs/category/development"},{"@type":"ListItem","position":2,"name":"Remote Bridge","item":"https://databricks.github.io/appkit/docs/development/remote-bridge"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.0ec7398f.css">
7
+ <script src="/appkit/assets/js/runtime~main.a874f05e.js" defer="defer"></script>
8
+ <script src="/appkit/assets/js/main.9d17da5a.js" defer="defer"></script>
9
+ </head>
10
+ <body class="navigation-with-keyboard">
11
+ <svg style="display: none;"><defs>
12
+ <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
+ </defs></svg>
14
+ <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/plugins"><span title="Plugins" class="linkLabel_hZzm">Plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Expand sidebar category &#x27;API reference&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/category/development"><span>Development</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Remote Bridge</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Remote Bridge</h1></header>
15
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="prerequisites">Prerequisites<a href="#prerequisites" class="hash-link" aria-label="Direct link to Prerequisites" title="Direct link to Prerequisites" translate="no">​</a></h2>
16
+ <ul>
17
+ <li class=""><a href="https://nodejs.org" target="_blank" rel="noopener noreferrer" class="">Node.js</a> environment</li>
18
+ <li class="">Databricks CLI: install and configure it according to the <a href="https://docs.databricks.com/aws/en/dev-tools/cli/tutorial" target="_blank" rel="noopener noreferrer" class="">official tutorial</a>.</li>
19
+ <li class="">A new Databricks app with AppKit installed. See <a class="" href="/appkit/docs/">Bootstrap a new Databricks app</a> for more details.</li>
20
+ </ul>
21
+ <p>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.</p>
22
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="when-to-use-remote-bridge">When to use Remote Bridge<a href="#when-to-use-remote-bridge" class="hash-link" aria-label="Direct link to When to use Remote Bridge" title="Direct link to When to use Remote Bridge" translate="no">​</a></h2>
23
+ <p>Use remote bridge when:</p>
24
+ <ul>
25
+ <li class="">Testing against production data</li>
26
+ <li class="">Debugging deployed backend code</li>
27
+ <li class="">Developing UI without running backend locally</li>
28
+ <li class="">Collaborating with team members on the same backend</li>
29
+ </ul>
30
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="starting-and-stopping-remote-bridge">Starting and stopping Remote Bridge<a href="#starting-and-stopping-remote-bridge" class="hash-link" aria-label="Direct link to Starting and stopping Remote Bridge" title="Direct link to Starting and stopping Remote Bridge" translate="no">​</a></h2>
31
+ <p>To start the remote bridge, run the following command:</p>
32
+ <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">databricks apps dev-remote</span><br></span></code></pre></div></div>
33
+ <p>The command will:</p>
34
+ <ol>
35
+ <li class="">
36
+ <p>Obtain app name from the context (either <code>app.yml</code> file or user input in the CLI)</p>
37
+ </li>
38
+ <li class="">
39
+ <p>Start a local Vite development server</p>
40
+ </li>
41
+ <li class="">
42
+ <p>Establish a WebSocket bridge to your deployed app</p>
43
+ </li>
44
+ <li class="">
45
+ <p>Provide two URLs:</p>
46
+ <ul>
47
+ <li class=""><strong>App URL</strong>: Direct link for your own use (<code>&lt;app-url&gt;?dev=true</code>)</li>
48
+ <li class=""><strong>Shareable URL</strong>: Link with tunnel ID for sharing with team members (<code>&lt;app-url&gt;?dev=&lt;tunnelId&gt;</code>)</li>
49
+ </ul>
50
+ </li>
51
+ </ol>
52
+ <div class="theme-admonition theme-admonition-note admonition_mylv alert alert--secondary"><div class="admonitionHeading_EXDp"><span class="admonitionIcon_a6gq"><svg viewBox="0 0 14 16"><path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path></svg></span>note</div><div class="admonitionContent_mPbZ"><p>For all available options, run:</p><div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">databricks apps dev-remote --help</span><br></span></code></pre></div></div></div></div>
53
+ <p>To stop the remote bridge, press <code>Ctrl+C</code> in the terminal.</p>
54
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="connection-approval">Connection approval<a href="#connection-approval" class="hash-link" aria-label="Direct link to Connection approval" title="Direct link to Connection approval" translate="no">​</a></h2>
55
+ <p>When you start remote bridge, every time you open the URL in your browser from a new device, you&#x27;ll be prompted to approve the connection.</p>
56
+ <p>You can provide the URL to your team members to allow them to see the app in their browser. You will still need to approve the connection from your side.</p>
57
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="how-it-works">How it works<a href="#how-it-works" class="hash-link" aria-label="Direct link to How it works" title="Direct link to How it works" translate="no">​</a></h2>
58
+ <p>Remote bridge creates a WebSocket bridge between your local Vite dev server and the deployed backend, allowing you to develop UI locally while using the deployed backend.</p>
59
+ <!-- -->
60
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="details">Details<a href="#details" class="hash-link" aria-label="Direct link to Details" title="Direct link to Details" translate="no">​</a></h3>
61
+ <ul>
62
+ <li class="">The <strong>Browser</strong> connects to the deployed app backend with <code>?dev=true</code> or <code>?dev=&lt;tunnelId&gt;</code> query parameter</li>
63
+ <li class="">The <strong>Deployed Backend</strong> proxies UI requests through a WebSocket tunnel (<code>/dev-tunnel</code>) to your local machine</li>
64
+ <li class="">The <strong>WebSocket Bridge</strong> (running locally) receives fetch requests and file read requests from the backend</li>
65
+ <li class="">The <strong>Local Vite Dev Server</strong> serves the UI files and provides hot module replacement (HMR)</li>
66
+ <li class="">The bridge sends responses back through the WebSocket to the backend, which serves them to the browser</li>
67
+ </ul>
68
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="what-gets-hot-reloaded">What gets hot-reloaded<a href="#what-gets-hot-reloaded" class="hash-link" aria-label="Direct link to What gets hot-reloaded" title="Direct link to What gets hot-reloaded" translate="no">​</a></h3>
69
+ <p>With remote bridge you get instant hot-reload for:</p>
70
+ <ul>
71
+ <li class=""><strong>UI Changes</strong> - Any changes to your React/TypeScript/CSS files in the <code>client/</code> directory</li>
72
+ <li class=""><strong>Query Files</strong> - SQL files in the <code>config/queries/</code> directory (<code>.sql</code> files only)</li>
73
+ </ul>
74
+ <p>Backend code is <strong>not</strong> hot-reloaded. You need to redeploy your app to see changes in the backend code.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/development/remote-bridge.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/development/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Development</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/development/project-setup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Project setup</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#prerequisites" class="table-of-contents__link toc-highlight">Prerequisites</a></li><li><a href="#when-to-use-remote-bridge" class="table-of-contents__link toc-highlight">When to use Remote Bridge</a></li><li><a href="#starting-and-stopping-remote-bridge" class="table-of-contents__link toc-highlight">Starting and stopping Remote Bridge</a></li><li><a href="#connection-approval" class="table-of-contents__link toc-highlight">Connection approval</a></li><li><a href="#how-it-works" class="table-of-contents__link toc-highlight">How it works</a><ul><li><a href="#details" class="table-of-contents__link toc-highlight">Details</a></li><li><a href="#what-gets-hot-reloaded" class="table-of-contents__link toc-highlight">What gets hot-reloaded</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
75
+ </body>
76
+ </html>
package/docs/docs/development/remote-bridge.md ADDED
@@ -0,0 +1,80 @@
1
+ # Remote Bridge
2
+
3
+ ## Prerequisites[​](#prerequisites "Direct link to Prerequisites")
4
+
5
+ * [Node.js](https://nodejs.org) environment
6
+ * Databricks CLI: install and configure it according to the [official tutorial](https://docs.databricks.com/aws/en/dev-tools/cli/tutorial).
7
+ * A new Databricks app with AppKit installed. See [Bootstrap a new Databricks app](/appkit/docs.md) for more details.
8
+
9
+ 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.
10
+
11
+ ## When to use Remote Bridge[​](#when-to-use-remote-bridge "Direct link to When to use Remote Bridge")
12
+
13
+ Use remote bridge when:
14
+
15
+ * Testing against production data
16
+ * Debugging deployed backend code
17
+ * Developing UI without running backend locally
18
+ * Collaborating with team members on the same backend
19
+
20
+ ## Starting and stopping Remote Bridge[​](#starting-and-stopping-remote-bridge "Direct link to Starting and stopping Remote Bridge")
21
+
22
+ To start the remote bridge, run the following command:
23
+
24
+ ```bash
25
+ databricks apps dev-remote
26
+
27
+ ```
28
+
29
+ The command will:
30
+
31
+ 1. Obtain app name from the context (either `app.yml` file or user input in the CLI)
32
+
33
+ 2. Start a local Vite development server
34
+
35
+ 3. Establish a WebSocket bridge to your deployed app
36
+
37
+ 4. Provide two URLs:
38
+
39
+ * **App URL**: Direct link for your own use (`<app-url>?dev=true`)
40
+ * **Shareable URL**: Link with tunnel ID for sharing with team members (`<app-url>?dev=<tunnelId>`)
41
+
42
+ note
43
+
44
+ For all available options, run:
45
+
46
+ ```bash
47
+ databricks apps dev-remote --help
48
+
49
+ ```
50
+
51
+ To stop the remote bridge, press `Ctrl+C` in the terminal.
52
+
53
+ ## Connection approval[​](#connection-approval "Direct link to Connection approval")
54
+
55
+ When you start remote bridge, every time you open the URL in your browser from a new device, you'll be prompted to approve the connection.
56
+
57
+ You can provide the URL to your team members to allow them to see the app in their browser. You will still need to approve the connection from your side.
58
+
59
+ ## How it works[​](#how-it-works "Direct link to How it works")
60
+
61
+ Remote bridge creates a WebSocket bridge between your local Vite dev server and the deployed backend, allowing you to develop UI locally while using the deployed backend.
62
+
63
+ <!-- -->
64
+
65
+ ### Details[​](#details "Direct link to Details")
66
+
67
+ * The **Browser** connects to the deployed app backend with `?dev=true` or `?dev=<tunnelId>` query parameter
68
+ * The **Deployed Backend** proxies UI requests through a WebSocket tunnel (`/dev-tunnel`) to your local machine
69
+ * The **WebSocket Bridge** (running locally) receives fetch requests and file read requests from the backend
70
+ * The **Local Vite Dev Server** serves the UI files and provides hot module replacement (HMR)
71
+ * The bridge sends responses back through the WebSocket to the backend, which serves them to the browser
72
+
73
+ ### What gets hot-reloaded[​](#what-gets-hot-reloaded "Direct link to What gets hot-reloaded")
74
+
75
+ With remote bridge you get instant hot-reload for:
76
+
77
+ * **UI Changes** - Any changes to your React/TypeScript/CSS files in the `client/` directory
78
+ * **Query Files** - SQL files in the `config/queries/` directory (`.sql` files only)
79
+
80
+ Backend code is **not** hot-reloaded. You need to redeploy your app to see changes in the backend code.
package/docs/docs/development/type-generation/index.html ADDED
@@ -0,0 +1,65 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-development/type-generation" data-has-hydrated="false">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="generator" content="Docusaurus v3.9.2">
6
+ <title data-rh="true">Type generation | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/development/type-generation"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Type generation | AppKit"><meta data-rh="true" name="description" content="AppKit can automatically generate TypeScript types for your SQL queries, providing end-to-end type safety from database to UI."><meta data-rh="true" property="og:description" content="AppKit can automatically generate TypeScript types for your SQL queries, providing end-to-end type safety from database to UI."><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/development/type-generation"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/type-generation" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/development/type-generation" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Development","item":"https://databricks.github.io/appkit/docs/category/development"},{"@type":"ListItem","position":2,"name":"Type generation","item":"https://databricks.github.io/appkit/docs/development/type-generation"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.0ec7398f.css">
7
+ <script src="/appkit/assets/js/runtime~main.a874f05e.js" defer="defer"></script>
8
+ <script src="/appkit/assets/js/main.9d17da5a.js" defer="defer"></script>
9
+ </head>
10
+ <body class="navigation-with-keyboard">
11
+ <svg style="display: none;"><defs>
12
+ <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
+ </defs></svg>
14
+ <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/plugins"><span title="Plugins" class="linkLabel_hZzm">Plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Expand sidebar category &#x27;API reference&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/category/development"><span>Development</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Type generation</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Type generation</h1></header>
15
+ <p>AppKit can automatically generate TypeScript types for your SQL queries, providing end-to-end type safety from database to UI.</p>
16
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="goal">Goal<a href="#goal" class="hash-link" aria-label="Direct link to Goal" title="Direct link to Goal" translate="no">​</a></h2>
17
+ <p>Generate <code>client/src/appKitTypes.d.ts</code> so query keys, parameters, and result rows are type-safe.</p>
18
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="vite-plugin-appkittypesplugin">Vite plugin: <code>appKitTypesPlugin</code><a href="#vite-plugin-appkittypesplugin" class="hash-link" aria-label="Direct link to vite-plugin-appkittypesplugin" title="Direct link to vite-plugin-appkittypesplugin" translate="no">​</a></h2>
19
+ <p>The recommended approach is to use the Vite plugin, which watches your SQL files and regenerates types automatically during development.</p>
20
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="configuration">Configuration<a href="#configuration" class="hash-link" aria-label="Direct link to Configuration" title="Direct link to Configuration" translate="no">​</a></h3>
21
+ <ul>
22
+ <li class=""><code>outFile?: string</code> - Output file path (default: <code>src/appKitTypes.d.ts</code>)</li>
23
+ <li class=""><code>watchFolders?: string[]</code> - Folders to watch for SQL files (default: <code>[&quot;../config/queries&quot;]</code>)</li>
24
+ </ul>
25
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h3>
26
+ <div class="language-ts codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-ts codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token comment" style="color:rgb(0, 128, 0)">// client/vite.config.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"> defineConfig </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;vite&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> react </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@vitejs/plugin-react&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"> appKitTypesPlugin </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">default</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">defineConfig</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> plugins</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">react</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">appKitTypesPlugin</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> outFile</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;src/appKitTypes.d.ts&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> watchFolders</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token string" style="color:rgb(163, 21, 21)">&quot;../config/queries&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><br></span></code></pre></div></div>
27
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="important-nuance">Important nuance<a href="#important-nuance" class="hash-link" aria-label="Direct link to Important nuance" title="Direct link to Important nuance" translate="no">​</a></h3>
28
+ <p>When the frontend is served through AppKit in dev mode, AppKit&#x27;s dev server already includes <code>appKitTypesPlugin()</code> internally. You still want it in your client build pipeline if you run <code>vite build</code> separately.</p>
29
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="cli-npx-databricksappkit-generate-types">CLI: <code>npx @databricks/appkit generate-types</code><a href="#cli-npx-databricksappkit-generate-types" class="hash-link" aria-label="Direct link to cli-npx-databricksappkit-generate-types" title="Direct link to cli-npx-databricksappkit-generate-types" translate="no">​</a></h2>
30
+ <p>For manual type generation or CI/CD pipelines, use the CLI command:</p>
31
+ <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain"># Requires DATABRICKS_WAREHOUSE_ID (or pass as 3rd arg)</span><br></span><span class="token-line" style="color:#000000"><span class="token plain">npx @databricks/appkit generate-types [rootDir] [outFile] [warehouseId]</span><br></span></code></pre></div></div>
32
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="examples">Examples<a href="#examples" class="hash-link" aria-label="Direct link to Examples" title="Direct link to Examples" translate="no">​</a></h3>
33
+ <ul>
34
+ <li class="">
35
+ <p>Generate types using warehouse ID from environment</p>
36
+ <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">npx @databricks/appkit generate-types . client/src/appKitTypes.d.ts</span><br></span></code></pre></div></div>
37
+ </li>
38
+ <li class="">
39
+ <p>Generate types using warehouse ID explicitly</p>
40
+ <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">npx @databricks/appkit generate-types . client/src/appKitTypes.d.ts abc123...</span><br></span></code></pre></div></div>
41
+ </li>
42
+ <li class="">
43
+ <p>Force regeneration (skip cache)</p>
44
+ <div class="language-bash codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-bash codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token plain">npx @databricks/appkit generate-types --no-cache</span><br></span></code></pre></div></div>
45
+ </li>
46
+ </ul>
47
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="how-it-works">How it works<a href="#how-it-works" class="hash-link" aria-label="Direct link to How it works" title="Direct link to How it works" translate="no">​</a></h2>
48
+ <p>The type generator:</p>
49
+ <ol>
50
+ <li class="">Scans your <code>config/queries/</code> folder for <code>.sql</code> files</li>
51
+ <li class="">Parses SQL parameter annotations (e.g., <code>-- @param startDate DATE</code>)</li>
52
+ <li class="">Connects to your Databricks SQL Warehouse to infer result column types</li>
53
+ <li class="">Generates TypeScript interfaces for query parameters and results</li>
54
+ <li class="">Creates a <code>QueryRegistry</code> type for type-safe query execution</li>
55
+ </ol>
56
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="using-generated-types">Using generated types<a href="#using-generated-types" class="hash-link" aria-label="Direct link to Using generated types" title="Direct link to Using generated types" translate="no">​</a></h2>
57
+ <p>Once types are generated, your IDE will provide autocomplete and type checking:</p>
58
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> useAnalyticsQuery </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit-ui/react&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> sql </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit-ui/js&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token comment" style="color:rgb(0, 128, 0)">// TypeScript knows &quot;users_list&quot; is a valid query key</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token comment" style="color:rgb(0, 128, 0)">// and what parameters it expects</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"> data </span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">=</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">useAnalyticsQuery</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token string" style="color:rgb(163, 21, 21)">&quot;users_list&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> status</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> sql</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">string</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token string" style="color:rgb(163, 21, 21)">&quot;active&quot;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> limit</span><span class="token operator" style="color:rgb(0, 0, 0)">:</span><span class="token plain"> sql</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">number</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token number" style="color:rgb(9, 134, 88)">50</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token comment" style="color:rgb(0, 128, 0)">// TypeScript knows the shape of the result rows</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain">data</span><span class="token operator" style="color:rgb(0, 0, 0)">?.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">forEach</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain">row </span><span class="token arrow operator" style="color:rgb(0, 0, 0)">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token console class-name" style="color:rgb(38, 127, 153)">console</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token method function property-access" style="color:rgb(0, 0, 255)">log</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain">row</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token property-access">email</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">// ✓ autocomplete works</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><br></span></code></pre></div></div>
59
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="see-also">See also<a href="#see-also" class="hash-link" aria-label="Direct link to See also" title="Direct link to See also" translate="no">​</a></h2>
60
+ <ul>
61
+ <li class=""><a class="" href="/appkit/docs/plugins">Plugins</a> - Analytics plugin configuration</li>
62
+ <li class=""><a class="" href="/appkit/docs/api/appkit-ui">API Reference</a> - Complete UI components API documentation</li>
63
+ </ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/development/type-generation.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/development/project-setup"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Project setup</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/development/llm-guide"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">LLM Guide</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#goal" class="table-of-contents__link toc-highlight">Goal</a></li><li><a href="#vite-plugin-appkittypesplugin" class="table-of-contents__link toc-highlight">Vite plugin: <code>appKitTypesPlugin</code></a><ul><li><a href="#configuration" class="table-of-contents__link toc-highlight">Configuration</a></li><li><a href="#example" class="table-of-contents__link toc-highlight">Example</a></li><li><a href="#important-nuance" class="table-of-contents__link toc-highlight">Important nuance</a></li></ul></li><li><a href="#cli-npx-databricksappkit-generate-types" class="table-of-contents__link toc-highlight">CLI: <code>npx @databricks/appkit generate-types</code></a><ul><li><a href="#examples" class="table-of-contents__link toc-highlight">Examples</a></li></ul></li><li><a href="#how-it-works" class="table-of-contents__link toc-highlight">How it works</a></li><li><a href="#using-generated-types" class="table-of-contents__link toc-highlight">Using generated types</a></li><li><a href="#see-also" class="table-of-contents__link toc-highlight">See also</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
64
+ </body>
65
+ </html>
package/docs/docs/development/type-generation.md ADDED
@@ -0,0 +1,110 @@
1
+ # Type generation
2
+
3
+ AppKit can automatically generate TypeScript types for your SQL queries, providing end-to-end type safety from database to UI.
4
+
5
+ ## Goal[​](#goal "Direct link to Goal")
6
+
7
+ Generate `client/src/appKitTypes.d.ts` so query keys, parameters, and result rows are type-safe.
8
+
9
+ ## Vite plugin: `appKitTypesPlugin`[​](#vite-plugin-appkittypesplugin "Direct link to vite-plugin-appkittypesplugin")
10
+
11
+ The recommended approach is to use the Vite plugin, which watches your SQL files and regenerates types automatically during development.
12
+
13
+ ### Configuration[​](#configuration "Direct link to Configuration")
14
+
15
+ * `outFile?: string` - Output file path (default: `src/appKitTypes.d.ts`)
16
+ * `watchFolders?: string[]` - Folders to watch for SQL files (default: `["../config/queries"]`)
17
+
18
+ ### Example[​](#example "Direct link to Example")
19
+
20
+ ```ts
21
+ // client/vite.config.ts
22
+ import { defineConfig } from "vite";
23
+ import react from "@vitejs/plugin-react";
24
+ import { appKitTypesPlugin } from "@databricks/appkit";
25
+
26
+ export default defineConfig({
27
+ plugins: [
28
+ react(),
29
+ appKitTypesPlugin({
30
+ outFile: "src/appKitTypes.d.ts",
31
+ watchFolders: ["../config/queries"],
32
+ }),
33
+ ],
34
+ });
35
+
36
+ ```
37
+
38
+ ### Important nuance[​](#important-nuance "Direct link to Important nuance")
39
+
40
+ When the frontend is served through AppKit in dev mode, AppKit's dev server already includes `appKitTypesPlugin()` internally. You still want it in your client build pipeline if you run `vite build` separately.
41
+
42
+ ## CLI: `npx @databricks/appkit generate-types`[​](#cli-npx-databricksappkit-generate-types "Direct link to cli-npx-databricksappkit-generate-types")
43
+
44
+ For manual type generation or CI/CD pipelines, use the CLI command:
45
+
46
+ ```bash
47
+ # Requires DATABRICKS_WAREHOUSE_ID (or pass as 3rd arg)
48
+ npx @databricks/appkit generate-types [rootDir] [outFile] [warehouseId]
49
+
50
+ ```
51
+
52
+ ### Examples[​](#examples "Direct link to Examples")
53
+
54
+ * Generate types using warehouse ID from environment
55
+
56
+ ```bash
57
+ npx @databricks/appkit generate-types . client/src/appKitTypes.d.ts
58
+
59
+ ```
60
+
61
+ * Generate types using warehouse ID explicitly
62
+
63
+ ```bash
64
+ npx @databricks/appkit generate-types . client/src/appKitTypes.d.ts abc123...
65
+
66
+ ```
67
+
68
+ * Force regeneration (skip cache)
69
+
70
+ ```bash
71
+ npx @databricks/appkit generate-types --no-cache
72
+
73
+ ```
74
+
75
+ ## How it works[​](#how-it-works "Direct link to How it works")
76
+
77
+ The type generator:
78
+
79
+ 1. Scans your `config/queries/` folder for `.sql` files
80
+ 2. Parses SQL parameter annotations (e.g., `-- @param startDate DATE`)
81
+ 3. Connects to your Databricks SQL Warehouse to infer result column types
82
+ 4. Generates TypeScript interfaces for query parameters and results
83
+ 5. Creates a `QueryRegistry` type for type-safe query execution
84
+
85
+ ## Using generated types[​](#using-generated-types "Direct link to Using generated types")
86
+
87
+ Once types are generated, your IDE will provide autocomplete and type checking:
88
+
89
+ ```tsx
90
+ import { useAnalyticsQuery } from "@databricks/appkit-ui/react";
91
+ import { sql } from "@databricks/appkit-ui/js";
92
+
93
+ // TypeScript knows "users_list" is a valid query key
94
+ // and what parameters it expects
95
+ const { data } = useAnalyticsQuery("users_list", {
96
+ status: sql.string("active"),
97
+ limit: sql.number(50),
98
+ });
99
+
100
+ // TypeScript knows the shape of the result rows
101
+ data?.forEach(row => {
102
+ console.log(row.email); // ✓ autocomplete works
103
+ });
104
+
105
+ ```
106
+
107
+ ## See also[​](#see-also "Direct link to See also")
108
+
109
+ * [Plugins](/appkit/docs/plugins.md) - Analytics plugin configuration
110
+ * [API Reference](/appkit/docs/api/appkit-ui.md) - Complete UI components API documentation
package/docs/docs/development.md ADDED
@@ -0,0 +1,21 @@
1
+ # Development
2
+
3
+ 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.
4
+
5
+ ## Prerequisites[​](#prerequisites "Direct link to Prerequisites")
6
+
7
+ * [Node.js](https://nodejs.org) environment
8
+ * Databricks CLI: install and configure it according to the [official tutorial](https://docs.databricks.com/aws/en/dev-tools/cli/tutorial).
9
+ * A new Databricks app with AppKit installed. See [Bootstrap a new Databricks app](/appkit/docs.md) for more details.
10
+
11
+ ## Development flows[​](#development-flows "Direct link to Development flows")
12
+
13
+ There are multiple supported development flows available with AppKit:
14
+
15
+ 1. **[Local development](/appkit/docs/development/local-development.md)**: Run the development server with hot reload for both UI and backend code. This is the default development flow and is suitable for most use cases.
16
+ 2. **[Remote Bridge](/appkit/docs/development/remote-bridge.md)**: Create a remote bridge to a deployed backend while keeping your queries and UI local. This is useful for testing against production data or debugging deployed backend code without redeploying your app.
17
+
18
+ ## See also[​](#see-also "Direct link to See also")
19
+
20
+ * [App management](/appkit/docs/app-management.md): Manage your AppKit application throughout its lifecycle using the Databricks CLI
21
+ * [Architecture](/appkit/docs/architecture.md): Learn about the architecture of AppKit