feat(openui-dashboard): Linear hosted MCP integration

docs/generated/chat-system-prompt.txt

@@ -31,7 +31,7 @@ Separator(orientation?: "horizontal" | "vertical", decorative?: boolean) — Vis
 
 ### Tables
 Table(columns: Col[]) — Data table — column-oriented. Each Col holds its own data array.
-Col(label: string, data, type?: "string" | "number" | "action") — Column definition — holds label + data array
+Col(label: string, data: any, type?: "string" | "number" | "action") — Column definition — holds label + data array
 
 ### Charts (2D)
 BarChart(labels: string[], series: Series[], variant?: "grouped" | "stacked", xLabel?: string, yLabel?: string) — Vertical bars; use for comparing values across categories with one or more series
@@ -53,20 +53,20 @@ ScatterSeries(name: string, points: Point[]) — Named dataset
 Point(x: number, y: number, z?: number) — Data point with numeric coordinates
 
 ### Forms
-Form(name: string, buttons: Buttons, fields) — Form container with fields and explicit action buttons
+Form(name: string, buttons: Buttons, fields?: FormControl[]) — Form container with fields and explicit action buttons
 FormControl(label: string, input: Input | TextArea | Select | DatePicker | Slider | CheckBoxGroup | RadioGroup, hint?: string) — Field with label, input component, and optional hint text
 Label(text: string) — Text label
 Input(name: string, placeholder?: string, type?: "text" | "email" | "password" | "number" | "url", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 SelectItem(value: string, label: string) — Option for Select
-DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)
 Slider(name: string, variant: "continuous" | "discrete", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>) — Numeric slider input; supports continuous and discrete (stepped) variants
-CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)
 CheckBoxItem(label: string, description: string, name: string, defaultChecked?: boolean)
 RadioGroup(name: string, items: RadioItem[], defaultValue?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 RadioItem(label: string, description: string, value: string)
-SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?) — Group of switch toggles
+SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?: $binding<Record<string, boolean>>) — Group of switch toggles
 SwitchItem(label?: string, description?: string, name: string, defaultChecked?: boolean) — Individual switch toggle
 - Define EACH FormControl as its own reference — do NOT inline all controls in one array.
 - NEVER nest Form inside Form.

docs/generated/playground-component-spec.json

