Response

The Response component renders a Markdown response from a large language model. It uses Streamdown under the hood to render the markdown.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/response.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/response

Add the following imports to your app.css file to include Tailwind CSS and Streamdown styles:

Populate a markdown response with messages from Chat.

Add the following component to your frontend:

+page.svelte

Add the following route to your backend:

api/chat/+server.ts

Renders markdown content with support for paragraphs, links, and code blocks
Supports GFM features like tables, task lists, and strikethrough text via remark-gfm
Supports rendering Math Equations via rehype-katex
Smart streaming support - automatically completes incomplete formatting during real-time text streaming
Code blocks are rendered with syntax highlighting for various programming languages
Code blocks include a button to easily copy code to clipboard
Adapts to different screen sizes while maintaining readability
Seamlessly integrates with both light and dark themes
Customizable appearance through className props and Tailwind CSS utilities
Built with accessibility in mind for all users

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the response container
`content`	`string`	-	Markdown content to render
`shikiTheme`	`string`	-	Shiki theme for code syntax highlighting (auto-set based on dark/light mode)
`baseTheme`	`string`	`'shadcn'`	Base theme for markdown styling
`...restProps`	`StreamdownProps`	-	All other Streamdown component props are supported