ai-assistant-streaming-rendering

What problem does it solve?

AI chat interfaces frequently break when streaming LLM replies with tool invocations: users see empty bubbles for tool calls, raw unrendered markdown instead of formatted text, and missing charts for data-driven answers, creating a confusing and unprofessional user experience.

Core Features & Use Cases

• Full Markdown Rendering: Renders headings, lists, GFM tables, code blocks, and links in streamed LLM replies for clear, readable output.
• Embedded Chart Support: Parses standardized fenced chart code blocks from LLM output to render bar, line, pie, and doughnut charts for data-dense answers like revenue trends or customer segmentation.
• Tool Call Marker Handling: Treats agent tool invocation marker rows as inline metadata pills instead of empty chat bubbles, eliminating the common "empty bubble after tool call" bug.
• Use Case: For a CRM AI assistant that pulls sales data via tool calls, this skill ensures tool statuses are visible, revenue trend charts render correctly, and markdown tables of top customers display properly instead of as raw text.

Quick Start

Use this skill to build or fix an AI chat panel that streams LLM replies with markdown formatting, embedded charts, and clear tool call status indicators without empty bubbles.