AIKit by Gravity UI

The AIKit Generative UI toolset provides several built-in mechanisms to manage the lifecycle of tool calls within a chat interface:

• Registry: useToolset returns a MessageRendererRegistry where the tool dispatcher is automatically wired to your defined toolset.
• Typed Results: submitResult is available on ToolComponentProps and is injected via createToolsetRenderer.
• History Management: applyToolResult is automatically called on every successful tool submission to merge results into the chat history.
• Continuation Support: The useToolResultContinuation hook allows you to observe tool status transitions and receive the updated transcript.
• Error Handling/Validation: If tool arguments are invalid or an unknown toolName is encountered, the system automatically falls back to rendering <ToolMessage status="error" />.

Note: You are responsible for providing the tool definitions (schemas, components, and execute functions), the LLM adapter, the sendTurn function, and the server-side route that manages provider credentials.

The ChatContainer component is organized using atomic design principles and follows a specific vertical layout structure. It manages the orchestration between navigation, message display, and user input.

Layout Structure

The component is composed of the following sections:

1. Header (Organism): Provides navigation and action controls.
2. ChatContent (Template): The scrollable central area. It dynamically switches between:
   • EmptyContainer: A welcome screen shown when there are no messages.
   • MessageList: The active display area for chat history.
3. Footer: The interaction area at the bottom, containing:
   • PromptInput: The user input field with send and cancel capabilities.
   • Disclaimer: Optional informational or legal text.
4. History (Template): A popup component used for managing chat history.

Internal Logic

The component utilizes the useChatContainer hook to handle:

• Chat history popup state.
• Switching views based on message count.
• Integrating the History component with the Header via refs.
• Merging i18n configurations with default text values.
• Managing focus via an internal promptInputKey counter, which triggers a PromptInput remount with autoFocus when autoFocusOnNewChat or autoFocusOnChatSelect are enabled.

The copy button appears when status='thought' and either onCopyClick or enabledCopy is provided. The priority is as follows:

1. Custom Logic: If onCopyClick is provided, it is used exclusively.
2. Default Logic: If onCopyClick is absent but enabledCopy={true}, the default logic is used.
3. None: If neither is provided, no copy button is shown.

Default Copy Behavior:

• String content: Copied as-is.
• Array content: Items are joined with double newlines (\n\n), matching the visual paragraph separation.

// Example: Custom Copy Handler
<ThinkingMessage
  content="Processing your request..."
  status="thought"
  onCopyClick={() => {
    navigator.clipboard.writeText('Custom text');
    showNotification('Copied!');
  }}
/>

// Example: Default Copy Functionality
<ThinkingMessage
  content={['First thinking block', 'Second thinking block']}
  status="thought"
  enabledCopy={true}
/>

The PromptInput component is an orchestrator for AI chat interfaces, composed of several layers:

Main Component

• PromptInput: The primary component that manages the overall state and sub-components.

Wrapper Components

• PromptInputWithSuggestions: Adds support for displaying suggestion chips.
• PromptInputWithPanels: Adds support for expandable top and bottom panels.
• PromptInputFull / PromptInputSimple: Specific view implementations for different UI requirements.

Molecule Components

• PromptInputHeader: Displays context indicators or custom content (used in full view).
• PromptInputBody: An auto-growing textarea for user input.
• PromptInputFooter: Contains action icons (settings, attachment, microphone) and the submit button.
• PromptInputPanel: A styled container used for expandable panel content.
• Suggestions: Renders clickable suggestion chips.

All internal state (textarea value, validation, keyboard shortcuts, attachments) is managed by the usePromptInput hook.

AIKit is built using Atomic Design principles, organizing components into a hierarchy of complexity. This allows you to use high-level ready-made components or build custom interfaces using smaller building blocks:

• Atoms: Basic, indivisible UI elements without business logic (e.g., ActionButton, Loader, MarkdownRenderer, SubmitButton).
• Molecules: Simple combinations of atoms (e.g., BaseMessage, PromptInputHeader, Suggestions).
• Organisms: Complex components with internal logic (e.g., AssistantMessage, MessageList, PromptInput, UserMessage).
• Templates: Ready-made layouts (e.g., ChatContent, History).
• Pages: Full integrations with data (e.g., ChatContainer).

Key architectural features include:

• SDK Independence: Not tied to any specific AI SDK.
• Two-level approach: Provides both ready-to-use components and hooks for deep customization.
• CSS Variables: Easy theme customization without component overrides.
• Extensibility: A system for registering custom message types.