n8n-nodes-chatui-skill

A custom n8n community node that teaches an AI Agent how to use the chat frontend.

What it does

This node provides two things:

1. System Prompt (Main output) — Generates a formatted system prompt text that instructs the AI to:

   • Always respond in Markdown
   • Follow basic formatting rules (headings, lists, tables, code blocks)
   • Call the chatUiFrontendSkill tool before generating special content (charts, diagrams, file downloads)

2. AI Tool (AiTool output) — Registers a callable tool (chatUiFrontendSkill) that the AI Agent can call with these actions:

   • listAvailableFormats — lists all enabled special content types
   • getFormatGuide(type) — returns the exact rendering syntax for a given type
   • getSystemPrompt — returns the full system prompt text

Special content types

| Type | Code fence tag | Description | | ---------------- | ------------------------------ | ------------------------------------------------------ | | echarts | ```echarts or ```chart | Apache ECharts interactive chart (JSON option object) | | mermaid | ```mermaid | Mermaid diagram (flowchart, sequence, ER, Gantt, etc.) | | binaryDownload | TBD | Downloadable binary file (syntax placeholder) |

How to wire it up

[Chat UI Skill Node]
       │
       ├──(System Prompt / Main)──► reference via expression in AI Agent's "System Message"
       │                             e.g. {{ $node['Chat UI Skill'].json.systemPrompt }}
       │
       └──(AI Tool)──────────────► AI Agent node's "Tools" input

Node parameters

| Parameter | Description | | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | | Enabled Content Types | Multi-select which special types the AI can use | | Guide Delivery Mode | tools (recommended): AI calls tools to fetch guides on demand. inline: all guides embedded directly in the system prompt | | Additional Instructions | Optional extra text appended to the system prompt (persona, domain rules, etc.) |

Development

npm install
npm run build     # compile TypeScript → dist/
npm run dev       # watch + embedded n8n at localhost:5678
npm run lint      # run n8n node linter

Updating format guides

Edit the files in nodes/ChatUiSkill/descriptions/:

• echarts.ts — ECharts guide text
• mermaid.ts — Mermaid guide text
• binaryDownload.ts — Binary download guide (currently a placeholder)
• systemPrompt.ts — Base system prompt and tools-mode notice

Rebuild after any changes.