RDS/AI Elements

AI Elements

Chat interfaces, prompt inputs, and message components for building AI-powered music tools like Tansen.

rds-ai-elementsVercel AI SDKTansen
01AiMessage
U
user
What key is this track in?
AI
assistant
Based on the chord progression, this track is in A minor. The recurring Am–F–C–G pattern is the giveaway.
U
user
Can you suggest a matching tempo?
AI
assistant
The current feel sits around 92–96 BPM, which works well for the genre. Going up to 104 BPM would give it more energy without losing the groove.▌
PROPTYPEDEFAULTDESCRIPTION
role"user" | "assistant" | "system"—Determines bubble alignment and avatar
contentstring—Message text
isStreamingbooleanfalseShows a blinking cursor to indicate live streaming
avatarUrlstring—Custom avatar image URL
timestampDate—Message timestamp shown below the sender name
actionsReactNode—Optional action buttons rendered below the bubble
02AiPrompt
PROPTYPEDEFAULTDESCRIPTION
placeholderstring"What would you like to know?"Textarea placeholder
suggestionsstring[][]Quick-select prompt chips shown above the input
onSubmit(prompt: string) => void—Called on Enter or submit button click
onSuggestionClick(suggestion: string) => void—Called when a suggestion chip is clicked
isGeneratingbooleanfalseDisables input and shows spinner while AI responds
disabledbooleanfalseDisables the entire input
03AiChat

Tansen AI

Hi! I'm Tansen. Ask me anything about your music.
PROPTYPEDEFAULTDESCRIPTION
titlestring"AI Assistant"Chat panel header title
messagesRdsAiChatMessage[][]Array of messages to render
isGeneratingbooleanfalseShows typing indicator and disables input
onSend(message: string) => void—Called when user submits a message
placeholderstring"Ask me anything..."Input placeholder text
04Installation
bash
npm install @meinc/rds-ai-elements
import {  RdsAiChat,  RdsAiMessage,  RdsAiPrompt,} from "@meinc/rds-ai-elements"