AI Components | Sylphx Documentation

<ChatInterface />

Full chat experience with messages, input, and streaming

<ChatBubble />

Individual message bubble with markdown and code

<ChatInput />

Text input with submit button and keyboard shortcuts

<ModelSelector />

Dropdown to select from available AI models

<ModelCard />

Display card showing model details and capabilities

<ModelGrid />

Grid layout for browsing and comparing models

Works with useChat

These components integrate seamlessly with the useChat hook. Pass the hook's return values directly as props for full functionality.

ChatInterface

A complete chat interface component that handles message display, user input, streaming responses, and conversation history. The fastest way to add AI chat to your app.

Basic Usage

import { ChatInterface } from '@sylphx/platform-sdk/react'

export default function ChatPage() {
  return (
    <ChatInterface
      model="anthropic/claude-3.5-sonnet"
      systemMessage="You are a helpful assistant."
      placeholder="Ask me anything..."
    />
  )
}

Props

Property	Type	Description
`model`required	`string`	AI model identifier (e.g., "anthropic/claude-3.5-sonnet")
`systemMessage`	`string`	System prompt to set AI behavior
`placeholder`	`string`= "Type a message..."	Input placeholder text
`initialMessages`	`Message[]`	Pre-populate conversation history
`onMessage`	`(msg: Message) => void`	Callback when a new message is received
`onError`	`(error: Error) => void`	Callback when an error occurs
`showModelSelector`	`boolean`= false	Show model dropdown in header
`showTokenCount`	`boolean`= false	Display token usage
`maxHeight`	`string`= "600px"	Maximum height of chat container
`className`	`string`	Additional CSS classes
`theme`	`ThemeVariables`	Custom theme overrides

Advanced Examples

import { ChatInterface, useChat } from '@sylphx/platform-sdk/react'

export default function CustomChat() {
  const chat = useChat({
    model: 'anthropic/claude-3.5-sonnet',
    systemMessage: 'You are a coding assistant.',
    onMessage: (msg) => console.log('New message:', msg),
  })

  return (
    <ChatInterface
      {...chat}
      showModelSelector
      showTokenCount
      maxHeight="80vh"
    />
  )
}

ChatBubble

Renders an individual chat message with support for markdown, syntax-highlighted code blocks, copy functionality, and streaming text animation.

Basic Usage

import { ChatBubble } from '@sylphx/platform-sdk/react'

function MessageList({ messages }) {
  return (
    <div className="space-y-4">
      {messages.map((msg, i) => (
        <ChatBubble
          key={i}
          role={msg.role}
          content={msg.content}
          timestamp={msg.createdAt}
        />
      ))}
    </div>
  )
}

Props

Property	Type	Description
`role`required	`"user" \| "assistant" \| "system"`	Who sent the message
`content`required	`string`	Message content (supports markdown)
`timestamp`	`Date \| string`	When the message was sent
`isStreaming`	`boolean`= false	Show typing animation
`avatar`	`string \| ReactNode`	Custom avatar URL or component
`name`	`string`	Display name for the sender
`showCopy`	`boolean`= true	Show copy button on hover
`onCopy`	`() => void`	Callback when content is copied
`className`	`string`	Additional CSS classes
`variant`	`"default" \| "compact" \| "minimal"`= "default"	Visual style variant

Variants

<ChatBubble
  role="assistant"
  content="Here's a code example:\n\n\`\`\`typescript\nconst hello = 'world'\n\`\`\`"
  timestamp={new Date()}
  name="Claude"
/>

ChatInput

A text input component optimized for chat interfaces with auto-resize, keyboard shortcuts, and submit handling.

Basic Usage

import { ChatInput } from '@sylphx/platform-sdk/react'

function ChatFooter() {
  const handleSubmit = (message: string) => {
    console.log('Sending:', message)
    // Send to AI...
  }

  return (
    <ChatInput
      onSubmit={handleSubmit}
      placeholder="Type your message..."
    />
  )
}

Props

