Tutorials
Free, Unlimited Sonoma AI API
This tutorial will show you how to use Puter.js to access the new Sonoma models for free, without needing API keys or backend infrastructure. Puter.js is completely free for apps, allowing you to provide your users with powerful AI capabilities featuring a massive 2 million token context window, image analysis, and parallel tool calling.
Puter is the pioneer of the "User Pays" model, which allows developers to incorporate AI capabilities into their applications while each user covers their own usage costs. This model enables developers to offer advanced AI capabilities to users at no cost to themselves, without any API keys or server-side setup.
Getting Started
You can use Puter.js without any API keys or sign-ups. To start using Puter.js, include the following script tag in your HTML file, either in the <head> or <body> section:
<script src="https://js.puter.com/v2/"></script>
Nothing else is required to start using Puter.js for free access to Sonoma AI's frontier models.
Example 1Basic text generation with Sonoma AI
To generate text using Sonoma AI, use the puter.ai.chat() function:
puter.ai.chat("Explain quantum computing and its potential applications", { model: "openrouter/sonoma-dusk-alpha" })
.then(response => {
puter.print(response);
});
Full code example:
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat("Explain quantum computing and its potential applications", { model: "openrouter/sonoma-dusk-alpha" })
.then(response => {
puter.print(response);
});
</script>
</body>
</html>
Example 2Image analysis capabilities
Sonoma supports image inputs for comprehensive visual analysis:
<html>
<body>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.chat(
"Analyze this image in detail. What can you tell me about the composition, colors, and any objects or people present?",
"https://assets.puter.site/doge.jpeg",
{ model: "openrouter/sonoma-dusk-alpha" }
).then(response => {
puter.print(response);
});
</script>
</body>
</html>
Example 3Streaming responses for real-time interaction
For longer responses, use streaming to provide a better user experience:
<html>
<body>
<div id="response"></div>
<script src="https://js.puter.com/v2/"></script>
<script>
async function streamResponse() {
const outputDiv = document.getElementById('response');
const response = await puter.ai.chat(
"Write a comprehensive analysis of artificial intelligence trends in 2025, including emerging technologies and their potential impact on various industries",
{model: 'openrouter/sonoma-sky-alpha', stream: true}
);
for await (const part of response) {
if (part?.text) {
outputDiv.innerHTML += part.text;
}
}
}
streamResponse();
</script>
</body>
</html>
This example shows how streaming provides immediate feedback to users as Sonoma generates its comprehensive response.
Example 4Interactive chat application
Here's a complete chat interface that showcases Sonoma's conversational capabilities:
<html>
<body>
<div style="max-width: 900px; margin: 20px auto; font-family: Arial, sans-serif;">
<h1>Chat with Sonoma</h1>
<p style="color: #666;">Powered by Sonoma's frontier model with 2M token context</p>
<div id="chat-history" style="height: 450px; border: 1px solid #ddd; padding: 15px; overflow-y: scroll; margin-bottom: 10px; background: #fafafa;"></div>
<input type="text" id="user-input" style="width: 70%; padding: 12px; border: 1px solid #ccc; border-radius: 4px;" placeholder="Ask Sonoma anything..." />
<button id="send-button" style="width: 28%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 4px; margin-left: 2%;">Send</button>
</div>
<script src="https://js.puter.com/v2/"></script>
<script>
const chatHistory = document.getElementById('chat-history');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
function addMessage(sender, message, isStreaming = false) {
const messageDiv = document.createElement('div');
messageDiv.style.marginBottom = '15px';
messageDiv.style.padding = '10px';
messageDiv.style.borderRadius = '8px';
if (sender === 'You') {
messageDiv.style.backgroundColor = '#e3f2fd';
messageDiv.style.marginLeft = '20%';
} else {
messageDiv.style.backgroundColor = '#f5f5f5';
messageDiv.style.marginRight = '20%';
}
messageDiv.innerHTML = `<strong>${sender}:</strong> <span class="message-content">${message}</span>`;
chatHistory.appendChild(messageDiv);
chatHistory.scrollTop = chatHistory.scrollHeight;
if (isStreaming) {
return messageDiv.querySelector('.message-content');
}
}
async function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
addMessage('You', message);
userInput.value = '';
sendButton.disabled = true;
const responseSpan = addMessage('Sonoma', '', true);
try {
const response = await puter.ai.chat(message, {
model: 'openrouter/sonoma-sky-alpha',
stream: true
});
for await (const part of response) {
if (part?.text) {
responseSpan.innerHTML += part.text;
chatHistory.scrollTop = chatHistory.scrollHeight;
}
}
} catch (error) {
responseSpan.innerHTML = `Error: ${error.message}`;
}
sendButton.disabled = false;
}
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
// Add welcome message
addMessage('Sonoma', 'Hello! I\'m Sonoma, a frontier model with a 2 million token context window. I can help with complex reasoning, image analysis, and parallel tool execution. How can I assist you today?');
</script>
</body>
</html>
Available Models
The following Sonoma models are currently supported by Puter.js:
openrouter/sonoma-dusk-alpha
openrouter/sonoma-sky-alpha
Both models feature the same capabilities: 2 million token context window, image input support, and parallel tool calling. Choose based on your specific performance and accuracy requirements.
That's it! You now have free access to the Sonoma frontier models using Puter.js. With the massive 2 million token context window, image analysis capabilities, and parallel tool calling, you can build sophisticated applications that handle complex reasoning tasks without needing API keys or backend infrastructure. True serverless AI at the frontier!
Related
Free, Serverless AI and Cloud
Start creating powerful web applications with Puter.js in seconds!
Get Started Now