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