@@ -46,7 +46,7 @@
       "description": "Data table — column-oriented. Each Col holds its own data array."
     },
     "Col": {
-      "signature": "Col(label: string, data, type?: \"string\" | \"number\" | \"action\")",
+      "signature": "Col(label: string, data: any, type?: \"string\" | \"number\" | \"action\")",
       "description": "Column definition — holds label + data array"
     },
     "BarChart": {
@@ -102,7 +102,7 @@
       "description": "Data point with numeric coordinates"
     },
     "Form": {
-      "signature": "Form(name: string, buttons: Buttons, fields)",
+      "signature": "Form(name: string, buttons: Buttons, fields?: FormControl[])",
       "description": "Form container with fields and explicit action buttons"
     },
     "FormControl": {
@@ -130,15 +130,15 @@
       "description": "Option for Select"
     },
     "DatePicker": {
-      "signature": "DatePicker(name: string, mode?: \"single\" | \"range\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)",
+      "signature": "DatePicker(name: string, mode?: \"single\" | \"range\", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)",
       "description": ""
     },
     "Slider": {
       "signature": "Slider(name: string, variant: \"continuous\" | \"discrete\", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>)",
       "description": "Numeric slider input; supports continuous and discrete (stepped) variants"
     },
     "CheckBoxGroup": {
-      "signature": "CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)",
+      "signature": "CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)",
       "description": ""
     },
     "CheckBoxItem": {
@@ -154,7 +154,7 @@
       "description": ""
     },
     "SwitchGroup": {
-      "signature": "SwitchGroup(name: string, items: SwitchItem[], variant?: \"clear\" | \"card\" | \"sunk\", value?)",
+      "signature": "SwitchGroup(name: string, items: SwitchItem[], variant?: \"clear\" | \"card\" | \"sunk\", value?: $binding<Record<string, boolean>>)",
       "description": "Group of switch toggles"
     },
     "SwitchItem": {
@@ -170,7 +170,7 @@
       "description": "Group of Button components. direction: \"row\" (default) | \"column\"."
     },
     "Stack": {
-      "signature": "Stack([children], direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)",
+      "signature": "Stack(children: any[], direction?: \"row\" | \"column\", gap?: \"none\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"2xl\", align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\", justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\" | \"evenly\", wrap?: boolean)",
       "description": "Flex container. direction: \"row\"|\"column\" (default \"column\"). gap: \"none\"|\"xs\"|\"s\"|\"m\"|\"l\"|\"xl\"|\"2xl\" (default \"m\"). align: \"start\"|\"center\"|\"end\"|\"stretch\"|\"baseline\". justify: \"start\"|\"center\"|\"end\"|\"between\"|\"around\"|\"evenly\"."
     },
     "Tabs": {
@@ -265,7 +265,10 @@
     },
     {
       "name": "Tables",
-      "components": ["Table", "Col"],
+      "components": [
+        "Table",
+        "Col"
+      ],
       "notes": [
         "- Table is COLUMN-oriented: Table([Col(\"Label\", dataArray), Col(\"Count\", countArray, \"number\")]). Use array pluck for data: data.rows.fieldName",
         "- Col data can be component arrays for styled cells: Col(\"Status\", @Each(data.rows, \"item\", Tag(item.status, null, \"sm\", item.status == \"open\" ? \"success\" : \"danger\")))",
@@ -295,7 +298,12 @@
     },
     {
       "name": "Charts (1D)",
-      "components": ["PieChart", "RadialChart", "SingleStackedBarChart", "Slice"],
+      "components": [
+        "PieChart",
+        "RadialChart",
+        "SingleStackedBarChart",
+        "Slice"
+      ],
       "notes": [
         "- PieChart and BarChart need NUMBERS, not objects. For list data, use @Count(@Filter(...)) to aggregate:",
         "- PieChart from list: `PieChart([\"Low\", \"Med\", \"High\"], [@Count(@Filter(data.rows, \"priority\", \"==\", \"low\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"medium\")), @Count(@Filter(data.rows, \"priority\", \"==\", \"high\"))], \"donut\")`",
@@ -304,7 +312,11 @@
     },
     {
       "name": "Charts (Scatter)",
-      "components": ["ScatterChart", "ScatterSeries", "Point"]
+      "components": [
+        "ScatterChart",
+        "ScatterSeries",
+        "Point"
+      ]
     },
     {
       "name": "Forms",
@@ -338,14 +350,20 @@
     },
     {
       "name": "Buttons",
-      "components": ["Button", "Buttons"],
+      "components": [
+        "Button",
+        "Buttons"
+      ],
       "notes": [
         "- Toggle in @Each: @Each(rows, \"t\", Button(t.status == \"open\" ? \"Close\" : \"Reopen\", Action([...])))"
       ]
     },
     {
       "name": "Data Display",
-      "components": ["TagBlock", "Tag"],
+      "components": [
+        "TagBlock",
+        "Tag"
+      ],
       "notes": [
         "- Color-mapped Tag: Tag(value, null, \"sm\", value == \"high\" ? \"danger\" : value == \"medium\" ? \"warning\" : \"neutral\")"
       ]

docs/generated/playground-system-prompt.txt

@@ -18,7 +18,7 @@ Props typed `ActionExpression` accept an Action([@steps...]) expression. See the
 Props marked `$binding<type>` accept a `$variable` reference for two-way binding.
 
 ### Layout
-Stack([children], direction?: "row" | "column", gap?: "none" | "xs" | "s" | "m" | "l" | "xl" | "2xl", align?: "start" | "center" | "end" | "stretch" | "baseline", justify?: "start" | "center" | "end" | "between" | "around" | "evenly", wrap?: boolean) — Flex container. direction: "row"|"column" (default "column"). gap: "none"|"xs"|"s"|"m"|"l"|"xl"|"2xl" (default "m"). align: "start"|"center"|"end"|"stretch"|"baseline". justify: "start"|"center"|"end"|"between"|"around"|"evenly".
+Stack(children: any[], direction?: "row" | "column", gap?: "none" | "xs" | "s" | "m" | "l" | "xl" | "2xl", align?: "start" | "center" | "end" | "stretch" | "baseline", justify?: "start" | "center" | "end" | "between" | "around" | "evenly", wrap?: boolean) — Flex container. direction: "row"|"column" (default "column"). gap: "none"|"xs"|"s"|"m"|"l"|"xl"|"2xl" (default "m"). align: "start"|"center"|"end"|"stretch"|"baseline". justify: "start"|"center"|"end"|"between"|"around"|"evenly".
 Tabs(items: TabItem[]) — Tabbed container
 TabItem(value: string, trigger: string, content: (TextContent | MarkDownRenderer | CardHeader | Callout | TextCallout | CodeBlock | Image | ImageBlock | ImageGallery | Separator | HorizontalBarChart | RadarChart | PieChart | RadialChart | SingleStackedBarChart | ScatterChart | AreaChart | BarChart | LineChart | Table | TagBlock | Form | Buttons | Steps)[]) — value is unique id, trigger is tab label, content is array of components
 Accordion(items: AccordionItem[]) — Collapsible sections
@@ -53,7 +53,7 @@ CodeBlock(language: string, codeString: string) — Syntax-highlighted code bloc
 
 ### Tables
 Table(columns: Col[]) — Data table — column-oriented. Each Col holds its own data array.
-Col(label: string, data, type?: "string" | "number" | "action") — Column definition — holds label + data array
+Col(label: string, data: any, type?: "string" | "number" | "action") — Column definition — holds label + data array
 - Table is COLUMN-oriented: Table([Col("Label", dataArray), Col("Count", countArray, "number")]). Use array pluck for data: data.rows.fieldName
 - Col data can be component arrays for styled cells: Col("Status", @Each(data.rows, "item", Tag(item.status, null, "sm", item.status == "open" ? "success" : "danger")))
 - Row actions: Col("Actions", @Each(data.rows, "t", Button("Edit", Action([@Set($showEdit, true), @Set($editId, t.id)]))))
@@ -89,20 +89,20 @@ ScatterSeries(name: string, points: Point[]) — Named dataset
 Point(x: number, y: number, z?: number) — Data point with numeric coordinates
 
 ### Forms
-Form(name: string, buttons: Buttons, fields) — Form container with fields and explicit action buttons
+Form(name: string, buttons: Buttons, fields?: FormControl[]) — Form container with fields and explicit action buttons
 FormControl(label: string, input: Input | TextArea | Select | DatePicker | Slider | CheckBoxGroup | RadioGroup, hint?: string) — Field with label, input component, and optional hint text
 Label(text: string) — Text label
 Input(name: string, placeholder?: string, type?: "text" | "email" | "password" | "number" | "url", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 TextArea(name: string, placeholder?: string, rows?: number, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 Select(name: string, items: SelectItem[], placeholder?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 SelectItem(value: string, label: string) — Option for Select
-DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+DatePicker(name: string, mode?: "single" | "range", rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<any>)
 Slider(name: string, variant: "continuous" | "discrete", min: number, max: number, step?: number, defaultValue?: number[], label?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<number[]>) — Numeric slider input; supports continuous and discrete (stepped) variants
-CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?)
+CheckBoxGroup(name: string, items: CheckBoxItem[], rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<Record<string, boolean>>)
 CheckBoxItem(label: string, description: string, name: string, defaultChecked?: boolean)
 RadioGroup(name: string, items: RadioItem[], defaultValue?: string, rules?: {required?: boolean, email?: boolean, url?: boolean, numeric?: boolean, min?: number, max?: number, minLength?: number, maxLength?: number, pattern?: string}, value?: $binding<string>)
 RadioItem(label: string, description: string, value: string)
-SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?) — Group of switch toggles
+SwitchGroup(name: string, items: SwitchItem[], variant?: "clear" | "card" | "sunk", value?: $binding<Record<string, boolean>>) — Group of switch toggles
 SwitchItem(label?: string, description?: string, name: string, defaultChecked?: boolean) — Individual switch toggle
 - For Form fields, define EACH FormControl as its own reference — do NOT inline all controls in one array. This allows progressive field-by-field streaming.
 - NEVER nest Form inside Form — each Form should be a standalone container.

examples/openui-dashboard/README.md

@@ -5,10 +5,10 @@ A live dashboard builder powered by [OpenUI](https://openui.com) and openui-lang
 ## Features
 
 - **Conversational dashboard building** — describe what you want, get a live dashboard
-- **MCP tool integration** — Query live data sources (PostHog, server health, tickets)
+- **MCP tool integration** — Linear workspace data via hosted MCP (`https://mcp.linear.app/mcp`)
 - **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
+- **Linear MCP tools** — issues, projects, teams, and more (tool list comes from Linear at runtime)
 
 ## Getting Started
 
@@ -20,6 +20,10 @@ export OPENAI_API_KEY=sk-...
 # export LLM_BASE_URL=https://openrouter.ai/api/v1
 # export LLM_MODEL=your-model
 
+# Linear MCP — API key or OAuth access token (server-only; used by /api/mcp and /api/chat)
+# See https://linear.app/docs/mcp
+export LINEAR_API_KEY=lin_api_...
+
 # Install dependencies
 pnpm install
 
@@ -29,15 +33,6 @@ 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)