Property	Type	Description
`onSubmit`required	`(message: string) => void`	Called when user submits message
`placeholder`	`string`= "Type a message..."	Input placeholder text
`disabled`	`boolean`= false	Disable input while loading
`isLoading`	`boolean`= false	Show loading state on submit button
`maxLength`	`number`	Maximum character limit
`autoFocus`	`boolean`= true	Focus input on mount
`onCancel`	`() => void`	Called when user presses Escape
`submitOnEnter`	`boolean`= true	Submit on Enter (Shift+Enter for newline)
`showCharCount`	`boolean`= false	Display character count
`className`	`string`	Additional CSS classes

Examples

import { ChatInput } from '@sylphx/platform-sdk/react'

function ChatFooter({ isLoading, onSend, onStop }) {
  return (
    <ChatInput
      onSubmit={onSend}
      onCancel={onStop}
      isLoading={isLoading}
      disabled={isLoading}
      placeholder={isLoading ? 'AI is thinking...' : 'Type a message...'}
    />
  )
}

Keyboard Shortcuts

By default, Enter submits and Shift+Enter creates a new line. Set submitOnEnter=false to require Cmd/Ctrl+Enter for submission.

ModelSelector

A dropdown component for selecting from available AI models. Shows model name, provider, context window, and pricing at a glance.

Basic Usage

import { ModelSelector } from '@sylphx/platform-sdk/react'

function ChatHeader() {
  const [model, setModel] = useState('anthropic/claude-3.5-sonnet')

  return (
    <ModelSelector
      value={model}
      onChange={setModel}
    />
  )
}

Props

Property	Type	Description
`value`required	`string`	Currently selected model ID
`onChange`required	`(modelId: string) => void`	Called when selection changes
`models`	`Model[]`	Custom model list (fetched automatically if not provided)
`capability`	`"chat" \| "vision" \| "embedding"`= "chat"	Filter models by capability
`showPricing`	`boolean`= true	Display pricing per 1M tokens
`showContext`	`boolean`= true	Display context window size
`groupByProvider`	`boolean`= true	Group models by provider
`placeholder`	`string`= "Select a model"	Placeholder when no selection
`disabled`	`boolean`= false	Disable the selector
`className`	`string`	Additional CSS classes

Advanced Examples

import { ModelSelector, useModels } from '@sylphx/platform-sdk/react'

function SmartModelSelector() {
  const [selected, setSelected] = useState('')
  const { models, isLoading } = useModels({ capability: 'chat' })

  return (
    <ModelSelector
      value={selected}
      onChange={setSelected}
      models={models}
      disabled={isLoading}
      showPricing
      groupByProvider
    />
  )
}

ModelCard

A display card for showcasing AI model information including capabilities, pricing, context window, and provider details.

Basic Usage

import { ModelCard } from '@sylphx/platform-sdk/react'

function ModelShowcase() {
  return (
    <ModelCard
      id="anthropic/claude-3.5-sonnet"
      name="Claude 3.5 Sonnet"
      provider="Anthropic"
      contextWindow={200000}
      inputCost={3}
      outputCost={15}
      capabilities={['chat', 'vision', 'tools']}
    />
  )
}

Props

Property	Type	Description
`id`required	`string`	Model identifier
`name`required	`string`	Display name
`provider`required	`string`	Provider name (e.g., "Anthropic")
`contextWindow`	`number`	Maximum context size in tokens
`inputCost`	`number`	Cost per 1M input tokens (USD)
`outputCost`	`number`	Cost per 1M output tokens (USD)
`capabilities`	`string[]`	List of capabilities (chat, vision, tools, etc.)
`badge`	`string`	Optional badge text (e.g., "Recommended")
`description`	`string`	Brief model description
`selected`	`boolean`= false	Show selected state
`onClick`	`() => void`	Click handler
`className`	`string`	Additional CSS classes

Variants

<ModelCard
  id="anthropic/claude-3.5-sonnet"
  name="Claude 3.5 Sonnet"
  provider="Anthropic"
  contextWindow={200000}
  capabilities={['chat', 'vision', 'tools']}
  badge="Best Overall"
  description="Most intelligent model with excellent reasoning"
/>

ModelGrid

