OpenParable
Skip to content
← Back to skills

onchainkit

Development

Build onchain apps with Coinbase's OnchainKit React components - wallets, swaps, NFTs, payments

View on GitHub ↗
QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

  1. Open your project in Codex.
  2. Copy and paste the prompt below.
  3. Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/alsk1992/CloddsBot/blob/HEAD/src/skills/bundled/onchainkit/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/onchainkit, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

OnchainKit - Build Onchain Apps

Build production-ready onchain applications using Coinbase's React component library.

Overview

OnchainKit provides ready-to-use components that abstract blockchain complexity:

  • No backend infrastructure required
  • Works automatically on Base
  • Cost-effective transactions (< $0.01 fees)

Commands

Project Setup

/onchainkit create <project-name>    Create new onchain app
/onchainkit add <component>          Add component to project

Templates

/onchainkit template wallet          Wallet connection template
/onchainkit template swap            Token swap app template
/onchainkit template nft             NFT minting template
/onchainkit template checkout        Payment processing template

Docs

/onchainkit docs wallet              Wallet integration docs
/onchainkit docs identity            Identity components docs
/onchainkit docs swap                Token swap docs
/onchainkit docs transaction         Transaction building docs

Core Components

Wallet Connection

import { Wallet, ConnectWallet } from '@coinbase/onchainkit/wallet';
<Wallet><ConnectWallet /></Wallet>

Identity Display

import { Identity, Avatar, Name } from '@coinbase/onchainkit/identity';
<Identity address={address}><Avatar /><Name /></Identity>

Token Swap

import { Swap, SwapButton } from '@coinbase/onchainkit/swap';
<Swap><SwapButton /></Swap>

Quick Start

# Create new app
npm create onchain@latest

# Or add to existing project
npm install @coinbase/onchainkit

Configuration

export NEXT_PUBLIC_CDP_API_KEY="..."        # Coinbase API key
export NEXT_PUBLIC_WC_PROJECT_ID="..."      # WalletConnect ID

Resources