OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add bankrbot/skills --skill onchainkit
Build onchain applications with React components and TypeScript utilities from Coinbase's OnchainKit. Use when users want to create crypto wallets, swap tokens, mint NFTs, build payments, display blockchain identities, or develop any onchain app functionality. Supports wallet connection, transaction building, token operations, identity management, and complete onchain app development workflows.
npx skills add bankrbot/skills --skill onchainkit
Build production-ready onchain applications using Coinbase's comprehensive React component library and TypeScript utilities.
OnchainKit provides ready-to-use, full-stack components that abstract blockchain complexity, making it easy to build onchain applications without deep blockchain knowledge. It offers AI-friendly components that work automatically on Base, requires no backend infrastructure, and provides cost-effective transactions (< $0.01 fees).
Connect users to their crypto wallets with minimal code:
Use cases:
Reference: references/wallet-integration.md
Show blockchain identities with ENS names, avatars, and verification badges:
Reference: references/identity-components.md
Handle token swaps, purchases, and transfers:
Supported operations:
Reference: references/token-operations.md
Create and execute blockchain transactions:
Reference: references/transactions.md
Build checkout flows and payment processing:
Reference: references/payments.md
Display, mint, and manage NFTs:
Reference: references/nft-integration.md
create-onchain-app.pyassets/templates/swap-app/assets/templates/nft-mint/Reference: references/configuration.md
OnchainKit requires proper React provider configuration:
Start simple, add features as needed:
Mix and match components for custom workflows:
import { Wallet } from '@coinbase/onchainkit/wallet'Reference: references/best-practices.md
Reference: references/troubleshooting.md
assets/templates/basic-app/ - Minimal onchain appassets/templates/swap-app/ - Complete swap interfaceassets/templates/nft-mint/ - NFT marketplaceassets/templates/commerce/ - Onchain storeReference: references/examples.md
Support additional EVM chains beyond Base:
Build Farcaster Frame applications:
Reference: references/advanced-features.md
OnchainKit provides both React components and utility functions:
Reference: references/api-reference.md
💡 Pro Tip: Start with npm create onchain to bootstrap a working app, then customize components as needed. The quickstart template includes all necessary configuration and examples.
🚀 Quick Win: Use the validation script after setup to ensure everything is working correctly before building custom features.
import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
function WalletConnection() {
return (
<Wallet>
<ConnectWallet />
</Wallet>
);
}import { Identity, Avatar, Name, Badge } from '@coinbase/onchainkit/identity';
function UserProfile({ address }) {
return (
<Identity address={address}>
<Avatar />
<Name />
<Badge />
</Identity>
);
}import { Swap, SwapAmountInput, SwapButton } from '@coinbase/onchainkit/swap';
function TokenSwap() {
return (
<Swap>
<SwapAmountInput />
<SwapButton />
</Swap>
);
}import { Transaction, TransactionButton } from '@coinbase/onchainkit/transaction';
function SendTransaction({ calls }) {
return (
<Transaction calls={calls}>
<TransactionButton />
</Transaction>
);
}import { Checkout, CheckoutButton } from '@coinbase/onchainkit/checkout';
function PaymentFlow() {
return (
<Checkout>
<CheckoutButton />
</Checkout>
);
}import { NFTCard } from '@coinbase/onchainkit/nft';
function NFTDisplay({ contract, tokenId }) {
return <NFTCard contract={contract} tokenId={tokenId} />;
}# Required for API access
NEXT_PUBLIC_CDP_API_KEY="your-api-key"
NEXT_PUBLIC_WC_PROJECT_ID="your-walletconnect-id"
# Optional configurations
NEXT_PUBLIC_CHAIN_ID="8453" # Base mainnetimport { OnchainKitProvider } from '@coinbase/onchainkit';
import { WagmiProvider } from 'wagmi';
function App() {
return (
<WagmiProvider config={wagmiConfig}>
<OnchainKitProvider
apiKey={process.env.NEXT_PUBLIC_CDP_API_KEY}
chain={base}
>
{/* Your app components */}
</OnchainKitProvider>
</WagmiProvider>
);
}// Basic wallet connection
<ConnectWallet />
// Enhanced with custom styling
<ConnectWallet className="custom-wallet-button" />
// Full wallet interface with status
<Wallet>
<ConnectWallet />
<WalletDropdown>
<Identity />
<WalletDropdownDisconnect />
</WalletDropdown>
</Wallet>function CustomApp() {
return (
<div>
{/* User identity */}
<Identity address={address}>
<Avatar />
<Name />
</Identity>
{/* Token operations */}
<Swap>
<SwapAmountInput />
<SwapButton />
</Swap>
{/* Payment processing */}
<Checkout>
<CheckoutButton />
</Checkout>
</div>
);
}const customChain = {
id: 123456,
name: 'Custom Chain',
// ... chain configuration
};
<OnchainKitProvider chain={customChain}>import { useMiniKit } from '@coinbase/onchainkit/minikit';
function FrameApp() {
const { isReady } = useMiniKit();
return isReady ? <YourFrameContent /> : <Loading />;
}