description	VeChain Kit is an all-in-one SDK for building frontend applications on VeChain, supporting wallet integration, developer hooks, pre-built UI components, and more.

What's VeChain Kit?

It offers:

• Seamless Wallet Integration: Support for VeWorld, WalletConnect, and social logins.
• Developer-Friendly Hooks: Easy-to-use React Hooks that let you read and write data on the VeChainThor blockchain.
• Token Operations: Send and swap tokens, check balances, manage VET domains, and more—all in one place.
• Pre-Built UI Components: Ready-to-use components (e.g., TransactionModal) to simplify wallet operations and enhance your users’ experience.

🚀 Start with AI

The fastest way to build with VeChain Kit is to hand a prompt to your coding agent (Claude Code, Cursor, or any agent). The prompts below tell the agent to read the relevant VeChain AI Skill first so it follows current conventions.

{% tabs %} {% tab title="Start a new dApp" %} {% code title="Paste into Claude Code, Cursor, or any AI agent" overflow="wrap" %}

Before doing anything, read these VeChain AI Skills so you follow current conventions:
- create-vechain-dapp: https://github.com/vechain/vechain-ai-skills/tree/main/skills/create-vechain-dapp
- vechain-kit: https://github.com/vechain/vechain-ai-skills/tree/main/skills/vechain-kit

Now the task:

Scaffold a new VeChain dApp for me using create-vechain-dapp, with:
- VeChain Kit pre-wired (Privy social login: Google + email, plus VeWorld and WalletConnect)
- Chakra UI v3 (with next-themes) and dark mode by default — follow the next-chakra-v3 example in the vechain-kit repo for wiring the kit's `theme` prop via `useChakraContext().token.var(...)` so theme tokens stay reactive
- A landing page that shows the connected user's address, B3TR balance, and a "Send B3TR" button
- A GitHub Pages deploy workflow ready to use

Name the project "my-vechain-dapp". When done, run `yarn dev` and tell me the URL.

{% endcode %} {% endtab %}

{% tab title="Add to existing project" %} {% code title="Paste into Claude Code, Cursor, or any AI agent" overflow="wrap" %}

Before doing anything, read this VeChain AI Skill so you follow current conventions:
- vechain-kit: https://github.com/vechain/vechain-ai-skills/tree/main/skills/vechain-kit

Now the task:

I already have a Next.js app and I want to add VeChain Kit to it.

1. Install @vechain/vechain-kit and any required peer deps.
2. Find my root layout (app/layout.tsx for App Router or pages/_app.tsx for Pages Router) and wrap it with VeChainKitProvider.
3. Enable Privy social login (Google + email), VeWorld and WalletConnect.
4. Read Privy keys from NEXT_PUBLIC_PRIVY_* and the WalletConnect projectId from NEXT_PUBLIC_WC_PROJECT_ID.
5. Add a <WalletButton /> to my existing header.
6. Don't change my existing Chakra theme.

If you hit peer-dependency conflicts, stop and tell me before applying any fix.

{% endcode %} {% endtab %} {% endtabs %}

{% hint style="info" %} Install the VeChain AI Skills once to give every future prompt automatic domain context:

npx skills add vechain/vechain-ai-skills

Or in Claude Code: /plugin marketplace add vechain/vechain-ai-skills. Browse all 11 skills live at the VeKit Playground. {% endhint %}

Prefer to wire it yourself? See the manual installation guide.

	Cover image
VeKit Playground	Group 7.png	https://playground.vechainkit.vechain.org/
Homepage	Group 7.png	https://vechainkit.vechain.org/
NPM Package	Group 15.png	https://www.npmjs.com/package/@vechain/vechain-kit
Getting Started	Group 14.png	Getting Started
Customization	Group 20 (1).png	Customization
Components	Group 21 (1).png	Components
Troubleshooting	Group 12.png	Troubleshooting