Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 123 additions & 46 deletions llms.txt
Original file line number Diff line number Diff line change
Expand Up @@ -75,46 +75,24 @@ Why this layout:
"dev": "NODE_ENV=development tsx watch server/index.ts",
"build": "npm run build:server && npm run build:client",
"build:server": "tsdown --out-dir build server/index.ts",
"build:client": "cd client && npm run build",
"build:client": "tsc -b && vite build --config client/vite.config.ts",
"start": "node build/index.mjs"
},
"dependencies": {
"@databricks/appkit": "^0.0.2"
"@databricks/appkit": "^0.1.2"
"@databricks/appkit-ui": "^0.1.2",
"react": "^19.2.3",
"react-dom": "^19.2.3"
},
"devDependencies": {
"@types/node": "^20.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^5.1.1",
"tsdown": "^0.15.7",
"tsx": "^4.19.0",
"typescript": "~5.6.0"
}
}
```

### `client/package.json`

```json
{
"name": "client",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@databricks/appkit-ui": "^0.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"recharts": "^3.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^5.0.0",
"typescript": "~5.6.0",
"vite": "^6.0.0"
"vite": "^7.2.4"
}
}
```
Expand Down Expand Up @@ -208,7 +186,6 @@ await createApp({
```bash
# Install dependencies
npm install
cd client && npm install && cd ..

# Development (starts backend + Vite dev server)
npm run dev
Expand All @@ -225,19 +202,14 @@ If you already have a React/Vite app and want to add AppKit:
### 1. Install dependencies

```bash
npm install @databricks/appkit
npm install -D tsx tsdown
npm install @databricks/appkit @databricks/appkit-ui react react-dom
npm install -D tsx tsdown vite @vitejs/plugin-react typescript

# If you don't already have a client/ folder, create one and move your Vite app into it:
# - move index.html -> client/index.html
# - move vite.config.ts -> client/vite.config.ts
# - move src/ -> client/src/
#
# Then install client deps:
cd client
npm install @databricks/appkit-ui react react-dom recharts
npm install -D vite @vitejs/plugin-react typescript
cd ..
```

### 2. Create `server/index.ts` (new file)
Expand All @@ -258,7 +230,7 @@ await createApp({
"dev": "NODE_ENV=development tsx watch server/index.ts",
"build": "npm run build:server && npm run build:client",
"build:server": "tsdown --out-dir build server/index.ts",
"build:client": "cd client && npm run build",
"build:client": "tsc -b && vite build --config client/vite.config.ts",
"start": "node build/index.mjs"
}
}
Expand All @@ -276,7 +248,7 @@ await createApp({
import { createApp, server, analytics } from "@databricks/appkit";

await createApp({
plugins: [server(), analytics({})],
plugins: [server(), analytics()],
});
```

Expand Down Expand Up @@ -312,13 +284,17 @@ These are typically **provided by Databricks Apps runtime** (exact set can vary

For local development, you need to authenticate with Databricks. Options:

**Option 1: Databricks CLI profile (recommended)**
**Option 1: Databricks CLI Auth (recommended)**

```bash
# Configure once
databricks configure --profile my-profile
databricks auth login --host [host] --profile [profile-name]

# If you used `DEFAULT` as the profile name then you can just run

# Then run with profile
`npm run dev`

# To run with a specific profile
DATABRICKS_CONFIG_PROFILE=my-profile npm run dev
# If your Databricks SDK expects a different variable name, try:
# DATABRICKS_PROFILE=my-profile npm run dev
Expand Down Expand Up @@ -462,7 +438,7 @@ HTTP endpoints exposed (mounted under `/api/analytics`):
Formats:

- `format: "JSON"` (default) returns JSON rows
- `format: "ARROW"` returns an Arrow “external links” payload over SSE, then the client fetches binary Arrow from `/api/analytics/arrow-result/:jobId`
- `format: "ARROW"` returns an Arrow “statement_id” payload over SSE, then the client fetches binary Arrow from `/api/analytics/arrow-result/:jobId`

### Request context (`getRequestContext()`)

Expand Down Expand Up @@ -980,6 +956,108 @@ function LoadingCard() {
}
```

## Stylesheet

In the main css file import the following

```css
@import "@databricks/appkit-ui/styles.css";
```

That will provide a default theme for the app using css variables.

### Customizing theme (light/dark mode)

- Full list of variables to customize the theme.

```css
@import "@databricks/appkit-ui/styles.css";

:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.141 0.005 285.823);
--card: oklch(1 0 0);
--card-foreground: oklch(0.141 0.005 285.823);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.141 0.005 285.823);
--primary: oklch(0.21 0.006 285.885);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.967 0.001 286.375);
--muted-foreground: oklch(0.552 0.016 285.938);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.603 0.135 166.892);
--success-foreground: oklch(1 0 0);
--warning: oklch(0.795 0.157 78.748);
--warning-foreground: oklch(0.199 0.027 238.732);
--border: oklch(0.92 0.004 286.32);
--input: oklch(0.92 0.004 286.32);
--ring: oklch(0.705 0.015 286.067);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.141 0.005 285.823);
--sidebar-primary: oklch(0.21 0.006 285.885);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.967 0.001 286.375);
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
--sidebar-border: oklch(0.92 0.004 286.32);
--sidebar-ring: oklch(0.705 0.015 286.067);
}

