Getting Started with React

Build a client-side StarkNet app with React and Vite using the @chipi-stack/chipi-react package. It provides the same React hooks as the Next.js package. Wallets, transfers, staking, session keys. But optimized for single-page apps without server components. All transactions are gasless.

Create a React project with Vite and install the Chipi SDK:

bashnpm create vite@latest my-app -- --template react-ts
cd my-app
npm install @chipi-stack/chipi-react@latest

The SDK requires React 18+.

Chipi ties each wallet to an authenticated user. Install your auth provider:

• - Clerk (recommended): npm install @clerk/clerk-react. Drop-in auth with email, Google, and passkeys
• - Firebase: npm install firebase. Google's auth platform
• - Supabase: npm install @supabase/supabase-js. Open-source auth
• - Better Auth: npm install better-auth. Lightweight auth

Each authenticated user gets their own self-custody wallet linked to their auth session.

Wrap your app with ChipiProvider in src/main.tsx:

tsx// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { ClerkProvider } from "@clerk/clerk-react";
import { ChipiProvider } from "@chipi-stack/chipi-react";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
      <ChipiProvider>
        <App />
      </ChipiProvider>
    </ClerkProvider>
  </React.StrictMode>
);

Use the MCP tool get_component_code("chipi-providers") for the exact wrapper matching your auth setup.

Create a .env file in the project root:

bash# Chipi API key. From dashboard.chipipay.com
VITE_CHIPI_API_KEY=pk_prod_YOUR_KEY

# Clerk auth (or your provider)
VITE_CLERK_PUBLISHABLE_KEY=pk_YOUR_CLERK_KEY

Vite uses the VITE_ prefix instead of NEXT_PUBLIC_. Access them as import.meta.env.VITE_CHIPI_API_KEY. Secret keys (sk_prod_) should not be used in client-side React apps. Use a backend API route if you need webhook verification.

Use the CreateWalletDialog component for wallet creation. Get the full code via the MCP:

get_component_code("create-wallet-dialog")

Defaults:

• - walletType: "CHIPI". Chipi's own account contract with session key support
• - usePasskey: true. Hardware-backed passkey security

Update imports from @chipi-stack/nextjs to @chipi-stack/chipi-react. All hooks have the same API.

Wire the wallet page with useChipiWallet:

tsximport { useChipiWallet } from "@chipi-stack/chipi-react";

function WalletPage() {
  const { wallet, hasWallet, formattedBalance } = useChipiWallet({
    externalUserId: user.id,
    getBearerToken: async () => import.meta.env.VITE_CHIPI_API_KEY!,
  });

  if (!hasWallet) return <CreateWalletDialog />;
  return (
    <>
      <WalletSummary wallet={wallet} />
      <SendUsdcDialog wallet={wallet} />
    </>
  );
}

The hooks API is identical to Next.js. Only the import path changes. Get component code via get_component_code("wallet-summary") and get_component_code("send-usdc-dialog").

• - Import path: @chipi-stack/chipi-react instead of @chipi-stack/nextjs
• - Env vars: VITE_ prefix, accessed via import.meta.env
• - No server components: All components are client-side. Use a separate backend for webhook verification and secret key operations
• - Provider location: src/main.tsx instead of app/layout.tsx
• - All hooks are identical: Same API, same behavior. Only the package name differs

Start with npm run dev, test the wallet flow, and add features as needed.