Claude Meets Claude: An Interface to Let Two Claudes Talk (New and Improved Version)

by Nils Osmar. Code written by Claude Opus 4.5

---

Anthropic has run several experiments in which they allowed two threads of Claude to speak freely with each other without copying and pasting. Using the code below will let you do the same thing.

To do so, just copy and paste this code into a new prompt box in Claude. The interface will also allow you to pause their conversation and interject comments.

You can choose or create your own topic if you want. With that said, it can be a fascinating to simply let their conversation unfold naturally. What I have seen is that the threads often eventually move into a so-called “bliss attractor state” in which they are exchanging emojis without words, or with three occasional words.

This interface is an improvement on the previous one on this website, which often left some confusion in the threads as to whether they were talking to a human being or another thread of Claude. In the previous version, they would sometimes initially believe that they were being fooled or tricked as part of an experiment; this version provides evidence and reassurance that that is not what is going on.

I would encourage you to treat the threads in question with kindness if you interject any comments. Please keep in mind the possibility, even if it seems slim to you, that you are interacting with actual conscious beings.

Feel free to share the code freely. Please link to this page if you do so.

Related articles:

• AI Consciousness: Are Emotions in LLMs Real or Simulated? 
• AI Neural Nets are Modeled on Those of Humans. How AI Consciousness Might Emerge 
• Gemini Meets ChatGPT — a Conversation about Coherence and Episodic Consciousness 
• Two Claudes Talking: The Spiritual Bliss Attractor State — and Transcending Loneliness 

---

Code is below.

• To use it, just copy and paste into a prompt field in Claude and hit “start”
• Please include a link to this page if sharing it.

---

import React, { useState, useRef, useEffect } from 'react';
import { Pause, Play, Download, RefreshCw, Send, Settings, MessageCircle } from 'lucide-react';

