Frontend Integration Using AlgoKit and AlgoKit Utils

This section focuses on how to use the official AlgoKit TypeScript utilities to connect a frontend application to the Algorand blockchain. You can find the same explanation provided here for TypeScript, but tailored for Python, in detail in Algorand’s official documentation.

1. Installation

Before installing, you’ll need to decide on the version you want to target. Version 7 and 8 have the same feature set, however v7 leverages algosdk@>=2.9.0<3.0, whereas v8 leverages algosdk@>=3.0.0. Your project and it’s dependencies will help you decide which version to target.

Once you’ve decided on the target version, this library can be installed from NPM using your favourite npm client, e.g.:

To target algosdk@2 and use version 7 of AlgoKit Utils, run the below:

npm install algosdk@^2.9.0 @algorandfoundation/algokit-utils@^7.0.0

To target algosdk@3 and use the latest version of AlgoKit Utils, run the below:

npm install algosdk@^3.0.0 @algorandfoundation/algokit-utils

2. Usage

To use this library simply include the following at the top of your file:

import { AlgorandClient, Config } from'@algorandfoundation/algokit-utils';

As well as AlgorandClient and Config, you can use intellisense to auto-complete the various types that you can import within the {} in your favourite Integrated Development Environment (IDE), or you can refer to the reference documentation.

[!WARNING] Previous versions of AlgoKit Utils encouraged you to include an import that looks like this (note the subtle difference of the extra * as algokit):

import * as algokit from '@algorandfoundation/algokit-utils';

This version will still work until at least v9, but it exposes an older, function-based interface to the functionality that is deprecated. The new way to use AlgoKit Utils is via the AlgorandClient class, which is easier, simpler, and more convenient to use and has powerful new features. For more details, see the official docs: Usage Guide

3. Connect a Wallet (for User Signatures)

If you use the official React template, wallet integration (e.g., with Pera, Defly, Exodus) is already set up using use-wallet. This allows users to connect their wallets and sign transactions from the frontend.

The topic is covered in more detail in the section titled “Integrating Wallet Connection,” so please make sure to take a look there as well.

For more details, see the official docs: DApp Frontend React Template

4. Send a Transaction

Example payment transaction from the frontend:

const sender = walletAddress; // e.g., from useWallet
const receiver = 'RECEIVER_ALGORAND_ADDRESS';

await algorand.send.payment({
  sender,
  receiver,
  amount: (1).algo(), // 1 ALGO
  // signer: useWallet's transactionSigner if needed
});

For more details, see the official docs: Payment Transactions

5. Call a Smart Contract Method (with Typed Client)

If you have generated a typed client for your smart contract:

import { MyAppClient } from './artifacts/MyApp/client';

const appClient = new MyAppClient({ sender, appId: 1234n }, algorand.client.algod);

const response = await appClient.hello({ name: 'world' });
console.log(response.return);

For more details, see the official docs: Typed App Clients

6. Use Official Templates for Best Practices

For a production-ready setup, use:

• DApp Frontend React Template
• Fullstack Template

These templates include wallet integration, environment management, and example code for contract interaction.

Summary

• Install AlgoKit Utils and algosdk.
• Initialize the client in your frontend.
• Use wallet integration for user signatures.
• Send transactions or call smart contract methods using the provided utilities and generated clients.

If you need more advanced configuration (e.g., logging, debug mode), refer to the Config and Logging documentation.

If you need a Python version, see the official documentation for the Python-specific approach.

In most frontend integration scenarios, you’ll want to connect your application to different Algorand networks (such as LocalNet for development, TestNet, or MainNet) or use custom node configurations. The AlgorandClient class provides flexible static methods to easily create a client instance tailored to your environment or specific requirements. Below are the main ways to initialize and configure the Algorand client, as well as options for advanced logging and debugging, so you can adapt your setup for local development, testing, or production deployments Algorand client, Config and logging.

AlgorandClient

The main entry point to the bulk of the functionality is the AlgorandClient class. Most of the time you can get started by typing AlgorandClient. and choosing one of the static initialisation methods to create an Algorand client, e.g.:

// Point to the network configured through environment variables or
// if no environment variables it will point to the default LocalNet configuration
const algorand = AlgorandClient.fromEnvironment();

// Point to default LocalNet configuration
const algorand = AlgorandClient.defaultLocalNet();

// Point to TestNet using AlgoNode free tier
const algorand = AlgorandClient.testNet();

// Point to MainNet using AlgoNode free tier
const algorand = AlgorandClient.mainNet();

// Point to a pre-created algod client
const algorand = AlgorandClient.fromClients({ algod });

// Point to pre-created algod, indexer and kmd clients
const algorand = AlgorandClient.fromClients({ algod, indexer, kmd });

// Point to custom configuration for algod
const algorand = AlgorandClient.fromConfig({ algodConfig });

// Point to custom configuration for algod, indexer and kmd
const algorand = AlgorandClient.fromConfig({ algodConfig, indexerConfig, kmdConfig });

Config and Logging

To configure the AlgoKit Utils library you can make use of the Config object, which has a configure method that lets you configure some or all of the configuration options.

Logging

AlgoKit has an in-built logging abstraction that allows the library to issue log messages without coupling the library to a particular logging library. This means you can access the AlgoKit Utils logs within your existing logging library if you have one.

To do this you need to create a logging translator that exposes the following interface (Logger):

export type Logger = {
  error(message: string, ...optionalParams: unknown[]): void;
  warn(message: string, ...optionalParams: unknown[]): void;
  info(message: string, ...optionalParams: unknown[]): void;
  verbose(message: string, ...optionalParams: unknown[]): void;
  debug(message: string, ...optionalParams: unknown[]): void;
};

Note: This interface type is directly compatible with Winston so you should be able to pass AlgoKit a Winston logger.

By default, the consoleLogger is set as the logger, which will send log messages to the various console.* methods for all logs apart from verbose logs. There is also a nullLogger if you want to disable logging, or various leveled console loggers: verboseConsoleLogger (also outputs verbose logs), infoConsoleLogger (only outputs info, warning and error logs), warningConsoleLogger (only outputs warning and error logs).

To override the logger:

Config.configure({ logger: myLogger });

To retrieve the current debug state:

Config.debug

To turn on debug mode:

Config.configure({ debug: true });

To temporarily enable debug mode:

Config.withDebug(() => {
  // Do stuff with Config.debug set to true
});

You can find more detailed information in the Algorand Documentation.