Puter.js gives you access to auth, cloud storage, databases, and AI (Claude, GPT, Gemini, and 500+ other models) with no API keys and no infrastructure setup. The entire library is a single `<script>` tag or the `@heyputer/puter.js` npm module.

This is also what makes Puter.js work so well as the backend for AI-generated apps. There is nothing to configure: no keys to obtain, no servers to provision, no SDK to initialize. AI coding tools and platforms like Claude Code, Codex, OpenCode, Lovable, and Replit can generate complete, working apps in a single shot with Puter.js. The API is small and consistent enough for language models to use correctly, and the full reference is published as [llms.txt](https://docs.puter.com/llms.txt) so AI tools can read it in one request.

<div class="browser-window">
    <div class="titlebar">
        <div class="buttons">
            <div class="button close"></div>
            <div class="button minimize"></div>
            <div class="button maximize"></div>
        </div>
    </div>
    <div class="address-bar" style="display: flex; align-items: center;">
        <svg style="margin-right: 20px;" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-icon lucide-arrow-left"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
        <svg style="margin-right: 20px;" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right-icon lucide-arrow-right"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
        <svg style="margin-right: 20px;" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-cw-icon lucide-rotate-cw"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>
        <span style="flex-grow: 1; padding: 5px; background: white; border-radius: 15px; padding-left: 20px; display: flex; align-items: center; font-size: 13px;">
            <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-keyhole-icon lucide-lock-keyhole"><rect fill="#00bc2f" x="3" y="10" width="18" height="12" rx="2"/><circle fill="#fff" cx="12" cy="16" r="1"/><path stroke="#00bc2f" d="M7 10V7a5 5 0 0 1 10 0v3"/></svg>
            https://super-magical-website.com
        </span>
    </div>
    <div class="content" style="position: relative; margin-top: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 40px;">
        <div style="width: 620px; height: 120px; position: relative; font-weight: 500;">
            <div style="width: 100px; height: 100px; position: absolute; left:10px;">
                <div class="feature-name-top">OpenAI</div>
                <div  class="feature-line-top"></div><div></div>
            </div>
            <div style="width: 100px; height: 65px; position: absolute; left: 120px; bottom: 20px;">
                <div class="feature-name-top">Cloud Storage</div>
                <div  class="feature-line-top"></div><div></div>
            </div>
            <div style="width: 150px; height: 100px; position: absolute; left: 230px;">
                <div class="feature-name-top">Claude</div>
                <div  class="feature-line-top"></div><div></div>
            </div>
            <div style="width: 100px; height: 70px; position: absolute; left: 400px; bottom: 20px;">
                <div class="feature-name-top">Gemini</div>
                <div  class="feature-line-top"></div><div></div>
            </div>
            <div style="width: 100px; height: 100px; position: absolute; left: 500px;">
                <div class="feature-name-top">NoSQL</div>
                <div  class="feature-line-top"></div><div></div>
            </div>
        </div>
        <p class="script-tag">&lt;script src=&quot;<span class="url">https://js.puter.com/v2/</span>&quot;&gt;&lt;/script&gt;</p>
        <div style="width: 620px; height: 120px; position: relative; font-weight: 500;">
            <div style="width: 150px; height: 100px; position: absolute; left:10px;">
                <div>
                    <div style="width: 50%; float: left; border-right: 1px dotted; height: calc(100% - 30px);"></div>
                    <div></div>
                </div>
                <div style="width: 100%; text-align:center; position: absolute; bottom: 0;">Hosting API</div>
            </div>
            <div style="width: 100px; height: 130px; position: absolute; left:160px;">
                <div>
                    <div style="width: 50%; float: left; border-right: 1px dotted; height: calc(100% - 30px);"></div>
                    <div></div>
                </div>
                <div style="width: 100%; text-align:center; position: absolute; bottom: 0;">Auth</div>
            </div>
            <div style="width: 150px; height: 100px; position: absolute; left:250px;">
                <div>
                    <div style="width: 50%; float: left; border-right: 1px dotted; height: calc(100% - 30px);"></div>
                    <div></div>
                </div>
                <div style="width: 100%; text-align:center; position: absolute; bottom: 0;">OCR</div>
            </div>
            <div style="width: 100px; height: 150px; position: absolute; left:400px;">
                <div>
                    <div style="width: 50%; float: left; border-right: 1px dotted; height: calc(100% - 30px);"></div>
                    <div></div>
                </div>
                <div style="width: 100%; text-align:center; position: absolute; bottom: 0;">Networking</div>
            </div>
            <div style="width: 105px; height: 100px; position: absolute; left:500px;">
                <div>
                    <div style="width: 50%; float: left; border-right: 1px dotted; height: calc(100% - 30px);"></div>
                    <div></div>
                </div>
                <div style="width: 100%; text-align:center; position: absolute; bottom: 0;">Text to Speech</div>
            </div>
        </div>
    </div>
</div>

Additionally, with Puter.js, you as the developer pay nothing since each user of your app [covers their own Cloud and AI usage](/user-pays-model/). Whether your app has 1 user or 1 million users, it costs you zero to run. Puter.js gives you infinitely scalable infrastructure, completely free.

Puter.js is powered by [Puter](https://github.com/HeyPuter/puter), the open-source cloud operating system with a heavy focus on privacy. Puter does not use tracking technologies and does not monetize or even collect personal information.

## Examples

<div style="overflow:hidden; margin-bottom: 30px;">
    <div class="example-group active" data-section="ai" data-icon="ai_outline" data-icon-active="ai_active"><i class="icon"></i><span>AI</span></div>
    <div class="example-group" data-section="fs" data-icon="fs_outline" data-icon-active="fs_active"><i class="icon"></i><span>Cloud Storage</span></div>
    <div class="example-group" data-section="kv" data-icon="kv_outline" data-icon-active="kv_active"><i class="icon"></i><span>NoSQL Database</span></div>
    <div class="example-group" data-section="hosting" data-icon="hosting_outline" data-icon-active="hosting_active"><i class="icon"></i><span>Hosting</span></div>
    <div class="example-group" data-section="auth" data-icon="auth_outline" data-icon-active="auth_active"><i class="icon"></i><span>Auth</span></div>
    <div class="example-group" data-section="networking" data-icon="networking_outline" data-icon-active="networking_active"><i class="icon"></i><span>Networking</span></div>
</div>

<div class="example-content" data-section="fs">

#### Write a file to the cloud

```html;intro-fs-write
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Create a new file called "hello.txt" containing "Hello, world!"
        puter.fs.write('hello.txt', 'Hello, world!').then((file) => {
            puter.print(`File written successfully at: ${file.path}`);
        })
    </script>
</body>
</html>
```

<strong class="example-title" style="margin-top: 40px;">Read a file from the cloud</strong>

```html;fs-read
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        (async () => {
            // (1) Create a random text file
            let filename = puter.randName() + ".txt";
            await puter.fs.write(filename, "Hello world! I'm a file!");
            puter.print(`"${filename}" created<br>`);

            // (2) Read the file and print its contents
            let blob = await puter.fs.read(filename);
            let content = await blob.text();
            puter.print(`"${filename}" read (content: "${content}")<br>`);
        })();
    </script>
</body>
</html>
```

</div>

<div class="example-content" data-section="kv">

#### Save user preference in the cloud Key-Value Store

```html;intro-kv-set
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // (1) Save user preference
        puter.kv.set('userPreference', 'darkMode').then(() => {
            // (2) Get user preference
            puter.kv.get('userPreference').then(value => {
                puter.print(`User preference: ${value}`);
            });
        })
    </script>
</body>
</html>
```

</div>

<div class="example-content" data-section="ai" style="display:block;">

#### Chat with GPT-5.4 nano

```html;intro-chatgpt
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Chat with GPT-5.4 nano
        puter.ai.chat(`What is life?`, { model: "gpt-5.4-nano" }).then(puter.print);
    </script>
</body>
</html>
```

<p><strong class="example-title" style="margin-top:40px;">Image Analysis</strong></p>

```html;intro-gpt-vision
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <img src="https://assets.puter.site/doge.jpeg" style="display:block;">
    <script>
        puter.ai
            .chat(`What do you see?`, `https://assets.puter.site/doge.jpeg`, {
                model: "gpt-5.4-nano",
            })
            .then(puter.print);
    </script>
