​

1. Create a new project

Create a new React or React Native project using the thirdweb CLI.

npx thirdweb create app --legacy-peer-deps

Select your preferences when prompted by the CLI, or use the recommended setup below.

Change directory into the newly created project:

cd my-abstract-app

(Replace my-abstract-app with your created project name.)

​

2. Set up a Thirdweb API key

On the thirdweb dashboard, create your account (or sign in), and copy your project’s Client ID from the Settings section. Ensure that localhost is included in the allowed domains.

Create an .env.local file and add your client ID as an environment variable:

NEXT_PUBLIC_TEMPLATE_CLIENT_ID=your-client-id-here

Start the development server and navigate to http://localhost:3000 in your browser to view the application.

npm run dev

​

3. Connect the app to Abstract

Import the Abstract chain from the thirdweb/chains package:

import { abstractTestnet } from "thirdweb/chains";

Use the Abstract chain import as the value for the chain property wherever required.

<ConnectButton client={client} chain={abstractTestnet} />

Learn more on the official thirdweb documentation.