Skip to content

Commit 31036ac

Browse files
hubertzub-dbhubertzub-db
committed
UI
Signed-off-by: Hubert Zub <hubert.zub@databricks.com>
1 parent b074ca7 commit 31036ac

File tree

141 files changed

+15523
-1321
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

141 files changed

+15523
-1321
lines changed

‎integrations/appkit-agent/README.md‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ const app = await createApp({
4848
});
4949
```
5050

51-
### Agent + Chat
51+
### Agent + Chat with bundled UI
5252

5353
```typescript
5454
import { createApp, server } from "@databricks/appkit";
5555
import { agent, chat } from "@databricks/appkit-agent";
5656

5757
await createApp({
5858
plugins: [
59-
server({ autoStart: true }),
59+
server({ autoStart: true, staticPath: chat.staticAssetsPath }),
6060
agent({
6161
model: "databricks-claude-sonnet-4-5",
6262
systemPrompt: "You are a helpful assistant.",
@@ -68,7 +68,7 @@ await createApp({
6868
});
6969
```
7070

71-
The agent plugin registers `POST /api/agent` (OpenAI Responses API format with SSE streaming). The chat plugin registers routes under `/api/chat/` for streaming chat, history, feedback, and more.
71+
This starts a server with the agent backend, chat API, and a pre-built chat UI served at `/`. The agent plugin registers `POST /api/agent` (OpenAI Responses API format with SSE streaming). The chat plugin registers routes under `/api/chat/` for streaming chat, history, feedback, and more.
7272

7373
## Environment Variables
7474

@@ -319,6 +319,20 @@ All routes are mounted under `/api/chat/`.
319319
| `DELETE` | `/:id` | required+ACL | Delete a chat |
320320
| `POST` | `/` | required | Main chat handler (streaming) |
321321

322+
## Bundled Chat UI
323+
324+
The package includes a pre-built React chat application in `dist/chat-client/`. It provides a full-featured chat experience with conversation history sidebar, message editing, code syntax highlighting, MCP tool approval, file attachments, reasoning display, and theme toggle.
325+
326+
### Serving the UI
327+
328+
Pass `chat.staticAssetsPath` to the server plugin's `staticPath` option:
329+
330+
```typescript
331+
server({ staticPath: chat.staticAssetsPath })
332+
```
333+
334+
The chat UI communicates with the chat plugin's `/api/chat/` endpoints automatically. No additional configuration is needed.
335+
322336
## API Reference
323337

324338
### Exports
@@ -339,6 +353,7 @@ All routes are mounted under `/api/chat/`.
339353
| --------------------- | ------------------------------------------------------------- |
340354
| `IAgentConfig` | Agent plugin configuration options |
341355
| `ChatConfig` | Chat plugin configuration options |
356+
| `ChatBackend` | Backend target: plugin name, `{ proxy }`, or `{ endpoint }` |
342357
| `ChatSession` | Session object with user info |
343358
| `GetSession` | Custom session resolver function type |
344359
| `AgentInterface` | Contract for custom agent implementations |

‎integrations/appkit-agent/client/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
7+
<meta name="theme-color" content="hsl(0 0% 100%)" id="theme-color-meta" />
8+
<title>Databricks Chat</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
</head>
12+
<body class="antialiased">
13+
<div id="root"></div>
14+
<script type="module" src="/src/main.tsx"></script>
15+
</body>
16+
</html>

‎integrations/appkit-agent/client/package.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "@databricks/chat-client",
3+
"version": "0.1.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"browser": {
12+
"child_process": false,
13+
"crypto": false,
14+
"fs": false,
15+
"fs/promises": false,
16+
"path": false,
17+
"url": false,
18+
"vm": false,
19+
"ws": false
20+
},
21+
"dependencies": {
22+
"@ai-sdk/react": "^3.0.59",
23+
"@radix-ui/react-alert-dialog": "^1.1.2",
24+
"@radix-ui/react-collapsible": "^1.1.12",
25+
"@radix-ui/react-dialog": "^1.1.2",
26+
"@radix-ui/react-dropdown-menu": "^2.1.2",
27+
"@radix-ui/react-separator": "^1.1.0",
28+
"@radix-ui/react-slot": "^1.1.2",
29+
"@radix-ui/react-tooltip": "^1.1.3",
30+
"@radix-ui/react-use-controllable-state": "^1.2.2",
31+
"ai": "^6.0.70",
32+
"class-variance-authority": "^0.7.0",
33+
"clsx": "^2.1.1",
34+
"date-fns": "^4.1.0",
35+
"fast-deep-equal": "^3.1.3",
36+
"framer-motion": "^11.3.19",
37+
"lucide-react": "^0.446.0",
38+
"next-themes": "^0.4.6",
39+
"react": "^18.2.0",
40+
"react-dom": "^18.2.0",
41+
"react-router-dom": "^6.22.0",
42+
"react-syntax-highlighter": "^15.6.6",
43+
"sonner": "^1.5.0",
44+
"streamdown": "^1.4.0",
45+
"swr": "^2.2.5",
46+
"tailwind-merge": "^2.5.2",
47+
"use-stick-to-bottom": "^1.1.1",
48+
"usehooks-ts": "^3.1.0",
49+
"zod": "^4.3.5"
50+
},
51+
"devDependencies": {
52+
"@tailwindcss/postcss": "^4.1.13",
53+
"@tailwindcss/typography": "^0.5.19",
54+
"@types/react": "^18",
55+
"@types/react-dom": "^18",
56+
"@types/react-syntax-highlighter": "^15.5.13",
57+
"@vitejs/plugin-react": "^4.2.1",
58+
"postcss": "^8",
59+
"tailwindcss": "^4.1.13",
60+
"tailwindcss-animate": "^1.0.7",
61+
"typescript": "^5.9.3",
62+
"vite": "npm:rolldown-vite@latest"
63+
}
64+
}

0 commit comments

Comments
 (0)