---
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"
  }
}
```