Skip to main content

Quick start

The fastest way to build a CrackPay Mini App is with the CrackPay skills: a set of skills for AI coding assistants (Claude Code, Cursor, Codex, Windsurf and others). Install them once, describe what you want, and your assistant scaffolds a Mini App wired to the CrackPay wallet, following every rule on this site.

Prefer to wire it by hand? See Setting up a React app.

Prerequisites​

  • Node.js 18 or newer
  • An AI coding assistant that supports skills
  • A CrackPay account at www.crackpay.xyz, with a dollar or two of USDC (CrackPay runs on Arc mainnet)

Step 1: Install the CrackPay skills​

npx skills add crackedstudio/crackpay-skills

In Claude Code you can install them as a plugin instead:

/plugin marketplace add crackedstudio/crackpay-skills
/plugin install crackpay-skills@crackpay

The skills activate on their own whenever you describe a CrackPay task. More install options and the full list: AI skills.

Step 2: Scaffold your Mini App​

Ask your assistant, for example:

Create a CrackPay Mini App that lets someone pay for an order in USDC.

The build-crackpay-miniapp skill copies in a Vite + React + TypeScript starter with:

  • @crackpay/miniapp-sdk installed and the wallet connected on load
  • A greeting with the user's @handle and their USDC balance
  • A sample payment with cancel and error handling
  • A phone-width layout with light and dark themes
  • A Vite config that allows ngrok and Cloudflare tunnels for testing

Then it replaces the sample payment with your feature, using the other skills for payments, contracts and errors.

Step 3: Run it​

npm install
npm run dev

Opened directly in a browser tab, the app says "Open this app in CrackPay". That is correct: outside CrackPay there is no wallet.

Step 4: Test in CrackPay​

Expose your dev server over HTTPS and load it with Developer mode:

ngrok http 5173

In CrackPay: Settings → tap Version seven times → Developer settings → Developer mode → Open URL…, paste the ngrok URL and tap Load. Full steps: Test in CrackPay.

Step 5: Submit your Mini App​

When it works, submit it for listing. See Submit your Mini App.

Without an AI assistant​

npm install @crackpay/miniapp-sdk viem
import { connectCrackPay } from "@crackpay/miniapp-sdk/viem";

const crackpay = await connectCrackPay();
if (!crackpay) {
  // Not inside CrackPay: ask the user to open the app from CrackPay.
} else {
  const { account, handle, walletClient, publicClient } = crackpay;
}

Continue with Setting up a React app.