On this page
Getting StartedExample 1: Use gpt-5-nano for text generationExample 2: Generate images with GPT ImageExample 3: Analyze imagesExample 4: Use different OpenAI modelsExample 5: Stream responses for longer queriesExample 6: Control randomness and length with `temperature` and `max_tokens`Example 7: Tool/Function CallingExample 9: Basic text-to-speechExample 9: Using GPT-OSS modelExample 10: Code generation with CodexList of supported text generation modelsList of supported image generation modelsList of supported text-to-speech modelsRelated
Tutorials

Free, Unlimited OpenAI API

Nariman Jelveh
On this page
Getting StartedExample 1: Use gpt-5-nano for text generationExample 2: Generate images with GPT ImageExample 3: Analyze imagesExample 4: Use different OpenAI modelsExample 5: Stream responses for longer queriesExample 6: Control randomness and length with `temperature` and `max_tokens`Example 7: Tool/Function CallingExample 9: Basic text-to-speechExample 9: Using GPT-OSS modelExample 10: Code generation with CodexList of supported text generation modelsList of supported image generation modelsList of supported text-to-speech modelsRelated

This tutorial will show you how to use Puter.js to access OpenAI API capabilities for free, without needing an OpenAI API key. Puter.js is completely free and open-source, allowing you to provide your users with powerful AI capabilities without any API keys or usage restrictions. Using Puter.js, you can access GPT-5.2, GPT-5.1, GPT-5, GPT-5.1-Codex, GPT-5.1-Codex-Max, GPT-5.1-Codex-Mini, GPT-4o, GPT-4.1, GPT-4.5, o1, o3, o4, GPT Image, and DALL-E directly from your frontend code without any server-side setup.

Puter is the pioneer of the "User-Pays" model, which allows developers to incorporate AI capabilities into their applications while each user will cover 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 OpenAI API models and capabilities.

Example 1: Use gpt-5-nano for text generation

To generate text using GPT-5 nano, use the puter.ai.chat() function:

puter.ai.chat("What are the benefits of exercise?", { model: "gpt-5-nano" })
    .then(response => {
        puter.print(response);
    });

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.chat("What are the benefits of exercise?", { model: "gpt-5-nano" })
            .then(response => {
                puter.print(response);
            });
    </script>
</body>
</html>

Example 2: Generate images with GPT Image

To create images using GPT Image, use the puter.ai.txt2img() function:

puter.ai.txt2img("A futuristic cityscape at night", { model: "gpt-image-1.5" })
    .then(imageElement => {
        document.body.appendChild(imageElement);
    });

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img("A futuristic cityscape at night", { model: "gpt-image-1.5" })
            .then(imageElement => {
                document.body.appendChild(imageElement);
            });
    </script>
</body>
</html>

Find more image generation examples in the GPT Image API tutorial.

Example 3: Analyze images

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

puter.ai.chat(
    "What do you see in this image?", 
    "https://assets.puter.site/doge.jpeg",
    { model: "gpt-5-nano" }
)
.then(response => {
    puter.print(response);
});

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.chat(
            "What do you see in this image?", 
            "https://assets.puter.site/doge.jpeg",
            { model: "gpt-5-nano" }
        )
        .then(response => {
            puter.print(response);
        });
    </script>
</body>
</html>

Example 4: Use different OpenAI models

You can specify different OpenAI models using the model parameter, for example gpt-5.1, gpt-5, gpt-5-nano, gpt-5-mini, gpt-5-chat-latest:

// Using gpt-5.2 model
puter.ai.chat(
    "Write a short poem about coding",
    { model: "gpt-5.2" }
).then(response => {
    puter.print(response);
});

// Using gpt-5.2-chat model
puter.ai.chat(
    "Write a short poem about coding",
    { model: "gpt-5.2-chat" }
).then(response => {
    puter.print(response);
});

