Live Demo

Try chatting with AI directly in the chat window below. It works completely without any server setup or API keys.

Created using Puter.JS

Introduction to Puter.js

Puter.js is the JavaScript SDK for Puter, a browser-based cloud OS. It’s an open-source project that started in Canada in 2022 and is being developed on GitHub under the AGPL-3.0 license.

Key Features

  • Open Source: Source code available on GitHub with community contributions
  • Serverless Backend: Direct frontend access to AI, storage, authentication, and more
  • Browser Native: Use with just CDN loading - no installation or build process required
  • Self-Hosting: Build your own Puter platform on your own servers if desired

Traditional Approach vs Puter.js

Traditional Approach: Complex infrastructure setup including backend servers, API key management, database configuration, deployment environments, etc.

Puter.js: Implement all functionality with just frontend JavaScript code

Implementation

SDK Loading

1

<script src="https://js.puter.com/v2/"></script>

Load directly from CDN to access all backend services including AI, storage, authentication, and more.

Message Management

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const messages = [];

function addMessage(msg, isUser) {
    const messagesDiv = document.getElementById("messages");
    const messageDiv = document.createElement("div");
    messageDiv.classList.add("message");
    if (isUser) {
        messageDiv.classList.add("user-message");
    }
    messageDiv.textContent = msg;
    messagesDiv.appendChild(messageDiv);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

Maintain conversation context as an array and update the UI in real-time through DOM manipulation.

AI API Calls

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

function sendMessage() {
    const input = document.getElementById("input-message");
    const message = input.value.trim();
    if (message) {
        addMessage(message, true);
        input.value = '';
        messages.push({ content: message, role: 'user' });
        
        puter.ai.chat(messages).then(response => {
            addMessage(response, false);
            messages.push(response.message);
        }).catch(error => {
            console.error("AI response error:", error);
        });
    }
}

Validate user input and send conversation context to puter.ai.chat() to receive AI responses.

Conclusion

With Puter.js, you can implement practical AI applications with minimal code without complex backend setup.