Model Serving integration - all in one

.gitignore

@@ -9,3 +9,6 @@ coverage
 *.tsbuildinfo
 
 .turbo
+
+# AppKit type generator caches
+.databricks

apps/dev-playground/.env.dist

@@ -9,6 +9,7 @@ OTEL_SERVICE_NAME='dev-playground'
 DATABRICKS_VOLUME_PLAYGROUND=
 DATABRICKS_VOLUME_OTHER=
 DATABRICKS_GENIE_SPACE_ID=
+DATABRICKS_SERVING_ENDPOINT_NAME=
 LAKEBASE_ENDPOINT='' # Run: databricks postgres list-endpoints projects/{project-id}/branches/{branch-id} — use the `name` field from the output
 PGHOST=
 PGUSER=

apps/dev-playground/client/.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# Auto-generated types (endpoint-specific, varies per developer)
+src/appKitServingTypes.d.ts
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

apps/dev-playground/client/src/appKitServingTypes.d.ts

@@ -0,0 +1,114 @@
+// Auto-generated by AppKit - DO NOT EDIT
+// Generated from serving endpoint OpenAPI schemas
+import "@databricks/appkit";
+import "@databricks/appkit-ui/react";
+
+declare module "@databricks/appkit" {
+  interface ServingEndpointRegistry {
+    default: {
+      request: {
+        messages?: {
+          role?: "user" | "assistant";
+          content?: string;
+        }[];
+        /** @openapi integer, nullable */
+        n?: number | null;
+        max_tokens?: number;
+        /** @openapi double, nullable */
+        top_p?: number | null;
+        reasoning_effort?: "low" | "medium" | "high" | null;
+        /** @openapi double, nullable */
+        temperature?: number | null;
+        stop?: string | string[] | null;
+      };
+      response: {
+        model?: string;
+        choices?: {
+          index?: number;
+          message?: {
+            role?: "user" | "assistant";
+            content?: string;
+          };
+          finish_reason?: string;
+        }[];
+        usage?: {
+          prompt_tokens?: number;
+          completion_tokens?: number;
+          total_tokens?: number;
+        } | null;
+        object?: string;
+        id?: string;
+        created?: number;
+      };
+      chunk: {
+        model?: string;
+        choices?: {
+          index?: number;
+          delta?: {
+            role?: "user" | "assistant";
+            content?: string;
+          };
+          finish_reason?: string | null;
+        }[];
+        object?: string;
+        id?: string;
+        created?: number;
+      };
+    };
+  }
+}
+
+declare module "@databricks/appkit-ui/react" {
+  interface ServingEndpointRegistry {
+    default: {
+      request: {
+        messages?: {
+          role?: "user" | "assistant";
+          content?: string;
+        }[];
+        /** @openapi integer, nullable */
+        n?: number | null;
+        max_tokens?: number;
+        /** @openapi double, nullable */
+        top_p?: number | null;
+        reasoning_effort?: "low" | "medium" | "high" | null;
+        /** @openapi double, nullable */
+        temperature?: number | null;
+        stop?: string | string[] | null;
+      };
+      response: {
+        model?: string;
+        choices?: {
+          index?: number;
+          message?: {
+            role?: "user" | "assistant";
+            content?: string;
+          };
+          finish_reason?: string;
+        }[];
+        usage?: {
+          prompt_tokens?: number;
+          completion_tokens?: number;
+          total_tokens?: number;
+        } | null;
+        object?: string;
+        id?: string;
+        created?: number;
+      };
+      chunk: {
+        model?: string;
+        choices?: {
+          index?: number;
+          delta?: {
+            role?: "user" | "assistant";
+            content?: string;
+          };
+          finish_reason?: string | null;
+        }[];
+        object?: string;
+        id?: string;
+        created?: number;
+      };
+    };
+  }
+}

apps/dev-playground/client/src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as TypeSafetyRouteRouteImport } from './routes/type-safety.route'
 import { Route as TelemetryRouteRouteImport } from './routes/telemetry.route'
 import { Route as SqlHelpersRouteRouteImport } from './routes/sql-helpers.route'
+import { Route as ServingRouteRouteImport } from './routes/serving.route'
 import { Route as ReconnectRouteRouteImport } from './routes/reconnect.route'
 import { Route as LakebaseRouteRouteImport } from './routes/lakebase.route'
 import { Route as GenieRouteRouteImport } from './routes/genie.route'