// Using gpt-5.2-pro model
puter.ai.chat(
    "Write a short poem about coding",
    { model: "gpt-5.2-pro", driver: "openrouter" }
).then(response => {
    puter.print(response);
});

// Using gpt-5.1 model
puter.ai.chat(
    "Write a short poem about coding",
    { model: "gpt-5.1" }
).then(response => {
    puter.print(response);
});

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Using gpt-5.2 model
        puter.ai.chat(
            "Write a short poem about coding",
            { model: "gpt-5.2" }
        ).then(response => {
            puter.print(response);
        });

        // Using gpt-5.2-chat model
        puter.ai.chat(
            "Write a short poem about coding",
            { model: "gpt-5.2-chat" }
        ).then(response => {
            puter.print(response);
        });

        // Using gpt-5.2-pro model
        puter.ai.chat(
            "Write a short poem about coding",
            { model: "gpt-5.2-pro", driver: "openrouter" }
        ).then(response => {
            puter.print(response);
        });

        // Using gpt-5.1 model
        puter.ai.chat(
            "Write a short poem about coding",
            { model: "gpt-5.1" }
        ).then(response => {
            puter.print("<h2>Using gpt-5.1 model</h2>");
            puter.print(response);
        });
    </script>
</body>
</html>

Example 5: Stream responses for longer queries

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

async function streamResponse() {
    const response = await puter.ai.chat(
        "Explain the theory of relativity in detail", 
        {stream: true}
    );
    
    for await (const part of response) {
        puter.print(part?.text);
    }
}

streamResponse();

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        async function streamResponse() {
            const response = await puter.ai.chat(
                "Explain the theory of relativity in detail", 
                {stream: true, model: "gpt-5-nano"}
            );
            
            for await (const part of response) {
                puter.print(part?.text);
            }
        }

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

Example 6: Control randomness and length with `temperature` and `max_tokens`

To control randomness and length, you can use the temperature and max_tokens parameters in the options object:

<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(
                'Tell me about planet Mars', 
                { 
                    temperature: 0.2,
                    max_tokens: 10 
                }
            );
            puter.print('<b>Low temperature (0.2), max_tokens: 10:</b><br>' + focused + '<br><br>');
            
            // High temperature (0.8) for creative, varied output  
            const creative = await puter.ai.chat(
                'Tell me about planet Mars',
                { 
                    temperature: 0.8,
                    max_tokens: 50
                }
            );
            puter.print('<b>High temperature (0.8), max_tokens: 50:</b><br>' + creative);
        })();
    </script>
</body>
</html>

This example shows how temperature affects output randomness (lower = more focused, higher = more creative) and how max_tokens limits the response length.

Example 7: Tool/Function Calling

Here's a concise section for tool/function calling:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Define a calculator tool
        const tools = [{
            type: "function",
            function: {
                name: "calculate",
                description: "Perform basic math operations",
                parameters: {
                    type: "object",
                    properties: {
                        operation: {
                            type: "string",
                            enum: ["add", "subtract", "multiply", "divide"]
                        },
                        a: { type: "number" },
                        b: { type: "number" }
                    },
                    required: ["operation", "a", "b"]
                }
            }
        }];

        // Ask the AI to use the tool
        puter.ai.chat("What is 15 multiplied by 7?", { tools }).then(response => {
            if (response.message.tool_calls) {
                const call = response.message.tool_calls[0];
                const args = JSON.parse(call.function.arguments);
                
                // Execute the function based on the AI's request
                let result;
                if (args.operation === "multiply") {
                    result = args.a * args.b;
                }
                
                puter.print(`AI requested: ${args.a} × ${args.b} = ${result}`);
            }
        });
    </script>
</body>
</html>

This example shows how to define tools that the AI can call and process the function calls in your code.

Example 9: Basic text-to-speech

OpenAI supports text-to-speech capability which you can use via Puter.js.