</body>
</html>
```

<strong class="example-title" style="margin-top:40px;">Generate an image of a cat using AI</strong>

```html;ai-txt2img
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        // Generate an image of a cat using the default model and quality. Please note that testMode is set to true so that you can test this code without using up API credits.
        puter.ai.txt2img('A picture of a cat.', true).then((image)=>{
            document.body.appendChild(image);
        });
    </script>
</body>
</html>
```

<p><strong class="example-title" style="margin-top:40px;">Stream the response</strong></p>

```html;ai-chat-stream
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
    (async () => {
        const resp = await puter.ai.chat('Tell me in detail what Rick and Morty is all about.', {model: 'gemini-3.1-flash-lite', stream: true });
        for await ( const part of resp ) puter.print(part?.text?.replaceAll('\n', '<br>'));
    })();
    </script>
</body>
</html>
```

</div>

<div class="example-content" data-section="hosting">

#### Publish a static website

```html;intro-hosting
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        (async () => {
            // (1) Create a random directory
            let dirName = puter.randName();
            await puter.fs.mkdir(dirName)

            // (2) Create 'index.html' in the directory with the contents "Hello, world!"
            await puter.fs.write(`${dirName}/index.html`, '<h1>Hello, world!</h1>');

            // (3) Host the directory under a random subdomain
            let subdomain = puter.randName();
            const site = await puter.hosting.create(subdomain, dirName)

            puter.print(`Website hosted at: <a href="https://${site.subdomain}.puter.site" target="_blank">https://${site.subdomain}.puter.site</a>`);
        })();
    </script>
</body>
</html>
```

</div>

<div class="example-content" data-section="auth">

#### Authenticate a user

```html;intro-auth
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <button id="sign-in">Sign in</button>
    <script>
        // Because signIn() opens a popup window, it must be called from a user action.
        document.getElementById('sign-in').addEventListener('click', async () => {
            // signIn() will resolve when the user has signed in.
            await puter.auth.signIn().then((res) => {
                puter.print('Signed in<br>' + JSON.stringify(res));
            });
        });
    </script>
</body>
</html>
```

</div>

<div class="example-content" data-section="networking">

#### Fetch a resource without CORS restrictions

```html;net-fetch
<html>
<body>
    <script src="https://js.puter.com/v2/"></script>
    <script>
    (async () => {
        // Send a GET request to example.com
        const request = await puter.net.fetch("https://example.com");

        // Get the response body as text
        const body = await request.text();

        // Print the body as a code block
        puter.print(body, { code: true });
    })()
    </script>
</body>
</html>
```

</div>
