Usage
import { Response } from "@/components/ui/response";
Basic Usage
<Response>This is a simple text response.</Response>
With Markdown
The Response component supports full markdown rendering:
<Response>
{`# Heading
This is a paragraph with **bold** and *italic* text.
- List item 1
- List item 2
- List item 3
\`\`\`javascript
const greeting = "Hello, world!"
console.log(greeting)
\`\`\`
`}
</Response>
Streaming Response
Perfect for streaming AI responses character-by-character:
const [response, setResponse] = useState("");
// As tokens arrive, append to response
const handleStream = (token: string) => {
setResponse((prev) => prev + token);
};
return <Response>{response}</Response>;
With Message Component
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message";
import { Response } from "@/components/ui/response";
export default ({ streamingResponse }) => (
<Message from="assistant">
<MessageAvatar src="/ai-avatar.jpg" name="AI" />
<MessageContent>
<Response>{streamingResponse}</Response>
</MessageContent>
</Message>
);