ComponentsProvider
Override internal components used by Superinterface. Pass a
components
object where each key matches the component you want to replace.app.tsx
import { ComponentsProvider, Thread } from '@superinterface/react'
const MessageAttachments = ({ message }) => (
<div>{message.attachments.length} files</div>
)
const Name = ({ children }) => <strong>{children}</strong>
export const App = () => (
<ComponentsProvider
components={{
MessageAttachments,
MessageGroup: { Name },
}}
>
<Thread />
</ComponentsProvider>
)
Props
Available overrides
You can replace any of the following components:
MessageAttachmentsMessageGroup (and nested keys like Name, AssistantAvatar.Root)RunStep and RunStep.ToolCallsFunctionCodeInterpreterToolCallFileSearchToolCallFallbackToolCallTextContentImageFileContentStartingSkeletonStartingContentSkeleton