A responsive grid layout for displaying and comparing multiple AI models. Includes filtering, sorting, and selection functionality.

Basic Usage

import { ModelGrid } from '@sylphx/platform-sdk/react'

function ModelsPage() {
  const [selected, setSelected] = useState<string | null>(null)

  return (
    <ModelGrid
      onSelect={setSelected}
      selected={selected}
    />
  )
}

Props

Property	Type	Description
`models`	`Model[]`	Model list (fetched automatically if not provided)
`selected`	`string \| null`	Currently selected model ID
`onSelect`	`(modelId: string) => void`	Called when a model is selected
`capability`	`"chat" \| "vision" \| "embedding"`	Filter by capability
`showSearch`	`boolean`= true	Show search input
`showFilters`	`boolean`= true	Show capability filters
`showSort`	`boolean`= true	Show sort options
`columns`	`2 \| 3 \| 4`= 3	Number of grid columns
`emptyState`	`ReactNode`	Custom empty state component
`className`	`string`	Additional CSS classes

Advanced Examples

import { ModelGrid, useModels } from '@sylphx/platform-sdk/react'

function ModelExplorer() {
  const [selected, setSelected] = useState<string>('anthropic/claude-3.5-sonnet')
  const { models, isLoading } = useModels()

  return (
    <div className="space-y-8">
      <ModelGrid
        models={models}
        selected={selected}
        onSelect={setSelected}
        showSearch
        showFilters
        showSort
        columns={3}
      />

      {selected && (
        <div className="p-4 rounded-lg border">
          <p>Selected: {selected}</p>
          <button onClick={() => startChat(selected)}>
            Start Chat
          </button>
        </div>
      )}
    </div>
  )
}

Theming

All AI components support theming via the theme prop for consistent styling across your application.

import {
  ChatInterface,
  ModelSelector,
  defaultTheme,
  darkTheme,
  type ThemeVariables
} from '@sylphx/platform-sdk/react'

// Custom theme
const customTheme: ThemeVariables = {
  colorPrimary: '#8b5cf6',
  colorBackground: '#1e1b4b',
  colorText: '#e0e7ff',
  colorMutedForeground: '#a5b4fc',
  colorBorder: '#3730a3',
  borderRadius: '1rem',
  fontFamily: '"Inter", sans-serif',
}

// Apply to components
<ChatInterface theme={customTheme} model="..." />
<ModelSelector theme={customTheme} value={...} onChange={...} />

Theme Variables

Property	Type	Description
`colorPrimary`	`string`= #000000	Primary accent color
`colorBackground`	`string`= #ffffff	Background color
`colorText`	`string`= #1f2937	Primary text color
`colorMutedForeground`	`string`= #6b7280	Secondary text color
`colorBorder`	`string`= #e5e7eb	Border color
`colorUserBubble`	`string`= colorPrimary	User message bubble color
`colorAssistantBubble`	`string`= #f3f4f6	Assistant message bubble color
`fontFamily`	`string`= system-ui	Font family
`borderRadius`	`string`= 0.5rem	Border radius

Hook Integration

Components work seamlessly with the AI hooks for state management and API calls.

Complete Example

import {
  ChatInterface,
  ModelSelector,
  useChat,
  useModels,
} from '@sylphx/platform-sdk/react'
import { useState } from 'react'

export default function AIPlayground() {
  const [model, setModel] = useState('anthropic/claude-3.5-sonnet')
  const { models } = useModels({ capability: 'chat' })

  const chat = useChat({
    model,
    systemMessage: 'You are a helpful coding assistant.',
    onError: (err) => console.error('Chat error:', err),
  })

  return (
    <div className="max-w-4xl mx-auto p-4 space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">AI Playground</h1>
        <ModelSelector
          value={model}
          onChange={setModel}
          models={models}
          showPricing
        />
      </div>

      <ChatInterface
        {...chat}
        showTokenCount
        maxHeight="70vh"
        placeholder="Ask me about code..."
      />
    </div>
  )
}

Build AI experiences faster

Combine these components with the useChat hook for production-ready AI chat in minutes.

Chat API Docs Browse Models