What dependencies do I need?

The solution relies on marked for Markdown, katex for math, dompurify for sanitization, highlight.js for code highlighting, and styled-components for styling; jQuery is optional for non-React UIs.

How do I secure the rendered output?

Always sanitize the HTML with DOMPurify using a safe ALLOWED_TAGS/ALLOWED_ATTR configuration, then render math with KaTeX delimiters via renderMathInElement.

Is this approach React-specific?

Primarily demonstrated for React/TypeScript, but the pipeline supports non-React implementations as well (with optional jQuery usage) by applying the same preprocessing, parsing, sanitizing, and rendering steps.

frontend-llm-output-handler

Scanned

npx machina-cli add skill HaoliangCheng/skills/frontend-llm-output-handler --openclaw

Files (1)

SKILL.md

2.8 KB

Frontend LLM Output Handler

Goal

Enhance existing frontend code to support the rendering of complex LLM response strings.

Input: Frontend code (JavaScript, React, TypeScript).
Output: Enhanced frontend code with integrated capabilities for parsing Markdown, rendering LaTeX math formulas, and displaying interactive code blocks.

Dependencies

The implementation uses the following packages:

Markdown: marked
Math/LaTeX: katex
Sanitization: dompurify
Syntax Highlighting: highlight.js
React Styling: styled-components
DOM Utility: jQuery (optional, for non-React implementations)

Instructions

To enhance frontend components for AI-generated responses, follow this 4-step integration pipeline:

1. Pre-processing (Math Compatibility)

AI models often produce single backslashes in LaTeX (e.g., \frac). Most Markdown parsers consume these as escape characters. You must normalize them before parsing.

// Normalize backslashes for KaTeX compatibility
const normalized = rawText.replace(/\\/g, '\\\\');

2. Markdown Parsing

Use a robust parser like marked. Ensure you handle the output as an HTML string.

3. Code Block Decoration

AI responses frequently contain code. Enhance standard output by wrapping it in a container with a language label to improve readability and visual structure.

4. Security & Post-processing

Sanitize with Config: ALWAYS use DOMPurify. Ensure your configuration allows the specific tags and attributes you've added (e.g., class).

DOMPurify.sanitize(html, {
  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'img', 'code', 'pre', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'div', 'span', 'table', 'thead', 'tbody', 'tr', 'th', 'td'],
  ALLOWED_ATTR: ['src', 'alt', 'class', 'href', 'style']
});

Math Rendering (KaTeX): Call renderMathInElement after the content is added to the DOM. You MUST specify delimiters so the renderer knows what to look for:

renderMathInElement(container, {
  delimiters: [
    { left: '$$', right: '$$', display: true },
    { left: '$', right: '$', display: false },
    { left: '\\(', right: '\\)', display: false },
    { left: '\\[', right: '\\]', display: true }
  ],
  throwOnError: false
});

Performance & UX Tips (React)

Memoization: Use useMemo to wrap the parsing logic and React.memo for message components. This prevents expensive re-parsing of the entire chat history when new messages arrive.
Auto-scroll: Implement a useEffect that monitors the message list and updates scrollTop to keep the latest AI response in view.

Source

git clone https://github.com/HaoliangCheng/skills/blob/main/skills/frontend-llm-output-handler/SKILL.mdView on GitHub

Overview

Frontend LLM Output Handler extends UI components to render rich AI responses, including Markdown, LaTeX math, and syntax-highlighted code blocks. It combines parsing, math rendering, and strict sanitization to deliver accurate visuals while preserving security. The guide lists the required dependencies and a 4-step integration pipeline to retrofit existing frontend code.

How This Skill Works

Incoming LLM strings are pre-processed to normalize backslashes for KaTeX. The text is parsed with marked into HTML, code blocks are decorated for readability, and the result is sanitized with DOMPurify before injecting into the DOM. Finally, renderMathInElement applies KaTeX delimiters to render math, with performance tips for React like memoization.

When to Use It

Rendering AI responses with Markdown/LaTeX in React/TypeScript UIs
Displaying LaTeX equations in dashboards or learning apps
Showing interactive, syntax-highlighted code blocks from LLMs
Rendering multi-format AI outputs securely to protect users
Integrating with non-React UIs (optional jQuery path)

Quick Start

Step 1: Install marked, katex, dompurify, highlight.js, and styled-components (and optional jQuery for non-React paths).
Step 2: In your component, implement pre-processing to normalize backslashes, then parse with marked and decorate code blocks.
Step 3: Sanitize with DOMPurify, render math with renderMathInElement (providing delimiters), and mount the result (optimize with memoization).

Best Practices

Normalize backslashes before parsing to ensure KaTeX compatibility
Always sanitize with DOMPurify using an ALLOWED_TAGS/ALLOWED_ATTR configuration
Call renderMathInElement with explicit delimiters after content insertion
Memoize parsing with useMemo and wrap components with React.memo
Optimize UX with auto-scroll and progressive rendering

Example Use Cases

AI chat UI that renders Markdown, images, and bold/italic text
Math tutoring interface showing KaTeX formulas inline and in display mode
Documentation viewer rendering Markdown docs with highlighted code blocks
Coding assistant displaying syntax-highlighted code samples from LLMs
Knowledge base article viewer combining rich text, links, and math

Frequently Asked Questions

Add this skill to your agents