@media (prefers-color-scheme: dark) {
:root {
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.985 0 0);
--card: oklch(0.21 0.006 285.885);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.21 0.006 285.885);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.92 0.004 286.32);
--primary-foreground: oklch(0.21 0.006 285.885);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.274 0.006 286.033);
--muted-foreground: oklch(0.705 0.015 286.067);
--accent: oklch(0.274 0.006 286.033);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.67 0.12 167);
--success-foreground: oklch(1 0 0);
--warning: oklch(0.83 0.165 85);
--warning-foreground: oklch(0.199 0.027 238.732);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.552 0.016 285.938);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.21 0.006 285.885);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.274 0.006 286.033);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.552 0.016 285.938);
}
}

```

- If any variable is changed, it must be changed for both light and dark mode.

## Type generation (QueryRegistry + IntelliSense)

Goal: generate `client/src/appKitTypes.d.ts` so query keys, params, and result rows are type-safe.
Expand Down Expand Up @@ -1054,7 +1132,6 @@ env:
- `tsx` is in devDependencies for dev server
- `dev` script uses `NODE_ENV=development tsx watch server/index.ts`
- `client/index.html` exists with `<div id="root"></div>` and script pointing to `client/src/main.tsx`
- `client/package.json` exists and includes `@databricks/appkit-ui`

- **Backend**
- `await createApp({ plugins: [...] })` is used (or `void createApp` with intent)
Expand Down
3 changes: 0 additions & 3 deletions packages/appkit-ui/CLAUDE.md

This file was deleted.

3 changes: 2 additions & 1 deletion packages/appkit-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"bin",
"scripts",
"CLAUDE.md",
"AGENTS.md",
"llms.txt",
"README.md",
"DCO",
Expand All @@ -38,7 +39,7 @@
"clean:full": "rm -rf dist node_modules tmp",
"clean": "rm -rf dist tmp",
"dist": "tsx ../../tools/dist.ts",
"tarball": "tsx ../../tools/dist.ts && npm pack ./tmp --pack-destination ./tmp",
"tarball": "rm -rf tmp && tsx ../../tools/dist.ts && npm pack ./tmp --pack-destination ./tmp",
"typecheck": "tsc --noEmit"
},
"dependencies": {
Expand Down
3 changes: 0 additions & 3 deletions packages/appkit/CLAUDE.md

This file was deleted.

3 changes: 2 additions & 1 deletion packages/appkit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"scripts",
"CLAUDE.md",
"llms.txt",
"AGENTS.md",
"README.md",
"DCO",
"NOTICE.md"
Expand All @@ -35,7 +36,7 @@
"clean:full": "rm -rf dist node_modules tmp",
"clean": "rm -rf dist tmp",
"dist": "tsx ../../tools/dist.ts",
"tarball": "tsx ../../tools/dist.ts && npm pack ./tmp --pack-destination ./tmp",
"tarball": "rm -rf tmp && tsx ../../tools/dist.ts && npm pack ./tmp --pack-destination ./tmp",
"typecheck": "tsc --noEmit"
},
"dependencies": {
Expand Down
2 changes: 1 addition & 1 deletion packages/shared/bin/setup-claude.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function findInstalledPackages() {
const installed = [];

for (const pkg of PACKAGES) {
const claudePath = path.join(cwd, "node_modules", pkg.name, "CLAUDE.md");
const claudePath = path.join(cwd, "node_modules", pkg.name, "package.json");
if (fs.existsSync(claudePath)) {
installed.push(pkg);
}
Expand Down
Loading