Tutorials

Free, Unlimited Google AI API

This tutorial will show you how to use Puter.js to access Google AI's powerful language models for free, without any API keys or usage restrictions. Using Puter.js, you can leverage models like Gemini 2.5 Flash, Gemini 2.5 Pro, Gemini 2.0 Flash, and the Gemma series for various tasks including text generation, image analysis, complex reasoning, and more.

Puter is the inventor of the "User-Pays" model, which lets developers add AI features to their apps while end users handle their own usage costs. This approach allows developers to tap into advanced AI tools for free, with no need for API keys, backend setup, or server-side code.

Getting Started

Puter.js works without any API keys or configuration. 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>

You're now ready to use Puter.js for free access to Google AI capabilities. No API keys or server-side setup are required.

Example 1Basic Text Generation with Gemini 2.5 Flash

Here's a simple example showing how to generate text using Gemini 2.5 Flash:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.chat("Explain the concept of machine learning in simple terms", {
            model: 'google/gemini-2.5-flash'
        }).then(response => {
            puter.print(response);
        });
    </script>
</body>
</html>

Example 2Using Gemini 2.5 Pro for Complex Reasoning

For more sophisticated tasks requiring deeper analysis, use Gemini 2.5 Pro:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.chat(
            "Compare and contrast the economic impacts of renewable versus non-renewable energy sources over the next 20 years", 
            {
                model: 'google/gemini-2.5-pro'
            }
        ).then(response => {
            puter.print(response);
        });
    </script>
</body>
</html>

Example 3Streaming Responses

For longer responses, use streaming to get results in real-time:

<html>
<body>
    <div id="output"></div>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        async function streamResponses() {
            const outputDiv = document.getElementById('output');
            
            outputDiv.innerHTML += '<h2>Gemini 2.5 Flash Streaming Response:</h2>';
            const response = await puter.ai.chat(
                "Explain the process of photosynthesis in detail", 
                {
                    model: 'google/gemini-2.5-flash',
                    stream: true
                }
            );
            
            for await (const part of response) {
                if (part?.text) {
                    outputDiv.innerHTML += part.text.replaceAll('\n', '<br>');
                }
            }            
        }

        streamResponses();
    </script>
</body>
</html>

Example 4Image Analysis with Gemini

To analyze images, simply provide an image URL to puter.ai.chat():

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <img src="https://assets.puter.site/doge.jpeg" id="image">
    <script>
        puter.ai.chat(
            "What do you see in this image? Describe it in detail.",
            "https://assets.puter.site/doge.jpeg",
            { model: 'google/gemini-2.5-flash' }
        ).then(response => {
            puter.print(response);
        });
    </script>
</body>
</html>

Example 5Comparing Different Google AI Models

Here's how to compare responses from different Google AI models:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
    (async () => {
        const prompt = 'Explain quantum entanglement in simple terms.';
        
        // Gemini 2.5 Pro
        const proResp = await puter.ai.chat(
            prompt,
            {model: 'google/gemini-2.5-pro', stream: true}
        );
        puter.print('<h2>Gemini 2.5 Pro Response:</h2>');
        for await (const part of proResp) {
            if(part?.reasoning) {
                puter.print(part.reasoning.replaceAll('\n', '<br>'));
            }
            if (part?.text) {
                puter.print(part.text.replaceAll('\n', '<br>'));
            }
        }

        // Gemini 2.5 Flash
        const flashResp = await puter.ai.chat(
            prompt,
            {model: 'google/gemini-2.5-flash', stream: true}
        );
        puter.print('<h2>Gemini 2.5 Flash Response:</h2>');
        for await (const part of flashResp) {
            if (part?.text) {
                puter.print(part.text.replaceAll('\n', '<br>'));
            }
        }

        // Gemini 2.0 Flash
        const flash20Resp = await puter.ai.chat(
            prompt,
            {model: 'google/gemini-2.0-flash-001', stream: true}
        );
        puter.print('<h2>Gemini 2.0 Flash Response:</h2>');
        for await (const part of flash20Resp) {
            if (part?.text) {
                puter.print(part.text.replaceAll('\n', '<br>'));
            }
        }
    })();
    </script>
</body>
</html>

Example 6Using Gemma Models for Lightweight Tasks

The Gemma series offers efficient, lightweight models perfect for quick tasks:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Using Gemma 3 12B model
        puter.ai.chat(
            "Write a haiku about coding",
            { model: 'google/gemma-3-12b-it:free' }
        ).then(response => {
            puter.print('<h2>Gemma 3 12B Response:</h2>');
            puter.print(response);
        });
    </script>
</body>
</html>

Example 7Control Output with Temperature

Control the creativity and randomness of responses using the temperature parameter:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        (async () => {
            // Low temperature (0.2) for focused, deterministic output
            const focused = await puter.ai.chat(
                'Write a creative story about a robot', 
                { 
                    model: 'google/gemini-2.5-flash',
                    temperature: 0.2
                }
            );
            puter.print('<b>Low temperature (0.2) - More Focused:</b><br>' + focused + '<br><br>');
            
            // High temperature (0.9) for creative, varied output  
            const creative = await puter.ai.chat(
                'Write a creative story about a robot',
                { 
                    model: 'google/gemini-2.5-flash',
                    temperature: 0.9
                }
            );
            puter.print('<b>High temperature (0.9) - More Creative:</b><br>' + creative);
        })();
    </script>
</body>
</html>

All Available Google AI Models

The following Google AI models are available for free use with Puter.js:

Gemini Models

google/gemini-2.0-flash-001
google/gemini-2.0-flash-exp:free
google/gemini-2.0-flash-lite-001
google/gemini-2.5-flash
google/gemini-2.5-flash-image-preview
google/gemini-2.5-flash-image-preview:free
google/gemini-2.5-flash-lite
google/gemini-2.5-flash-lite-preview-06-17
google/gemini-2.5-pro
google/gemini-2.5-pro-exp-03-25
google/gemini-2.5-pro-preview
google/gemini-2.5-pro-preview-05-06
google/gemini-flash-1.5
google/gemini-flash-1.5-8b
google/gemini-pro-1.5

Gemma Models

google/gemma-2-27b-it
google/gemma-2-9b-it
google/gemma-2-9b-it:free
google/gemma-3-12b-it
google/gemma-3-12b-it:free
google/gemma-3-27b-it
google/gemma-3-27b-it:free
google/gemma-3-4b-it
google/gemma-3-4b-it:free
google/gemma-3n-e2b-it:free
google/gemma-3n-e4b-it
google/gemma-3n-e4b-it:free

That's it! You now have free access to Google AI's powerful language models using Puter.js. This allows you to add sophisticated AI capabilities to your web applications without worrying about API keys, usage limits, or backend infrastructure.

Related

Free, Serverless AI and Cloud

Start creating powerful web applications with Puter.js in seconds!

Get Started Now

Read the Docs Try the Playground