JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<header>
    <h1>Claude Chat (via Puter.js)</h1>
</header>

<select id="model-select">
    <option value="claude-sonnet-4">Claude Sonnet 4 (Fast, Balanced)</option>
    <option value="claude-opus-4">Claude Opus 4 (Smarter, Slower)</option>
</select>

<div id="chat"></div>

<div id="input-container">
    <input type="text" id="user-input" placeholder="Type your message here..." />
    <button id="send-button">Send</button>
</div>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    background-color: #3f51b5;
    color: white;
    padding: 1rem;
    text-align: center;
}

#chat {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    height: 60vh;
}

.message {
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: 10px;
    max-width: 80%;
}

.user {
    background-color: #d1eaff;
    align-self: flex-end;
    margin-left: auto;
}

.bot {
    background-color: #e0e0e0;
    align-self: flex-start;
    margin-right: auto;
}

#input-container {
    display: flex;
    padding: 1rem;
    border-top: 1px solid #ccc;
    background-color: #fff;
}

#user-input {
    flex: 1;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
}

#send-button {
    padding: 0.75rem 1rem;
    margin-left: 1rem;
    font-size: 1rem;
    background-color: #3f51b5;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#model-select {
    margin: 1rem;
    font-size: 1rem;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const sendButton = document.getElementById('send-button');
    const userInput = document.getElementById('user-input');
    const chatBox = document.getElementById('chat');
    const modelSelect = document.getElementById('model-select');

    function addMessage(text, sender) {
        const msg = document.createElement('div');
        msg.className = `message ${sender}`;
        msg.innerText = text;
        chatBox.appendChild(msg);
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    async function sendMessage() {
        const input = userInput.value.trim();
        const model = modelSelect.value;
        if (!input) return;

        addMessage(input, 'user');
        userInput.value = '';

        const botMsg = document.createElement('div');
        botMsg.className = 'message bot';
        chatBox.appendChild(botMsg);
        chatBox.scrollTop = chatBox.scrollHeight;

        try {
            const response = await puter.ai.chat(input, {
                model: model,
                stream: true
            });

            for await (const part of response) {
                botMsg.innerText += part?.text || '';
                chatBox.scrollTop = chatBox.scrollHeight;
            }
        } catch (error) {
            botMsg.innerText = '[Error: Failed to get response from Claude]';
        }
    }

    sendButton.addEventListener('click', sendMessage);
    userInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') sendMessage();
    });
});