Use generated contract bindings in a frontend

A frontend application uses generated contract bindings in one of two ways: install the published TypeScript package and call the typed class directly, or fetch the ABI JSON from its CDN URL and pass it to a web3 library. Both consumption patterns work against the same artifacts produced by a single GitMyABI build.

Before you start

• A successful build for the project. See configure builds.
• The deployed contract address on the target network.

Pattern A — install the typed bindings package

Use the package name and version shown on the build detail page. For private packages, the build detail page also shows the registry configuration and any required authentication.

# npm
npm install <package-name>@<version>

# yarn
yarn add <package-name>@<version>

# pnpm
pnpm add <package-name>@<version>

Then call the typed class directly with viem clients:

import { createPublicClient, createWalletClient, http } from 'viem';
import { mainnet } from 'viem/chains';
import { YourContract } from '<package-name>';

const publicClient = createPublicClient({ chain: mainnet, transport: http() });
const walletClient = createWalletClient({ chain: mainnet, transport: http() });

// Create contract instance
const contract = new YourContract('0x...', { publicClient, walletClient });

// Read functions — call directly
const result = await contract.yourMethod(param1, param2);

// Write functions — also call directly
const hash = await contract.transfer('0x...', 1000n);

Pattern B — fetch the ABI from the CDN

Use this when you do not want a build-time dependency on a specific package version, or when the consumer is not TypeScript. Replace <abi-cdn-url> with the URL shown on the build detail page.

import { ethers } from 'ethers';

// Fetch the ABI from the CDN URL shown on the build detail page
const abiUrl = '<abi-cdn-url>';
const response = await fetch(abiUrl);
const abi = await response.json();

// Create contract instance
const provider = new ethers.providers.Web3Provider(window.ethereum);
const contract = new ethers.Contract(contractAddress, abi, provider);

// Interact with contract
const result = await contract.myFunction();

Choosing between them

• The typed package gives you compile-time type safety and IDE autocomplete, but couples your release to a specific build version.
• The raw ABI fetched from the CDN keeps consumers decoupled from the package version, but loses type information at the call site.

See generated contract bindings for what the package contains and review the package format for the artifact layout.

FAQ