Multi-Model Comparison

Compare responses from different AI models side-by-side. Same input, different adapters — AgentsKit makes it trivial.

Claude

Waiting for a message…

GPT

Waiting for a message…

Both panels receive the same message — different adapters, different responses

With AgentsKit

Just use two useChat hooks with different adapters:

import { useChat, ChatContainer, Message, InputBar } from '@agentskit/react'
import { anthropic, openai } from '@agentskit/adapters'

function Compare() {
  const claude = useChat({ adapter: anthropic({ apiKey, model: 'claude-sonnet-4-6' }) })
  const gpt = useChat({ adapter: openai({ apiKey, model: 'gpt-4o' }) })

  const sendBoth = (text: string) => {
    claude.send(text)
    gpt.send(text)
  }

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
      <ChatContainer>{claude.messages.map(m => <Message key={m.id} message={m} />)}</ChatContainer>
      <ChatContainer>{gpt.messages.map(m => <Message key={m.id} message={m} />)}</ChatContainer>
      <InputBar chat={{ ...claude, send: sendBoth }} />
    </div>
  )
}