openui

n8n nodes for OpenUI generative UI integration

Package Information

Released: 4 mo ago
Downloads: 18 weekly / 498 monthly
Latest Version: 0.2.1

Available Nodes

OpenUI Prompt Generator
Generates system prompts with OpenUI Lang component library
OpenUI Output Parser
Parses OpenUI Lang output from AI models into structured data

Documentation

n8n-nodes-openui

n8n community nodes for OpenUI generative UI integration. Enables AI agents to output structured UI using OpenUI Lang instead of fragile JSON.

Installation

  1. Open n8n
  2. Go to Settings > Community Nodes
  3. Enter n8n-nodes-openui
  4. Click Install

Nodes

OpenUI Prompt Generator

Generates system prompts with OpenUI Lang component library for AI agents.

Inputs:

  • componentLibrary (JSON, optional) - Custom component definitions. Uses built-in defaults if empty.
  • additionalInstructions (string, optional) - Extra instructions to include.
  • outputFormat (options) - systemPrompt or json.

Output:

{
  "systemPrompt": "You are a helpful assistant...",
  "componentLibrary": [...]
}

OpenUI Parser

Parses OpenUI Lang output from AI into structured data for rendering.

Inputs:

  • inputField (string) - Field containing AI output (default: text).
  • outputFormat (options) - openui, legacy, or both.
  • fallbackToLegacy (boolean) - Try parsing as JSON if not OpenUI Lang.

Output:

{
  "openui": { "type": "Root", "props": {...}, "children": [...] },
  "legacy": { "products": [...], "booking": {...} },
  "format": "openui",
  "error": null
}

Example Workflow

Webhook
  ↓
OpenUI Prompt Generator (generates system prompt)
  ↓
AI Agent (uses system prompt, outputs OpenUI Lang)
  ↓
OpenUI Parser (converts to structured data)
  ↓
Respond to Webhook

Component Library

Built-in components:

Component Description Required Props
ProductCard Product display title, image, price, handle
BookingCard Calendar booking summary, start, end, status
EventCard Calendar event summary, start, end, status
TaskCard Task item title
OrderCard Order summary id, name, total_price, created_at, status
Stack Layout container children
Text Text content content
Card Generic card children

Custom Components

Pass custom component definitions to the Prompt Generator:

[
  {
    "name": "InvoiceCard",
    "description": "Displays an invoice",
    "props": [
      { "name": "id", "type": "string", "required": true },
      { "name": "total", "type": "string", "required": true }
    ],
    "example": "invoice = InvoiceCard(\"INV-001\", \"$500\")"
  }
]

Why OpenUI Lang?

Feature JSON OpenUI Lang
Token usage 100% ~50%
Streaming Wait for complete Progressive
Malformed output Breaks everything Drops invalid lines
Model adherence Inconsistent Better (simpler syntax)

Development

npm install
npm run build
npm run dev  # watch mode

License

MIT

Discussion