Composer slots

Composer slots are the controlled surfaces around the message input. The default skin provides selectors for the active agent, model, toolhost, context window, and approval policy.

Usage

Replace one slot at a time with slotRenderers. Composer supplies each renderer with its matching slot control and disabled state.

import {
  AgentSelector,
  Composer,
  type AgentSelectorProps,
} from '@hyperflow/chakra-ui'

function ProjectAgent(props: AgentSelectorProps) {
  return <AgentSelector {...props} labels={{ trigger: 'Assistant' }} />
}

export function ProjectComposer() {
  return <Composer slotRenderers={{ agent: ProjectAgent }} />
}

Examples

Change an individual slot

Slot renderers are independent, so replacing the agent selector leaves the default model, toolhost, context-window, and approval controls in place.

export function ProjectComposer() {
  return (
    <Composer
      slotRenderers={{
        agent: ProjectAgent,
      }}
    />
  )
}

Guide

Preserve the slot control contract

Every renderer receives a slot object and disabled flag from Composer. Use the supplied control to read options and update the active value; do not recreate agent, model, or approval state.

Choose a surface variant

Use slotSurfaceVariant="plain" for controls inside the Composer card. Use "appendix" when the top and bottom slot rows should sit outside the card.

Keep replacements narrow

Replace only the control that needs a different visual treatment. The other default slot renderers continue to receive live state from the Composer contract.

Props

Prop	Default	Type
`slotRenderers`	Built-in renderers	`ComposerSlotRenderers` A partial map of custom renderers for individual controls.
`slotSurfaceVariant`	`"plain"`	`"plain" \| "appendix"` Places the top and bottom slot rows inside or outside the Composer card.

On this page