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>
)
Override function tool calls
Provide a custom
Function component to change how all function tool calls are
rendered. The component receives fn, runStep, and toolCall props.app.tsx
import { ComponentsProvider, Thread } from '@superinterface/react'
const Fn = ({ fn, runStep, toolCall }) => {
const args = JSON.parse(fn.arguments)
return (
<div>
<h4>{fn.name}</h4>
<pre>{JSON.stringify(args)}</pre>
</div>
)
}
export const App = () => (
<ComponentsProvider components={{ Function: Fn }}>
<Thread />
</ComponentsProvider>
)
Use
FunctionComponentsContext.Provider
when you need different components for individual function names.Props
Available overrides
You can replace any of the following components:
MessageAttachmentsMessageGroup (and nested keys like Name, AssistantAvatar.Root)RunStep and RunStep.ToolCallsFunctionCodeInterpreterToolCallFileSearchToolCallFallbackToolCallTextContentImageFileContentStartingSkeletonStartingContentSkeleton