@generative-dom/preset-llm

Curated Generative DOM plugin set for LLM chat UIs. Sits on top of @generative-dom/preset-markdown and adds the four plugins almost every chat surface needs: syntax highlighting, custom elements (for tool-call tags), interactive components, and DOM event delegation.

Installation

pnpm add @generative-dom/core @generative-dom/preset-llm

Usage

import { GenerativeDom } from '@generative-dom/core';
import { llmPreset } from '@generative-dom/preset-llm';

const md = new GenerativeDom(container, { plugins: llmPreset() });

for await (const chunk of openaiStream) {
  md.push(chunk);
}
md.flush();

What's inside

Everything from @generative-dom/preset-markdown (eight CommonMark plugins) plus:

| Plugin | Covers | |---|---| | @generative-dom/plugin-highlight | Syntax highlighting for fenced code blocks (10 built-in languages, ~5.7 KB gzipped) | | @generative-dom/plugin-custom-elements | Render <custom-tag> payloads streamed from the model | | @generative-dom/plugin-interactive | Interactive components inside messages (forms, buttons, etc.) | | @generative-dom/plugin-events | Capture clicks and form submits from streamed content |

Customizing

The preset returns a plain GenerativeDomPlugin[], so you can mix in extras or swap a plugin for a configured instance:

import { llmPreset } from '@generative-dom/preset-llm';
import { highlight } from '@generative-dom/plugin-highlight';

const plugins = [
  ...llmPreset().filter(p => p.name !== 'highlight'),
  highlight({ include: ['typescript', 'json', 'bash'] }),
];

When to use

• @generative-dom/preset-markdown — pure CommonMark, smallest install
• @generative-dom/preset-llm — chat UIs (this package)
• @generative-dom/preset-all — everything zero-config

License

MIT