Using the Pluto Frame SDKs

Getting Started

Pluto offers two npm packages to help you integrate the Pluto Frame into your application:

@plutoxyz/react-frame: For React applications
@plutoxyz/frame-js: For vanilla JavaScript applications

Choose Your Implementation

Select your preferred implementation method below:

Installation

npm install @plutoxyz/react-frame

Basic Usage

"use client"; // if using Next.js app router, include "use client" directive
import { Frame } from "@plutoxyz/react-frame";
 
function App() {
  const handleProof = (proof: any) => {
    console.log(proof.data);
  };
 
  const handleError = (error: any) => {
    console.log(error.code);
    console.log(error.display_message);
    console.log(error.message);
  };
 
  return (
    <Frame
      script={`myScript`}
      onProof={handleProof}
      onError={handleError}
      brand={{
        logo: "https://plutoxyz.com/logo.png",
        name: "Plutoxyz",
      }}
    />
  );
}

React Frame Package Overview

A React library that provides components and hooks for Pluto frame UI.
Full docs are on npm.

`Frame` Component

Frame is a wrapper around the Pluto frame that gives you an end-to-end flow out of the box.

Note: Mount Frame only when you’re ready to start the Pluto flow (e.g., after a button click).

Data Types

Type	Description
`ProofPayload`	Returned by `onProof`. `{ data: Record<string,string>; signature: string }`
`ErrorPayload`	Returned by `onError`. `{ code: string; display_message: string; message: string }`

Advanced Use Cases

If your app splits logic across multiple trees, inject PlutoProvider at the top level and use hooks where needed. You can still mount Frame later even when you provide your own context.

`PlutoProvider`

// App.tsx
import { PlutoProvider } from "@plutoxyz/react-frame";
 
function App() {
  return (
    <PlutoProvider>
      <div id="pluto-frame"></div>
      {/* Your components here */}
    </PlutoProvider>
  );
}

Component with Hooks

// MyComponent.tsx
import { usePlutoFrame, useProof, useError } from "@plutoxyz/react-frame";
 
const MyComponent = () => {
  const { isConnected, isReady, connect } = usePlutoFrame();
  const proof = useProof();
  const error = useError();
 
  const handleClick = () => connect(`myScript`);
 
  return (
    <div>
      {!isConnected && (
        <button disabled={!isReady} onClick={handleClick}>
          Connect
        </button>
      )}
      {error && <div>{error}</div>}
      {proof && <div>{JSON.stringify(proof)}</div>}
    </div>
  );
};
 
export default MyComponent;

Hooks Summary

Hook	Purpose
`usePlutoFrame`	`{ isReady, isConnected, connect }`—core control hook
`useProof`	Access the current proof payload
`useError`	Access any proof-generation errors

Example GitHub Repo Automation SDK