# Frontend Llm Output Handler

> Guide for enhancing frontend code with the capability to render AI/LLM outputs (Markdown, LaTeX, code blocks) securely and accurately in the UI.

- **Type:** Skill
- **Install:** `agentstack add skill-haoliangcheng-skills-frontend-llm-output-handler`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [HaoliangCheng](https://agentstack.voostack.com/s/haoliangcheng)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [HaoliangCheng](https://github.com/HaoliangCheng)
- **Source:** https://github.com/HaoliangCheng/skills/tree/main/skills/frontend-llm-output-handler

## Install

```sh
agentstack add skill-haoliangcheng-skills-frontend-llm-output-handler
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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.

```javascript
// 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`).
  ```javascript
  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:
  ```javascript
  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 & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [HaoliangCheng](https://github.com/HaoliangCheng)
- **Source:** [HaoliangCheng/skills](https://github.com/HaoliangCheng/skills)
- **License:** Apache-2.0

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-haoliangcheng-skills-frontend-llm-output-handler
- Seller: https://agentstack.voostack.com/s/haoliangcheng
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.