Skip to content
Draft
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
7 changes: 6 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ CLAUDE.local.md
node_modules
.pnpm-store/

# Environment
.env
.env.local
.env*.local

# Build output
dist
.next
Expand All @@ -45,4 +50,4 @@ typings
clean-install.sh
lint-fix.sh

draft/
draft/
41 changes: 41 additions & 0 deletions examples/openui-dashboard/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# env files (can opt-in for committing if needed)
.env*

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
44 changes: 44 additions & 0 deletions examples/openui-dashboard/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# OpenUI Dashboard Example

A live dashboard builder powered by [OpenUI](https://openui.com) and openui-lang. Chat with an LLM to create interactive dashboards with real-time data from MCP tools.

## Features

- **Conversational dashboard building** — describe what you want, get a live dashboard
- **MCP tool integration** — Query live data sources (PostHog, server health, tickets)
- **Streaming rendering** — dashboards appear progressively as the LLM generates code
- **Edit support** — refine dashboards through follow-up messages
- **16 built-in tools** — analytics, monitoring, ticket management, and more

## Getting Started

```bash
# Set your LLM API key
export OPENAI_API_KEY=sk-...
# Or use any OpenAI-compatible provider:
# export LLM_API_KEY=your-key
# export LLM_BASE_URL=https://openrouter.ai/api/v1
# export LLM_MODEL=your-model

# Install dependencies
pnpm install

# Run the development server
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000) to start building dashboards.

## Optional: PostHog Integration

For real analytics data, set PostHog credentials:

```bash
export POSTHOG_API_KEY=phx_...
export POSTHOG_PROJECT_ID=12345
```

## Learn More

- [OpenUI Documentation](https://openui.com/docs)
- [OpenUI GitHub](https://github.com/thesysdev/openui)
18 changes: 18 additions & 0 deletions examples/openui-dashboard/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);

export default eslintConfig;
9 changes: 9 additions & 0 deletions examples/openui-dashboard/next.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
output: "standalone",
turbopack: {},
transpilePackages: ["@openuidev/react-ui", "@openuidev/react-headless", "@openuidev/react-lang"],
};

export default nextConfig;
36 changes: 36 additions & 0 deletions examples/openui-dashboard/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
{
"name": "openui-dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"generate:prompt": "pnpm --filter @openuidev/cli build && pnpm exec openui generate src/library.ts --json-schema --out src/generated/component-spec.json",
"dev": "pnpm generate:prompt && next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"@openuidev/cli": "workspace:*",
"@openuidev/react-ui": "workspace:*",
"@openuidev/lang-core": "workspace:*",
"@openuidev/react-headless": "workspace:*",
"@modelcontextprotocol/sdk": "^1.27.1",
"@openuidev/react-lang": "workspace:*",
"lucide-react": "^0.575.0",
"next": "16.1.6",
"openai": "^6.22.0",
"react": "19.2.3",
"react-dom": "19.2.3",
"zod": "^4.0.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "16.1.6",
"tailwindcss": "^4",
"typescript": "^5"
}
}
7 changes: 7 additions & 0 deletions examples/openui-dashboard/postcss.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};

export default config;
Loading
Loading