@@ -37,6 +38,11 @@ const SqlHelpersRouteRoute = SqlHelpersRouteRouteImport.update({
   path: '/sql-helpers',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ServingRouteRoute = ServingRouteRouteImport.update({
+  id: '/serving',
+  path: '/serving',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const ReconnectRouteRoute = ReconnectRouteRouteImport.update({
   id: '/reconnect',
   path: '/reconnect',
@@ -93,6 +99,7 @@ export interface FileRoutesByFullPath {
   '/genie': typeof GenieRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
+  '/serving': typeof ServingRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
   '/type-safety': typeof TypeSafetyRouteRoute
@@ -107,6 +114,7 @@ export interface FileRoutesByTo {
   '/genie': typeof GenieRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
+  '/serving': typeof ServingRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
   '/type-safety': typeof TypeSafetyRouteRoute
@@ -122,6 +130,7 @@ export interface FileRoutesById {
   '/genie': typeof GenieRouteRoute
   '/lakebase': typeof LakebaseRouteRoute
   '/reconnect': typeof ReconnectRouteRoute
+  '/serving': typeof ServingRouteRoute
   '/sql-helpers': typeof SqlHelpersRouteRoute
   '/telemetry': typeof TelemetryRouteRoute
   '/type-safety': typeof TypeSafetyRouteRoute
@@ -138,6 +147,7 @@ export interface FileRouteTypes {
     | '/genie'
     | '/lakebase'
     | '/reconnect'
+    | '/serving'
     | '/sql-helpers'
     | '/telemetry'
     | '/type-safety'
@@ -152,6 +162,7 @@ export interface FileRouteTypes {
     | '/genie'
     | '/lakebase'
     | '/reconnect'
+    | '/serving'
     | '/sql-helpers'
     | '/telemetry'
     | '/type-safety'
@@ -166,6 +177,7 @@ export interface FileRouteTypes {
     | '/genie'
     | '/lakebase'
     | '/reconnect'
+    | '/serving'
     | '/sql-helpers'
     | '/telemetry'
     | '/type-safety'
@@ -181,6 +193,7 @@ export interface RootRouteChildren {
   GenieRouteRoute: typeof GenieRouteRoute
   LakebaseRouteRoute: typeof LakebaseRouteRoute
   ReconnectRouteRoute: typeof ReconnectRouteRoute
+  ServingRouteRoute: typeof ServingRouteRoute
   SqlHelpersRouteRoute: typeof SqlHelpersRouteRoute
   TelemetryRouteRoute: typeof TelemetryRouteRoute
   TypeSafetyRouteRoute: typeof TypeSafetyRouteRoute
@@ -209,6 +222,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SqlHelpersRouteRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/serving': {
+      id: '/serving'
+      path: '/serving'
+      fullPath: '/serving'
+      preLoaderRoute: typeof ServingRouteRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/reconnect': {
       id: '/reconnect'
       path: '/reconnect'
@@ -285,6 +305,7 @@ const rootRouteChildren: RootRouteChildren = {
   GenieRouteRoute: GenieRouteRoute,
   LakebaseRouteRoute: LakebaseRouteRoute,
   ReconnectRouteRoute: ReconnectRouteRoute,
+  ServingRouteRoute: ServingRouteRoute,
   SqlHelpersRouteRoute: SqlHelpersRouteRoute,
   TelemetryRouteRoute: TelemetryRouteRoute,
   TypeSafetyRouteRoute: TypeSafetyRouteRoute,

apps/dev-playground/client/src/routes/__root.tsx

@@ -104,6 +104,14 @@ function RootComponent() {
                     Files
                   </Button>
                 </Link>
+                <Link to="/serving" className="no-underline">
+                  <Button
+                    variant="ghost"
+                    className="text-foreground hover:text-secondary-foreground"
+                  >
+                    Serving
+                  </Button>
+                </Link>
                 <ThemeSelector />
               </div>
             </nav>

apps/dev-playground/client/src/routes/index.tsx

@@ -218,6 +218,24 @@ function IndexRoute() {
               </Button>
             </div>
           </Card>
+
+          <Card className="p-6 hover:shadow-lg transition-shadow cursor-pointer">
+            <div className="flex flex-col h-full">
+              <h3 className="text-2xl font-semibold text-foreground mb-3">
+                Model Serving
+              </h3>
+              <p className="text-muted-foreground mb-6 flex-grow">
+                Chat with a Databricks Model Serving endpoint using streaming
+                completions with real-time SSE responses.
+              </p>
+              <Button
+                onClick={() => navigate({ to: "/serving" })}
+                className="w-full"
+              >
+                Try Model Serving
+              </Button>
+            </div>
+          </Card>
         </div>
 
         <div className="text-center pt-12 border-t border-border">