Introduction
AI Markdown renders Markdown in React and Vue, including AI responses that arrive a little at a time. It supports GFM, math and mixed-language text, with controls for streaming, custom components and shared references.
Start by rendering one message. Add smooth output, custom styling or document coordination when your application needs them.
Choose your framework
Section titled “Choose your framework”| Your application | Start here | Included setup |
|---|---|---|
| React 19 | React quick start | Installation, CSS and a working component |
| Vue 3.5 | Vue quick start | Installation, CSS and a working Vue component |
| React with Mantine 9 | Mantine quick start | Theme providers, highlighted code and diagrams |
Not sure which package to install? Start with installation and framework selection. Want to try it first? Open the interactive examples.
Build a streaming experience
Section titled “Build a streaming experience”For a chat response, append incoming text to one string and pass the complete current string to one renderer. The application handles the network connection; AI Markdown handles the rendered content.
- Receive text: understand input, completion and cancellation.
- Render a response: follow the React chat recipe or Vue streaming guide.
- Control the pace: add React smooth streaming or the Vue smooth component.
Document coordination is for one logical document deliberately displayed in multiple sections. A normal chat message does not need it; network packets are not separate Markdown components.
Make it fit your application
Section titled “Make it fit your application”| You want to… | Read next |
|---|---|
| Change rendered elements | React custom components or Vue components and styles |
| Adjust typography | React typography, Vue styles or Mantine configuration |
| Handle mixed-language content | CJK typography |
| Control links and raw HTML | URL and HTML policies |
| Use server rendering | React SSR or Vue SSR |
The base adapters render code fences as code text. Syntax highlighting and Mermaid rendering require the Mantine integration or custom components.
Find the right level of detail
Section titled “Find the right level of detail”Start with configuration to choose the right setting. Use Find a guide for a task, or the React, Vue and Mantine references for an exact API. If something does not work, start with troubleshooting.
Adapter authors can continue to Core and Engine contracts. Development commands, architecture and release archives live under Contributing; they are not prerequisites for using the library.