chore(ui): add npm package and dockerfile (#4100)

# What does this PR do?
- sets up package.json for npm `llama-stack-ui` package (will update
llama-stack-ops)
- adds dockerfile for UI docker image

## Test Plan
npx:
npm build && npm pack
LLAMA_STACK_UI_PORT=8322 npx
/Users/erichuang/projects/ui/src/llama_stack_ui/llama-stack-ui-0.4.0-alpha.2.tgz

docker:
cd src/llama_stack_ui
docker build . -f Dockerfile  --tag test_ui --no-cache

❯ docker run -p 8322:8322 \
      -e LLAMA_STACK_UI_PORT=8322 \
      test_ui:latest

src/llama_stack_ui/.dockerignore

@@ -0,0 +1,20 @@
+.git
+.gitignore
+.env.local
+.env.*.local
+.next
+node_modules
+npm-debug.log
+*.md
+.DS_Store
+.vscode
+.idea
+playwright-report
+e2e
+jest.config.ts
+jest.setup.ts
+eslint.config.mjs
+.prettierrc
+.prettierignore
+.nvmrc
+playwright.config.ts

src/llama_stack_ui/Containerfile

@@ -0,0 +1,18 @@
+FROM node:22.5.1-alpine
+
+ENV NODE_ENV=production
+
+# Install dumb-init for proper signal handling
+RUN apk add --no-cache dumb-init
+
+# Create non-root user for security
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Install llama-stack-ui from npm
+RUN npm install -g llama-stack-ui
+
+USER nextjs
+
+ENTRYPOINT ["dumb-init", "--"]
+CMD ["llama-stack-ui"]

src/llama_stack_ui/bin/cli.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+const port = process.env.LLAMA_STACK_UI_PORT || 8322;
+const uiDir = path.resolve(__dirname, '..');
+const serverPath = path.join(uiDir, '.next', 'standalone', 'ui', 'src', 'llama_stack_ui', 'server.js');
+const serverDir = path.dirname(serverPath);
+
+console.log(`Starting Llama Stack UI on http://localhost:${port}`);
+
+const child = spawn(process.execPath, [serverPath], {
+  cwd: serverDir,
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    PORT: port,
+  },
+});
+
+process.on('SIGINT', () => {
+  child.kill('SIGINT');
+  process.exit(0);
+});
+
+process.on('SIGTERM', () => {
+  child.kill('SIGTERM');
+  process.exit(0);
+});
+
+child.on('exit', (code) => {
+  process.exit(code);
+});

src/llama_stack_ui/next.config.ts

@@ -1,7 +1,13 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  output: "standalone",
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;

src/llama_stack_ui/package-lock.json

@@ -1,12 +1,13 @@
 {
-  "name": "ui",
-  "version": "0.1.0",
+  "name": "llama-stack-ui",
+  "version": "0.4.0-alpha.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ui",
-      "version": "0.1.0",
+      "name": "llama-stack-ui",
+      "version": "0.4.0-alpha.1",
+      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-collapsible": "^1.1.12",
         "@radix-ui/react-dialog": "^1.1.15",
@@ -20,7 +21,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "framer-motion": "^12.23.24",
-        "llama-stack-client": "github:llamastack/llama-stack-client-typescript",
+        "llama-stack-client": "^0.3.1",
         "lucide-react": "^0.545.0",
         "next": "15.5.4",
         "next-auth": "^4.24.11",
@@ -9684,8 +9685,9 @@
       "license": "MIT"
     },
     "node_modules/llama-stack-client": {
-      "version": "0.4.0-alpha.1",
-      "resolved": "git+ssh://git@github.com/llamastack/llama-stack-client-typescript.git#78de4862c4b7d77939ac210fa9f9bde77a2c5c5f",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/llama-stack-client/-/llama-stack-client-0.3.1.tgz",
+      "integrity": "sha512-4aYoF2aAQiBSfxyZEtczeQmJn8q9T22ePDqGhR+ej5RG6a8wvl5B3v7ZoKuFkft+vcP/kbJ58GQZEPLekxekZA==",
       "license": "MIT",
       "dependencies": {
         "@types/node": "^18.11.18",

src/llama_stack_ui/package.json

@@ -1,11 +1,31 @@
 {
-  "name": "ui",
-  "version": "0.1.0",
-  "private": true,
+  "name": "llama-stack-ui",
+  "version": "0.4.0-alpha.4",
+  "description": "Web UI for Llama Stack",
+  "license": "MIT",
+  "author": "Llama Stack <llamastack@meta.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/llamastack/llama-stack.git",
+    "directory": "llama_stack_ui"
+  },
+  "bin": {
+    "llama-stack-ui": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    ".next",
+    "public",
+    "next.config.ts",
+    "instrumentation.ts",
+    "tsconfig.json",
+    "package.json"
+  ],
   "scripts": {
     "dev": "next dev --turbopack --port ${LLAMA_STACK_UI_PORT:-8322}",
-    "build": "next build",
+    "build": "next build && node scripts/postbuild.js",
     "start": "next start",
+    "prepublishOnly": "npm run build",
     "lint": "next lint",
     "format": "prettier --write \"./**/*.{ts,tsx}\"",
     "format:check": "prettier --check \"./**/*.{ts,tsx}\"",
@@ -25,7 +45,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
-    "llama-stack-client": "github:llamastack/llama-stack-client-typescript",
+    "llama-stack-client": "^0.3.1",
     "lucide-react": "^0.545.0",
     "next": "15.5.4",
     "next-auth": "^4.24.11",

src/llama_stack_ui/scripts/postbuild.js

@@ -0,0 +1,40 @@
+const fs = require('fs');
+const path = require('path');
+
+// Copy public directory to standalone
+const publicSrc = path.join(__dirname, '..', 'public');
+const publicDest = path.join(__dirname, '..', '.next', 'standalone', 'ui', 'src', 'llama_stack_ui', 'public');
+
+if (fs.existsSync(publicSrc) && !fs.existsSync(publicDest)) {
+  console.log('Copying public directory to standalone...');
+  copyDir(publicSrc, publicDest);
+}
+
+// Copy .next/static to standalone
+const staticSrc = path.join(__dirname, '..', '.next', 'static');
+const staticDest = path.join(__dirname, '..', '.next', 'standalone', 'ui', 'src', 'llama_stack_ui', '.next', 'static');
+
+if (fs.existsSync(staticSrc) && !fs.existsSync(staticDest)) {
+  console.log('Copying .next/static to standalone...');
+  copyDir(staticSrc, staticDest);
+}
+
+function copyDir(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const files = fs.readdirSync(src);
+  files.forEach((file) => {
+    const srcFile = path.join(src, file);
+    const destFile = path.join(dest, file);
+
+    if (fs.statSync(srcFile).isDirectory()) {
+      copyDir(srcFile, destFile);
+    } else {
+      fs.copyFileSync(srcFile, destFile);
+    }
+  });
+}
+
+console.log('Postbuild complete!');