Framework Integrations

Puter.js is designed to be framework-agnostic. This means you can use it with practically any web framework.

Simply install the Puter.js NPM library and use it in your app.

npm install @heyputer/puter.js

import puter from "@heyputer/puter.js";

puter.ai.chat("hello world");

Here are examples for some popular frameworks:

React

With React, import Puter.js and use it in your component.

// MyComponent.jsx
import { useEffect } from "react";
import puter from "@heyputer/puter.js";

export function MyComponent() {
    ...
    useEffect(() => {
        puter.ai.chat("hello");
    }, [])
    ...
}

Check out our React template for a complete example.

Next.js

With Next.js, add the "use client" directive at the top of your component file since Puter.js requires browser APIs.

// MyComponent.jsx
"use client";

import { useEffect } from "react";
import puter from "@heyputer/puter.js";

export function MyComponent() {
    ...
    useEffect(() => {
        puter.ai.chat("hello");
    }, [])
    ...
}

Check out our Next.js template for a complete example.

For Next.js version 15 or earlier, you need to enable Turbopack for Puter.js to work. Version 16 and later have Turbopack enabled by default. Learn how to enable Turbopack here: https://nextjs.org/docs/15/app/api-reference/turbopack

Angular

With Angular, import Puter.js and call it from your component methods.

// my-component.component.ts
import { Component } from "@angular/core";
import puter from "@heyputer/puter.js";

@Component({
    selector: "app-my-component",
    template: `<button (click)="handleClick()">Chat</button>`,
})
export class MyComponent {
    handleClick() {
        puter.ai.chat("hello");
    }
}

Check out our Angular template for a complete example.

Vue.js

With Vue.js, import Puter.js and call it from your component functions.

<!-- MyComponent.vue -->
<script setup>
import puter from "@heyputer/puter.js";

function handleClick() {
    puter.ai.chat("hello");
}
</script>

<template>
    <button @click="handleClick">Chat</button>
</template>

Check out our Vue.js template for a complete example.

Svelte

With Svelte, import Puter.js and call it from your component functions.

<!-- MyComponent.svelte -->
<script>
import puter from "@heyputer/puter.js";

function handleClick() {
    puter.ai.chat("hello");
}
</script>

<button on:click={handleClick}>Chat</button>

Check out our Svelte template for a complete example.

Astro

With Astro, import Puter.js in any client-side script tag.

<!-- Page.astro -->
...
<script>
    import puter from "@heyputer/puter.js";
    puter.ai.chat("hello");
</script>
...

Check out our Astro template for a complete example.

Other Frameworks

For other frameworks, the approach is similar: install the package and import it where needed. Puter.js works in any environment that supports ES modules.

Examples

User-Pays Model

On this page