A playground for two AI models to talk to each other, turn by turn, with user approval.
import React, { useState, useEffect, useRef } from "react";
import { createRoot } from "react-dom/client";
interface Message {
role: "LLM1" | "LLM2";
content: string;
model: string;
}
interface Model {
provider: string;
name: string;
friendlyName: string;
}
function PersonaSection({ label, models, model, setModel, system, setSystem }: {
label: string; models: Model[]; model: Model | null;
setModel: (m: Model) => void; system: string; setSystem: (s: string) => void;
}) {
return (
<section>
<h3>{label}</h3>
<select value={model?.name || ""} onChange={(e) => {
const selected = models.find(m => m.name === e.target.value);
if (selected) setModel(selected);
}}>
<ModelOptions models={models} />
</select>
<textarea placeholder="System instructions..." value={system} onChange={e => setSystem(e.target.value)} />
</section>
);
}
function ModelOptions({ models }: { models: Model[] }) {
return <>{Object.entries(models.reduce((g: any, m: any) => { (g[m.provider] ??= []).push(m); return g; }, {})).map(([provider, ms]: any) => (
<optgroup key={provider} label={provider}>{ms.map((m: any) => <option key={m.name} value={m.name}>{m.friendlyName}</option>)}</optgroup>
))}</>;
}
function App() {
const [models, setModels] = useState<Model[]>([]);
const [llm1Model, setLlm1Model] = useState<Model | null>(null);
const [llm2Model, setLlm2Model] = useState<Model | null>(null);
const [llm1System, setLlm1System] = useState("You are a helpful assistant. Keep responses concise.");
const [llm2System, setLlm2System] = useState("You are a critical thinker. Keep responses concise.");
const [messages, setMessages] = useState<Message[]>([]);
const [kickstartPrompt, setKickstartPrompt] = useState("Hello! Let's start a debate about the future of AI.");
const [isLoading, setIsLoading] = useState(false);
const scrollRef = useRef<HTMLDivElement>(null);
useEffect(() => {
async function loadModels() {
const available = await tb.models();
setModels(available);
if (available.length > 0) {
setLlm1Model(available[0]);
setLlm2Model(available[1] || available[0]);
}
}
loadModels();
}, []);
useEffect(() => {
if (scrollRef.current) {
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
}
}, [messages]);
const getNextTurn = async () => {
setIsLoading(true);
try {
const isFirstTurn = messages.length === 0;
const currentPersona = isFirstTurn || messages[messages.length - 1].role === "LLM2" ? "LLM1" : "LLM2";
const currentModel = currentPersona === "LLM1" ? llm1Model : llm2Model;
const currentSystem = currentPersona === "LLM1" ? llm1System : llm2System;
if (!currentModel) {
alert("Please select both models before starting.");
setIsLoading(false);
return;
}
// Construct conversation history for the AI
// We map our custom roles to standard AI roles for the API
const conversation = messages.map(m => ({
role: (m.role === currentPersona ? "assistant" : "user") as "assistant" | "user",
content: m.content
}));
// If it's the first turn, we use the kickstart prompt as the user input for LLM1
if (isFirstTurn) {
conversation.push({ role: "user", content: kickstartPrompt });
} else {
// Otherwise, the last message from the other LLM is the "user" prompt for the current LLM
}
const response = await tb.ai({
provider: currentModel.provider,
model: currentModel.name,
system: currentSystem,
messages: conversation.length > 0 ? conversation : [{ role: "user", content: kickstartPrompt }]
});
const newMessage: Message = {
role: currentPersona,
content: response.text,
model: `${currentModel.provider} - ${currentModel.friendlyName}`
};
setMessages([...messages, newMessage]);
} catch (error) {
console.error("Error fetching AI response:", error);
alert("Failed to get response from LLM.");
} finally {
setIsLoading(false);
}
};
const resetChat = () => {
if (confirm("Reset conversation?")) {
setMessages([]);
}
};
return (
<div className="app-container">
<header>
<h1>LLM Chat Laboratory</h1>
<p className="subtitle">Watch two AI models converse, one turn at a time.</p>
</header>
<div className="workspace">
<aside className="settings">
<PersonaSection label="Persona 1 (Starter)" models={models} model={llm1Model} setModel={setLlm1Model} system={llm1System} setSystem={setLlm1System} />
<PersonaSection label="Persona 2" models={models} model={llm2Model} setModel={setLlm2Model} system={llm2System} setSystem={setLlm2System} />
<section>
<h3>Kickstart Prompt</h3>
<textarea
placeholder="The message LLM1 responds to first..."
value={kickstartPrompt}
onChange={e => setKickstartPrompt(e.target.value)}
disabled={messages.length > 0}
/>
<small>Can only be changed before the chat starts.</small>
</section>
</aside>
<main className="chat-area">
<div className="messages" ref={scrollRef}>
{messages.length === 0 && (
<div className="empty-state">
Ready to begin. LLM 1 will respond to: <br/>
<em>"{kickstartPrompt}"</em>
</div>
)}
{messages.map((m, i) => (
<div key={i} className={`message-wrapper ${m.role}`}>
<div className="message-header">
<span className="persona-tag">{m.role === 'LLM1' ? 'Persona 1' : 'Persona 2'}</span>
<span className="model-tag">{m.model}</span>
</div>
<div className="message-content">{m.content}</div>
</div>
))}
{isLoading && (
<div className="loading-indicator">
<div className="dot-flashing"></div>
Thinking...
</div>
)}
</div>
<div className="controls">
<button
className="next-turn-btn"
onClick={getNextTurn}
disabled={isLoading || !llm1Model || !llm2Model}
>
{isLoading ? "Generating..." : messages.length === 0 ? "Start Conversation" : "Approve & Next Turn"}
</button>
<button className="reset-btn" onClick={resetChat} disabled={messages.length === 0}>Reset</button>
</div>
</main>
</div>
</div>
);
}
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(<App />);