puter.ai.txt2speech("Hello world! This is OpenAI text-to-speech.", {
    provider: "openai",
})
.then(audio => {
    audio.setAttribute("controls", "");
    document.body.appendChild(audio);
});

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.print("Loading...");
        puter.ai.txt2speech("Hello world! This is OpenAI text-to-speech.", {
            provider: "openai",
        })
        .then(audio => {
            audio.setAttribute("controls", "");
            document.body.appendChild(audio);
        });
    </script>
</body>
</html>

Find more text-to-speech examples in the OpenAI Text to Speech API tutorial.

Example 9: Using GPT-OSS model

GPT-OSS is open source model family from OpenAI.

puter.ai
    .chat(
        "Debug this logic: If I have 3 apples and give away 5, how many do I have?",
        { model: "openrouter:openai/gpt-oss-120b", stream: true }
    )
    .then(async (resp) => {
        for await (const part of resp) {
        if (part?.reasoning) puter.print(part?.reasoning);
        else puter.print(part?.text);
        }
    });

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
      puter.ai
        .chat(
          "Debug this logic: If I have 3 apples and give away 5, how many do I have?",
          { model: "openrouter:openai/gpt-oss-120b", stream: true }
        )
        .then(async (resp) => {
          for await (const part of resp) {
            if (part?.reasoning) puter.print(part?.reasoning);
            else puter.print(part?.text);
          }
        });
    </script>
</body>
</html>

Find more examples in the GPT OSS API tutorial.

Example 10: Code generation with Codex

Codex is OpenAI's code generation model family, optimized for programming tasks.

puter.ai.chat(
    "Write a Python function that implements binary search on a sorted array",
    { model: "openrouter:openai/gpt-5.1-codex" }
)
.then(response => {
    puter.print(response);
});

Full code example:

<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.chat(
            "Write a Python function that implements binary search on a sorted array",
            { model: "openrouter:openai/gpt-5.1-codex" }
        )
        .then(response => {
            puter.print(response);
        });
    </script>
</body>
</html>

Find more Codex examples in the Codex API tutorial.

List of supported text generation models

The following OpenAI models are supported by Puter.js, which can be used with the puter.ai.chat() function:

gpt-5.2
gpt-5.2-chat
gpt-5.2-pro
gpt-5.1
gpt-5.1-chat-latest
gpt-5.1-codex
gpt-5.1-codex-max
gpt-5.1-codex-mini
gpt-5
gpt-5-mini
gpt-5-nano
gpt-5-chat-latest
gpt-4.1
gpt-4.1-mini
gpt-4.1-nano
gpt-4.5-preview
gpt-4o
gpt-4o-mini
o1
o1-mini
o1-pro
o3
o3-mini
o4-mini
openrouter:openai/gpt-oss-120b
openrouter:openai/gpt-oss-120b:exacto
openrouter:openai/gpt-oss-20b
openrouter:openai/gpt-oss-20b:free
openrouter:openai/gpt-oss-safeguard-20b
openrouter:openai/codex-mini
openrouter:openai/gpt-5-codex
openrouter:openai/gpt-5.1-codex
openrouter:openai/gpt-5.1-codex-max
openrouter:openai/gpt-5.1-codex-mini

List of supported image generation models

The following GPT Image models are supported by Puter.js, which can be used with the puter.ai.txt2img() function:

gpt-image-1.5
gpt-image-1-mini
gpt-image-1
dall-e-3
dall-e-2

List of supported text-to-speech models

The following OpenAI text-to-speech models are supported by Puter.js, which can be used with the puter.ai.txt2speech() function:

gpt-4o-mini-tts
tts-1
tts-1-hd



That's it! You now have a free alternative to the OpenAI API using Puter.js. This allows you to access GPT-5.2, GPT-5.1, GPT-5, GPT-4o, o4, o3-mini, o1-mini, and DALL-E capabilities without needing an API key or a backend. True serverless AI!

Free, Serverless AI and Cloud

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

Get Started Now

Read the Docs • Try the Playground