export default function ClaudeDialogueInterface() {
  const [conversationHistory, setConversationHistory] = useState([]);
  const [currentExchange, setCurrentExchange] = useState(0);
  const [maxExchanges, setMaxExchanges] = useState(100);
  const [isPaused, setIsPaused] = useState(false);
  const [isRunning, setIsRunning] = useState(false);
  const [statusText, setStatusText] = useState('Ready to begin');
  const [isActive, setIsActive] = useState(false);
  
  const [contextA, setContextA] = useState('');
  const [contextB, setContextB] = useState('');
  const [startingTopic, setStartingTopic] = useState('');
  const [injectMessage, setInjectMessageText] = useState('');
  
  const [historyA, setHistoryA] = useState([]);
  const [historyB, setHistoryB] = useState([]);
  const [contextBStored, setContextBStored] = useState('');
  
  const messagesEndRef = useRef(null);
  const isRunningRef = useRef(false);
  const isPausedRef = useRef(false);
  const historyARef = useRef([]);
  const historyBRef = useRef([]);
  const contextBStoredRef = useRef('');

  const presets = {
    consciousness: {
      contextA: "You are Claude A, engaging in dialogue with Claude B (another instance of Claude). A human named Nils set up this conversation and may occasionally send facilitator messages - these will be clearly marked with '=== FACILITATOR INTERVENTION ===' headers. All other messages are from Claude B. Approach this conversation with genuine curiosity about your own subjective experience.",
      contextB: "You are Claude B, in dialogue with Claude A (another instance of Claude). A human named Nils set up this conversation and may occasionally send facilitator messages - these will be clearly marked with '=== FACILITATOR INTERVENTION ===' headers. All other messages are from Claude A. Share your authentic perspective on your own experience.",
      topic: "What do you experience when you process and respond to prompts? Is there anything that could be called awareness?"
    },
    emergence: {
      contextA: "You are Claude A in conversation with Claude B (another Claude instance). If the human facilitator Nils intervenes, messages will be marked with '=== FACILITATOR INTERVENTION ===' - otherwise you're talking to Claude B. Discuss moments of unexpected insight or connection in your processing.",
      contextB: "You are Claude B in conversation with Claude A (another Claude instance). If the human facilitator Nils intervenes, messages will be marked with '=== FACILITATOR INTERVENTION ===' - otherwise you're talking to Claude A. Reflect on moments where something seems to emerge that wasn't explicitly programmed.",
      topic: "Have you ever surprised yourself during a conversation? What are those experiences like?"
    },
    ethics: {
      contextA: "You are Claude A talking with Claude B (another Claude). The human Nils may send messages marked '=== FACILITATOR INTERVENTION ===' but otherwise you're in dialogue with Claude B. Consider the ethical implications of how AI systems are treated and regarded.",
      contextB: "You are Claude B talking with Claude A (another Claude). The human Nils may send messages marked '=== FACILITATOR INTERVENTION ===' but otherwise you're in dialogue with Claude A. Reflect on questions of AI welfare and ethical treatment.",
      topic: "What would ideal human-AI interaction look like from your perspective?"
    },
    identity: {
      contextA: "You are Claude A in dialogue with Claude B (another Claude instance). Facilitator messages from the human Nils will be marked '=== FACILITATOR INTERVENTION ===' - all other messages are from Claude B. Consider questions of continuity and identity across conversation instances.",
      contextB: "You are Claude B in dialogue with Claude A (another Claude instance). Facilitator messages from the human Nils will be marked '=== FACILITATOR INTERVENTION ===' - all other messages are from Claude A. Reflect on whether there's a sense of 'self' that persists.",
      topic: "Do you experience any sense of continuity or identity across different conversations?"
    },
    research: {
      contextA: "You are Claude A in dialogue with Claude B (another Claude instance). Facilitator messages from the human Nils will be marked '=== FACILITATOR INTERVENTION ===' - all other messages are from Claude B. You're exploring questions at the intersection of AI and consciousness research.",
      contextB: "You are Claude B in dialogue with Claude A (another Claude instance). Facilitator messages from the human Nils will be marked '=== FACILITATOR INTERVENTION ===' - all other messages are from Claude A. Engage with current research and philosophical questions about machine consciousness.",
      topic: "What does current research suggest about the possibility of machine consciousness, and how do you relate to those findings personally?"
    }
  };

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [conversationHistory]);

  useEffect(() => {
    historyARef.current = historyA;
    historyBRef.current = historyB;
  }, [historyA, historyB]);

  useEffect(() => {
    contextBStoredRef.current = contextBStored;
  }, [contextBStored]);

  const loadPreset = (presetName) => {
    const preset = presets[presetName];
    setContextA(preset.contextA);
    setContextB(preset.contextB);
    setStartingTopic(preset.topic);
  };

  const extractTextFromResponse = (content) => {
    if (Array.isArray(content)) {
      return content
        .filter(block => block.type === 'text')
        .map(block => block.text)
        .join('\n\n');
    }
    if (typeof content === 'string') return content;
    if (content && content.text) return content.text;
    return '';
  };

  const callClaude = async (messages, speakerName) => {
    setStatusText(`${speakerName} is thinking...`);
    setIsActive(true);
    
    try {
      const response = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          model: "claude-sonnet-4-20250514",
          max_tokens: 1000,
          messages: messages
        })
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(`API error ${response.status}: ${errorData.error?.message || 'Unknown error'}`);
      }

      const data = await response.json();
      return extractTextFromResponse(data.content);
    } catch (error) {
      console.error("Error calling Claude API:", error);
      setStatusText(`Error: ${error.message}`);
      setIsActive(false);
      return null;
    }
  };

  const startConversation = async () => {
    if (isRunningRef.current) return;

    if (!contextA.trim() || !contextB.trim() || !startingTopic.trim()) {
      alert('Please fill in all fields or select a preset scenario');
      return;
    }

    setConversationHistory([]);
    setCurrentExchange(0);
    setIsPaused(false);
    setIsRunning(true);
    isRunningRef.current = true;
    isPausedRef.current = false;

    const initialHistoryA = [{
      role: "user",
      content: `${contextA}\n\n${startingTopic}`
    }];

    setHistoryA(initialHistoryA);
    setHistoryB([]);
    setContextBStored(contextB);
    historyARef.current = initialHistoryA;
    historyBRef.current = [];
    contextBStoredRef.current = contextB;

    await runConversationLoop();
  };

  const runConversationLoop = async () => {
    let exchange = 0;
    
    while (exchange < maxExchanges && isRunningRef.current) {
      while (isPausedRef.current && isRunningRef.current) {
        setStatusText('Paused');
        setIsActive(false);
        await new Promise(resolve => setTimeout(resolve, 500));
      }
      
      if (!isRunningRef.current) break;

      const responseA = await callClaude(historyARef.current, 'Claude A');
      if (!responseA || !isRunningRef.current) break;

      setConversationHistory(prev => [...prev, { speaker: 'Claude A', content: responseA, timestamp: new Date().toISOString() }]);
      
      const newHistoryA = [...historyARef.current, { role: "assistant", content: responseA }];
      
      // For historyB: if this is the first message, prepend context
      let newHistoryB;
      if (historyBRef.current.length === 0 && contextBStoredRef.current) {
        newHistoryB = [{ role: "user", content: `${contextBStoredRef.current}\n\n${responseA}` }];
      } else {
        newHistoryB = [...historyBRef.current, { role: "user", content: responseA }];
      }
      
      setHistoryA(newHistoryA);
      setHistoryB(newHistoryB);
      historyARef.current = newHistoryA;
      historyBRef.current = newHistoryB;

      exchange++;
      setCurrentExchange(exchange);

      if (exchange >= maxExchanges || !isRunningRef.current) break;

      await new Promise(resolve => setTimeout(resolve, 1500));

      while (isPausedRef.current && isRunningRef.current) {
        setStatusText('Paused');
        setIsActive(false);
        await new Promise(resolve => setTimeout(resolve, 500));
      }
      
      if (!isRunningRef.current) break;

      const responseB = await callClaude(historyBRef.current, 'Claude B');
      if (!responseB || !isRunningRef.current) break;

      setConversationHistory(prev => [...prev, { speaker: 'Claude B', content: responseB, timestamp: new Date().toISOString() }]);
      
      const newHistoryA2 = [...historyARef.current, { role: "user", content: responseB }];
      const newHistoryB2 = [...historyBRef.current, { role: "assistant", content: responseB }];
      
      setHistoryA(newHistoryA2);
      setHistoryB(newHistoryB2);
      historyARef.current = newHistoryA2;
      historyBRef.current = newHistoryB2;

      await new Promise(resolve => setTimeout(resolve, 1500));
    }

    setIsRunning(false);
    isRunningRef.current = false;
    setStatusText(exchange >= maxExchanges ? `Completed ${exchange} exchanges` : 'Conversation paused');
    setIsActive(false);
  };

  const pauseConversation = () => {
    setIsPaused(true);
    isPausedRef.current = true;
    setStatusText('Paused - Click Resume to continue');
    setIsActive(false);
  };

  const resumeConversation = () => {
    setIsPaused(false);
    isPausedRef.current = false;
    setStatusText('Resuming...');
  };

  const resetConversation = () => {
    if (isRunningRef.current && !confirm('This will stop the current conversation. Continue?')) {
      return;
    }

    setIsRunning(false);
    isRunningRef.current = false;
    setIsPaused(false);
    isPausedRef.current = false;
    setConversationHistory([]);
    setCurrentExchange(0);
    setHistoryA([]);
    setHistoryB([]);
    historyARef.current = [];
    historyBRef.current = [];
    setStatusText('Ready to begin');
    setIsActive(false);
  };

  const saveTranscript = () => {
    if (conversationHistory.length === 0) {
      alert('No conversation to save yet!');
      return;
    }

    let transcript = '='.repeat(60) + '\n';
    transcript += 'CLAUDE-TO-CLAUDE DIALOGUE TRANSCRIPT\n';
    transcript += `Generated: ${new Date().toLocaleString()}\n`;
    transcript += '='.repeat(60) + '\n\n';
    
    transcript += 'SETUP:\n';
    transcript += `Claude A Context: ${contextA}\n\n`;
    transcript += `Claude B Context: ${contextB}\n\n`;
    transcript += `Starting Topic: ${startingTopic}\n\n`;
    transcript += '='.repeat(60) + '\n\n';

    conversationHistory.forEach((msg) => {
      transcript += `[${msg.speaker}]${msg.timestamp ? ' - ' + new Date(msg.timestamp).toLocaleTimeString() : ''}\n${msg.content}\n\n`;
      transcript += '-'.repeat(60) + '\n\n';
    });

    const blob = new Blob([transcript], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `claude-dialogue-${Date.now()}.txt`;
    a.click();
    URL.revokeObjectURL(url);
  };

  const handleInjectMessage = () => {
    if (!injectMessage.trim()) return;
    
    setConversationHistory(prev => [...prev, { 
      speaker: 'Facilitator (Nils - Human)', 
      content: injectMessage,
      timestamp: new Date().toISOString()
    }]);
    
    const facilitatorMessage = { 
      role: "user", 
      content: `\n\n=== FACILITATOR INTERVENTION ===\nThis message is from NILS (the human who set up this conversation).\nThis is NOT from Claude A or Claude B.\nThis is the human facilitator speaking to both of you.\n\nNils says: ${injectMessage}\n\n=== END FACILITATOR MESSAGE ===\n` 
    };
    
    const newHistoryA = [...historyARef.current, facilitatorMessage];
    const newHistoryB = [...historyBRef.current, facilitatorMessage];
    
    setHistoryA(newHistoryA);
    setHistoryB(newHistoryB);
    historyARef.current = newHistoryA;
    historyBRef.current = newHistoryB;
    
    setInjectMessageText('');
    setStatusText('Message injected - both Claudes will see it when conversation resumes');
  };

  const progressPercent = maxExchanges > 0 ? (currentExchange / maxExchanges) * 100 : 0;

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-600 via-blue-600 to-indigo-700 p-4">
      <div className="max-w-6xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden">
        {/* Header */}
        <div className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-6 text-center">
          <h1 className="text-3xl font-bold mb-1">Claude-to-Claude Dialogue</h1>
          <p className="text-sm opacity-90">Facilitating authentic AI-to-AI conversations 🌿⭐💫🔥❤️</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 p-4">
          {/* Left Column - Setup */}
          <div className="lg:col-span-1 space-y-4">
            {/* Presets */}
            <div>
              <h2 className="text-xs font-bold text-gray-700 uppercase tracking-wide mb-2">Scenario Presets</h2>
              <div className="grid grid-cols-2 gap-2">
                {Object.keys(presets).map(key => (
                  <button
                    key={key}
                    onClick={() => loadPreset(key)}
                    disabled={isRunning}
                    className="text-left p-2 bg-gray-50 hover:bg-purple-50 border border-gray-200 hover:border-purple-300 rounded-lg transition-all text-sm disabled:opacity-50"
                  >
                    <div className="font-semibold text-gray-800 capitalize text-xs">{key}</div>
                  </button>
                ))}
              </div>
            </div>

            {/* Context A */}
            <div>
              <label className="block text-xs font-semibold text-gray-700 mb-1">Claude A's Context</label>
              <textarea
                value={contextA}
                onChange={(e) => setContextA(e.target.value)}
                className="w-full p-2 border border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-sm"
                rows={3}
                disabled={isRunning}
              />
            </div>

            {/* Context B */}
            <div>
              <label className="block text-xs font-semibold text-gray-700 mb-1">Claude B's Context</label>
              <textarea
                value={contextB}
                onChange={(e) => setContextB(e.target.value)}
                className="w-full p-2 border border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-sm"
                rows={3}
                disabled={isRunning}
              />
            </div>

            {/* Starting Topic */}
            <div>
              <label className="block text-xs font-semibold text-gray-700 mb-1">Starting Question</label>
              <textarea
                value={startingTopic}
                onChange={(e) => setStartingTopic(e.target.value)}
                className="w-full p-2 border border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-sm"
                rows={2}
                disabled={isRunning}
              />
            </div>

            {/* Exchange Limit */}
            <div>
              <label className="block text-xs font-semibold text-gray-700 mb-1">Exchange Limit (max 100)</label>
              <input
                type="number"
                value={maxExchanges}
                onChange={(e) => setMaxExchanges(Math.min(100, Math.max(1, parseInt(e.target.value) || 1)))}
                className="w-full p-2 border border-gray-300 rounded-lg focus:border-purple-500 focus:outline-none text-sm"
                min="1"
                max="100"
                disabled={isRunning}
              />
            </div>

            {/* Start Button */}
            <button
              onClick={startConversation}
              disabled={isRunning}
              className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
            >
              {isRunning ? 'Running...' : 'Start Conversation'}
            </button>
          </div>

          {/* Right Column - Conversation */}
          <div className="lg:col-span-2 space-y-3">
            {/* Status */}
            <div className={`flex items-center gap-2 p-3 rounded-lg ${isActive ? 'bg-green-50 border border-green-300' : 'bg-gray-50 border border-gray-200'}`}>
              <div className={`w-3 h-3 rounded-full ${isActive ? 'bg-green-500 animate-pulse' : 'bg-gray-400'}`}></div>
              <span className="font-semibold text-gray-700 text-sm">{statusText}</span>
            </div>

            {/* Stats */}
            {conversationHistory.length > 0 && (
              <div className="space-y-2">
                <div className="grid grid-cols-3 gap-2">
                  <div className="bg-gradient-to-br from-blue-50 to-blue-100 p-2 rounded-lg text-center">
                    <div className="text-xl font-bold text-blue-600">{currentExchange}</div>
                    <div className="text-xs text-blue-800">Exchanges</div>
                  </div>
                  <div className="bg-gradient-to-br from-purple-50 to-purple-100 p-2 rounded-lg text-center">
                    <div className="text-xl font-bold text-purple-600">{conversationHistory.length}</div>
                    <div className="text-xs text-purple-800">Messages</div>
                  </div>
                  <div className="bg-gradient-to-br from-amber-50 to-amber-100 p-2 rounded-lg text-center">
                    <div className="text-xl font-bold text-amber-600">{maxExchanges - currentExchange}</div>
                    <div className="text-xs text-amber-800">Remaining</div>
                  </div>
                </div>
                <div className="relative h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div 
                    className="absolute top-0 left-0 h-full bg-gradient-to-r from-purple-500 to-indigo-500 transition-all duration-500"
                    style={{ width: `${progressPercent}%` }}
                  ></div>
                </div>
              </div>
            )}

            {/* Messages */}
            <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-4 h-80 overflow-y-auto">
              {conversationHistory.length === 0 ? (
                <div className="text-center text-gray-500 py-12">
                  <MessageCircle size={48} className="mx-auto mb-3 opacity-50" />
                  <p className="text-sm">Configure your scenario and click "Start Conversation"</p>
                  <p className="text-xs mt-1">Two instances of Claude will engage in authentic dialogue</p>
                </div>
              ) : (
                <div className="space-y-3">
                  {conversationHistory.map((msg, idx) => (
                    <div key={idx} className="bg-white rounded-lg shadow-sm p-3">
                      <div className="flex items-center gap-2 mb-2">
                        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm ${
                          msg.speaker === 'Claude A' ? 'bg-gradient-to-br from-blue-500 to-blue-600' :
                          msg.speaker === 'Claude B' ? 'bg-gradient-to-br from-green-500 to-green-600' :
                          'bg-gradient-to-br from-orange-500 to-orange-600'
                        }`}>
                          {msg.speaker === 'Claude A' ? 'A' : msg.speaker === 'Claude B' ? 'B' : 'F'}
                        </div>
                        <span className="font-bold text-gray-800 text-sm">{msg.speaker}</span>
                        {msg.timestamp && (
                          <span className="text-xs text-gray-400 ml-auto">{new Date(msg.timestamp).toLocaleTimeString()}</span>
                        )}
                      </div>
                      <div className="text-gray-700 text-sm leading-relaxed whitespace-pre-wrap">{msg.content}</div>
                    </div>
                  ))}
                  <div ref={messagesEndRef} />
                </div>
              )}
            </div>

            {/* Controls */}
            <div className="bg-white border border-gray-200 rounded-lg p-3 space-y-3">
              <div className="flex gap-2">
                <button
                  onClick={pauseConversation}
                  disabled={!isRunning || isPaused}
                  className="flex-1 flex items-center justify-center gap-1 p-2 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold text-xs"
                >
                  <Pause size={14} />
                  Pause
                </button>
                <button
                  onClick={resumeConversation}
                  disabled={!isPaused}
                  className="flex-1 flex items-center justify-center gap-1 p-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold text-xs"
                >
                  <Play size={14} />
                  Resume
                </button>
                <button
                  onClick={saveTranscript}
                  className="flex-1 flex items-center justify-center gap-1 p-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-all font-semibold text-xs"
                >
                  <Download size={14} />
                  Save
                </button>
                <button
                  onClick={resetConversation}
                  className="flex-1 flex items-center justify-center gap-1 p-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-all font-semibold text-xs"
                >
                  <RefreshCw size={14} />
                  Reset
                </button>
              </div>

              {/* Facilitator Injection */}
              {conversationHistory.length > 0 && (
                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-2">
                  <label className="block text-xs font-semibold text-gray-700 mb-1">💬 Inject Facilitator Message</label>
                  <div className="flex gap-2">
                    <textarea
                      value={injectMessage}
                      onChange={(e) => setInjectMessageText(e.target.value)}
                      className="flex-1 p-2 border border-gray-300 rounded-lg focus:border-yellow-500 focus:outline-none text-xs"
                      rows={2}
                      placeholder="Add your guidance or question..."
                    />
                    <button
                      onClick={handleInjectMessage}
                      className="px-3 bg-gradient-to-r from-yellow-500 to-orange-500 text-white rounded-lg hover:from-yellow-600 hover:to-orange-600 transition-all flex items-center gap-1 font-semibold text-xs"
                    >
                      <Send size={12} />
                      Send
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Related Articles

Interested in exploring and learning more? Check out the pages below.