​
Add MiniKit to Your App

You have a clean frontend. Now turn it into a Mini App. Vibe coding tools are great for UI, but they do not yet handle onchain pieces perfectly. Download your code, open it in Cursor or Claude Code, and add MiniKit to enable Smart Wallet, gasless transactions, and Base App integration.
Before you prompt your AI IDE, list where you want onchain interactions to happen. Examples: mint a collectible from the Create screen, tip from the Feed, swap on the Trade screen. This helps the AI place MiniKit components in the right files.
1

Open your project in an AI IDE

Launch Cursor or Claude Code and open your Next.js project. Ensure it runs locally first with npm run dev so the AI can follow a working baseline.
2

Provide docs context to the AI

Use the MiniKit existing-app integration page. Use the site dropdown to “Copy page as Markdown for LLMs”, then paste that markdown into your AI IDE as context.
3

Ask the AI to analyze your app

Have the AI map your routes, layout, and component structure. Ask it to propose exact integration points for MiniKit provider and hooks.
4

Integrate MiniKit provider and Smart Wallet

Add the MiniKit provider in app/layout.tsx (or your top-level layout), wire basic hooks, and confirm no “login” button is added. Mini Apps should feel native and sessionless.
5

Add Paymaster for gasless UX

Configure Coinbase Developer Platform Paymaster with environment variables. Update your action flows to sponsor transactions, then test locally.
6

Verify and commit

Run your app, test every onchain touchpoint, and commit changes with clear messages. You are ready to deploy.

​
Helpful Prompts:

Shortcut: On any of the Base docs pages, use the dropdown to “Copy page as Markdown for LLMs” and paste it directly into your AI chat. This gives the model precise instructions and reduces hallucinations.