Generated App

Generate App produces a standalone Vite + React + TypeScript project. The output is the public claim site your recipients visit to check eligibility and claim — not an internal admin tool. Everything it needs is ejected into the workspace, so there is no runtime dependency on the CLI.

What You Get

• Vite + React + TypeScript SPA scaffolding
• Four layout presets in source form — Centered, Two-Column, Hero Banner, Step Card
• Solana wallet integration — Phantom, Solflare, all Wallet Standard wallets
• Eligibility check and claim flow wired to the on-chain airdrop
• CSS custom properties for all theme tokens so the design can be re-themed after generation
• CLAUDE.md and AGENTS.md files in the output, describing safe extension points for AI coding agents such as Claude Code or Cursor

Image

The deployed claim site produced by Generate App, showing the hero, status badge, countdown, stats, and the wallet connect or claim CTA.

Expand

Click to enlarge

Project Structure

my-campaign/
  campaign.config.json        # Runtime config (brand, network, campaign, ui, content, links)
  .bonkit/
    workspace.json            # Studio workspace — reopen to re-edit
    export-manifest.json      # Generation record (timestamp, layout, network, claim mode)
  package.json                # Standalone Vite project
  vite.config.ts
  tsconfig.json
  index.html
  .env.example                # VITE_RPC_URL, VITE_SITE_URL
  README.md
  CLAUDE.md
  AGENTS.md
  src/
    App.tsx                   # Top-level component bound to the selected layout
    main.tsx                  # React DOM mount
    theme.ts                  # Baked theme tokens
    layout-config.ts          # Baked layout config
    styles.css
    layouts/                  # Ejected layout sources (all four presets)
    components/               # UI primitives + wallet components
    hooks/                    # useAirdrop and related hooks
    lib/                      # airdrop-client, transaction builders, utilities
  public/                     # Hero images and other assets extracted from the studio

Re-editing

Reopening the workspace restores the studio state.

airdrop-studio ./my-campaign

The studio reads .bonkit/workspace.json, rehydrates every section, and lets you regenerate the app with updated settings.

Theming the Generated App

The generated app uses CSS custom properties for every token. You can re-theme without touching React components:

:root {
  --color-primary: /* your value */;
  --color-surface: /* your value */;
  --radius-md: /* your value */;
}

The studio bakes initial values into src/theme.ts. After generation, src/styles.css and the :root block are the source of truth.

Extending with AI Coding Agents

The generated project includes:

• CLAUDE.md — instructions tuned for Claude Code
• AGENTS.md — general-purpose agent instructions (Cursor, Cline, etc.)
• llms.txt — project summary for LLM context

These files describe the safe extension points (layouts, components, hooks) and the parts that should not be modified (wallet provider, airdrop client). An agent can add features like new eligibility copy or custom sections without touching the claim transaction path.

Essential Features

A few features are not optional and cannot be hidden:

• Connect Wallet — the entry point for the claim flow
• Eligibility — determines whether a wallet is in the recipient list
• Claim — signs and submits the claim transaction
• Schedule-driven state — the Claim button is automatically disabled before the start date and after the end date

Next Step

Continue to Deploy to host the generated app.