chatui-skill

n8n community node that injects chat-frontend formatting rules into the AI system prompt and exposes callable format-guide tools for ECharts, Mermaid, and binary file downloads.

Package Information

Released: 5 mo ago
Downloads: 4 weekly / 78 monthly
Latest Version: 0.1.0
Author: boaz_lai

Available Nodes

Documentation generating…

Chat UI Skill icon
Chat UI Skill
Injects a Markdown formatting system prompt and exposes tools so the AI Agent can retrieve rendering guides for ECharts, Mermaid, binary downloads, YouTube embeds, image carousels, math (KaTeX), sortable data tables, audio players, inline video players, and interactive question prompts.

Documentation

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.

Discussion