A playground for two AI models to talk to each other, turn by turn, with user approval.
---
format: typebulb/v1
name: LLM to LLM
---
**code.tsx**
```tsx
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 />);
```
**styles.css**
```css
:root {
--bg: #ffffff;
--text: #1a1a1a;
--border: #e0e0e0;
--sidebar-bg: #f8f9fa;
--accent: #2563eb;
--llm1-bg: #f0f7ff;
--llm1-border: #dbeafe;
--llm2-bg: #fdf2f8;
--llm2-border: #fce7f3;
--card-bg: #ffffff;
}
html[data-theme="dark"] {
--bg: #121212;
--text: #f3f4f6;
--border: #2d2d2d;
--sidebar-bg: #1a1a1a;
--accent: #3b82f6;
--llm1-bg: #1e1e1e;
--llm1-border: #333333;
--llm2-bg: #2a1b22;
--llm2-border: #4d1d34;
--card-bg: #1e1e1e;
color-scheme: dark;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
height: 100vh;
overflow: hidden;
}
#root {
height: 100%;
}
.app-container {
display: flex;
flex-direction: column;
height: 100%;
}
header {
padding: 1rem 2rem;
border-bottom: 1px solid var(--border);
background: var(--bg);
}
header h1 {
margin: 0;
font-size: 1.25rem;
}
.subtitle {
margin: 0;
font-size: 0.85rem;
opacity: 0.7;
}
.workspace {
display: flex;
flex: 1;
overflow: hidden;
}
.settings {
width: 300px;
background: var(--sidebar-bg);
border-right: 1px solid var(--border);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
overflow-y: auto;
}
.settings section h3 {
font-size: 0.9rem;
margin: 0 0 0.5rem 0;
color: var(--accent);
}
.settings select, .settings textarea {
width: 100%;
padding: 0.5rem;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 0.85rem;
box-sizing: border-box;
}
.settings textarea {
height: 80px;
resize: none;
margin-top: 0.5rem;
}
.settings small {
display: block;
margin-top: 0.25rem;
font-size: 0.75rem;
opacity: 0.6;
}
.chat-area {
flex: 1;
display: flex;
flex-direction: column;
background: var(--bg);
position: relative;
}
.messages {
flex: 1;
overflow-y: auto;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.message-wrapper {
max-width: 85%;
padding: 1rem;
border-radius: 12px;
border: 1px solid var(--border);
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.message-wrapper.LLM1 {
align-self: flex-start;
background: var(--llm1-bg);
border-color: var(--llm1-border);
}
.message-wrapper.LLM2 {
align-self: flex-end;
background: var(--llm2-bg);
border-color: var(--llm2-border);
}
.message-header {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: bold;
}
.persona-tag {
text-transform: uppercase;
letter-spacing: 0.05em;
}
.model-tag {
opacity: 0.5;
font-weight: normal;
}
.message-content {
line-height: 1.5;
white-space: pre-wrap;
}
.empty-state {
text-align: center;
margin-top: 4rem;
opacity: 0.5;
font-style: italic;
}
.controls {
padding: 1.5rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: center;
gap: 0.75rem;
background: var(--bg);
}
.next-turn-btn {
background: var(--accent);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
transition: transform 0.1s, opacity 0.2s;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.next-turn-btn:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(1.1);
}
.next-turn-btn:active:not(:disabled) {
transform: translateY(0);
}
.next-turn-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.reset-btn {
background: transparent;
color: #ef4444;
border: 1px solid #ef4444;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
}
.reset-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.loading-indicator {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
opacity: 0.7;
padding: 1rem;
}
.dot-flashing {
position: relative;
width: 6px;
height: 6px;
border-radius: 5px;
background-color: var(--accent);
color: var(--accent);
animation: dot-flashing 1s infinite linear alternate;
animation-delay: 0.5s;
}
@keyframes dot-flashing {
0% { background-color: var(--accent); }
50%, 100% { background-color: rgba(0,0,0,0.1); }
}
@media (max-width: 700px) {
body {
overflow: auto;
height: auto;
}
.app-container {
height: auto;
min-height: 100vh;
}
.workspace {
flex-direction: column;
overflow: visible;
}
.settings {
width: auto;
border-right: none;
border-bottom: 1px solid var(--border);
padding: 1rem;
gap: 1rem;
overflow-y: visible;
}
.settings textarea {
height: 60px;
}
.chat-area {
min-height: 0;
}
.messages {
overflow-y: visible;
padding: 1rem;
gap: 1rem;
}
.message-wrapper {
max-width: 95%;
}
.controls {
padding: 1rem;
position: sticky;
bottom: 0;
}
header {
padding: 0.75rem 1rem;
}
}
```
**index.html**
```html
<div id="root"></div>
```
**config.json**
```json
{
"description": "A playground for two AI models to talk to each other, turn by turn, with user approval.",
"dependencies": {
"react": "^19.2.4",
"react-dom": "^19.2.4"
}
}
```