> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ton.org/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.ton.org/feedback

```json
{
  "path": "/ecosystem/appkit/init",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# How to initialize the TON Connect's AppKit

export const Aside = ({type = "note", title = "", icon = "", iconType = "regular", children}) => {
  const asideVariants = ["note", "tip", "caution", "danger"];
  const asideComponents = {
    note: {
      outerStyle: "border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10",
      innerStyle: "text-sky-900 dark:text-sky-200",
      calloutType: "note",
      icon: <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-sky-500" aria-label="Note">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z"></path>
        </svg>
    },
    tip: {
      outerStyle: "border-emerald-500/20 bg-emerald-50/50 dark:border-emerald-500/30 dark:bg-emerald-500/10",
      innerStyle: "text-emerald-900 dark:text-emerald-200",
      calloutType: "tip",
      icon: <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="text-emerald-600 dark:text-emerald-400/80 w-3.5 h-auto" aria-label="Tip">
          <path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z"></path>
        </svg>
    },
    caution: {
      outerStyle: "border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10",
      innerStyle: "text-amber-900 dark:text-amber-200",
      calloutType: "warning",
      icon: <svg className="flex-none w-5 h-5 text-amber-400 dark:text-amber-300/80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-label="Warning">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
    },
    danger: {
      outerStyle: "border-red-500/20 bg-red-50/50 dark:border-red-500/30 dark:bg-red-500/10",
      innerStyle: "text-red-900 dark:text-red-200",
      calloutType: "danger",
      icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" className="text-red-600 dark:text-red-400/80 w-4 h-4" aria-label="Danger">
          <path d="M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12l176.6 0c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path>
        </svg>
    }
  };
  let variant = type;
  let gotInvalidVariant = false;
  if (!asideVariants.includes(type)) {
    gotInvalidVariant = true;
    variant = "danger";
  }
  const iconVariants = ["regular", "solid", "light", "thin", "sharp-solid", "duotone", "brands"];
  if (!iconVariants.includes(iconType)) {
    iconType = "regular";
  }
  return <>
      <div className={`callout my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border ${asideComponents[variant].outerStyle}`} data-callout-type={asideComponents[variant].calloutType}>
        <div className="mt-0.5 w-4" data-component-part="callout-icon">
          {}
          {icon === "" ? asideComponents[variant].icon : <Icon icon={icon} iconType={iconType} size={14} />}
        </div>
        <div className={`text-sm prose min-w-0 w-full ${asideComponents[variant].innerStyle}`} data-component-part="callout-content">
          {gotInvalidVariant ? <p>
              <span className="font-bold">
                Invalid <code>type</code> passed!
              </span>
              <br />
              <span className="font-bold">Received: </span>
              {type}
              <br />
              <span className="font-bold">Expected one of: </span>
              {asideVariants.join(", ")}
            </p> : <>
              {title && <p className="font-bold">{title}</p>}
              {children}
            </>}
        </div>
      </div>
    </>;
};

If there is a dApp that uses [TON Connect UI libraries](#relation-to-ton-connect-libraries), migrate that dApp to AppKit in a few steps:

* [Migrate from `@tonconnect/ui-react` (React)](#migrate-from-%40tonconnect%2Fui-react)
* [Migrate from `@tonconnect/ui` (Vanilla)](#migrate-from-%40tonconnect%2Fui)

## Installation

Before initializing the TON Connect's AppKit, install it with the necessary peer dependencies:

<CodeGroup>
  ```shell title="React" icon="react" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  #     AppKit React      TanStack Query        TON Connect          Core packages         # Buffer polyfill
  npm i @ton/appkit-react @tanstack/react-query @tonconnect/ui-react @ton/core @ton/crypto buffer
  ```

  ```shell title="TypeScript" icon="globe" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  #     AppKit      TanStack Query       TON Connect    Core packages         # Buffer polyfill
  npm i @ton/appkit @tanstack/query-core @tonconnect/ui @ton/core @ton/crypto buffer
  ```
</CodeGroup>

Core packages require a `Buffer` [polyfill](https://en.wikipedia.org/wiki/Polyfill_\(programming\)). Extend the module bundle configuration according to the bundler in use:

<CodeGroup>
  ```ts title="Vite" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  // vite.config.js
  import { defineConfig } from 'vite';
  export default defineConfig({
    // ...prior options...
    resolve: {
      alias: {
        buffer: 'buffer/',
      },
    },
    define: {
      Buffer: ['buffer', 'Buffer'],
    },
    // ...later options...
  });
  ```

  ```ts title="Webpack" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  // webpack.config.js
  const webpack = require('webpack');
  module.exports = {
    // ...prior options...
    resolve: {
      fallback: {
        buffer: require.resolve('buffer/'),
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      })
    ],
    // ...later options...
  }
  ```
</CodeGroup>

## Initialization

<Aside type="tip">
  Jump to a [complete and exhaustive setup](#complete-setup).
</Aside>

The basic kit initialization does not require any configuration options.

<CodeGroup>
  ```tsx title="React" icon="react" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  import { AppKit, AppKitProvider } from '@ton/appkit-react';
  import '@ton/appkit-react/styles.css';

  const kit = new AppKit({});

  // Wrap application in `AppKitProvider` and pass the `AppKit` instance.
  export function App() {
    return <AppKitProvider appKit={kit}>{/* ...app... */}</AppKitProvider>;
  };
  ```

  ```ts title="TypeScript" icon="globe" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  import { AppKit } from '@ton/appkit';

  const kit = new AppKit({});
  ```
</CodeGroup>

To communicate with the blockchain, AppKit uses [TON Center APIs](/ecosystem/api/toncenter/introduction) by default. In particular, operations with assets require many API calls — [obtain a key to access higher limits](/ecosystem/api/toncenter/get-api-key) and prevent [frequent rate limit 429 errors](/ecosystem/api/toncenter/rate-limit).

Alternative API clients and their configuration options can be supplied per network:

```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
// Or @ton/appkit-react for React
import { AppKit, Network } from '@ton/appkit';

const kit = new AppKit({
  // Configure networks and API clients.
  networks: {
    // Mainnet is TON's production network.
    // All contracts and funds are real.
    [Network.mainnet().chainId]: {
      apiClient: {
        // Most commonly used, official API client.
        url: 'https://toncenter.com',

        // A key to access higher RPS limits.
        // Get it from https://t.me/toncenter
        key: '<MAINNET_API_KEY>',
      },
    },
  },
});
```

### Connectors

The [basic setup](#initialization) allows for direct API requests but is insufficient for connecting TON wallets via the TON Connect protocol. For that, configure a connector and host a public [app manifest file](/ecosystem/ton-connect/manifest#app-manifest) adjusted to the needs of a given dApp.

For local development and testing, use the [manifest file from this demo dApp](https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json).

<CodeGroup>
  ```tsx title="React" icon="react" expandable theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  import {
    AppKit,
    AppKitProvider,
    // Enables TON wallet connections
    TonConnectConnector,
  } from '@ton/appkit-react';
  import '@ton/appkit-react/styles.css';

  const kit = new AppKit({
    connectors: [
      new TonConnectConnector({
        tonConnectOptions: {
          // Public link to the application manifest JSON file.
          // For local development and testing, use the one from a demo dApp:
          manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
        },
      }),
    ],
  });

  // Wrap application in `AppKitProvider` and pass the `AppKit` instance.
  export function App() {
    return <AppKitProvider appKit={kit}>{/* ...app... */}</AppKitProvider>;
  };
  ```

  ```ts title="TypeScript" icon="globe" expandable theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  import {
    AppKit,
    // Enables TON wallet connections
    TonConnectConnector,
  } from '@ton/appkit';

  const kit = new AppKit({
    connectors: [
      new TonConnectConnector({
        tonConnectOptions: {
          // Public link to the application manifest JSON file.
          // For local development and testing, use the one from a demo dApp:
          manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
        },
      }),
    ],
  });
  ```
</CodeGroup>

### Providers

The [setup with connectors](#connectors) connects to TON wallets via services such as [Tonkeeper](/ecosystem/wallet-apps/tonkeeper). To enable advanced DeFi operations like asset swaps, configure DeFi providers.

[Omniston](https://ston.fi/omniston) is the primary swap provider. To set it up:

<Steps>
  <Step title="Install the SDK">
    ```shell theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    npm i @ston-fi/omniston-sdk
    ```
  </Step>

  <Step title="Set up the swap provider">
    ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    // Or @ton/appkit-react for React
    import { AppKit, Network } from '@ton/appkit';

    // Omniston as a swap provider
    import { OmnistonSwapProvider } from '@ton/appkit/swap/omniston';

    const kit = new AppKit({
      // Set up a swap provider
      providers: [new OmnistonSwapProvider({
        /* custom configuration options */
      })],
    });
    ```
  </Step>
</Steps>

### Queries and mutations

[TanStack Query](https://tanstack.com/query/latest) is an opinionated library that simplifies fetching, caching, synchronizing and updating server state in web applications.

To enable [it for React](https://tanstack.com/query/latest/docs/framework/react/overview), wrap the application inside `AppKitProvider` in the `QueryClientProvider` from `@tanstack/react-query`:

```tsx theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
// Additional imports
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// Query client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Do not refetch when window is refocused
      refetchOnWindowFocus: false,
    },
  },
});

// ...AppKit initialization as shown prior...

// Modified entrypoint
export function App() {
  return (
    <AppKitProvider appKit={kit}>
      <QueryClientProvider client={queryClient}>
        {/* ...app... */}
      </QueryClientProvider>
    </AppKitProvider>
  );
}
```

### Complete setup

The following initialization example sets up everything at once:

<CodeGroup>
  ```tsx title="React" icon="react" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  // AppKit
  import {
    AppKit,
    AppKitProvider,
    Network,
    // Wallet connector
    TonConnectConnector,
  } from '@ton/appkit-react';

  // Styles
  import '@ton/appkit-react/styles.css';

  // DeFi provider
  import { OmnistonSwapProvider } from '@ston-fi/omniston-sdk';

  // TanStack Query
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

  // Query client
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        // Do not refetch when window is refocused
        refetchOnWindowFocus: false,
      },
    },
  });

  // Initialization
  const kit = new AppKit({
    // 1. Configure networks and API clients.
    networks: {
      // Production network. All contracts and funds are real.
      [Network.mainnet().chainId]: {
        apiClient: {
          // Most commonly used, official API client.
          url: 'https://toncenter.com',

          // A key to access higher RPS limits.
          // Get it from https://t.me/toncenter
          key: '<MAINNET_API_KEY>',
        },
      },
    },
    // 2. Configure connectors.
    connectors: [
      // Enables connections with TON wallet services, such as Tonkeeper or MyTonWallet.
      new TonConnectConnector({
        tonConnectOptions: {
          // Public link to the application manifest JSON file.
          // For local development and testing, use the one from a demo dApp:
          manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
        },
      }),
    ],
    // 3. Configure DeFi providers.
    providers: [new OmnistonSwapProvider()],
  });

  // 4. Wrap the rest of the app in a QueryClientProvider and an AppKitProvider.
  export function App() {
    return (
      <AppKitProvider appKit={kit}>
        <QueryClientProvider client={queryClient}>
          {/* ...app... */}
        </QueryClientProvider>
      </AppKitProvider>
    )
  };
  ```

  ```ts title="TypeScript" icon="globe" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  // AppKit
  import {
    AppKit,
    Network,
    // Wallet connector
    TonConnectConnector,
  } from '@ton/appkit';

  // DeFi provider
  import { OmnistonSwapProvider } from '@ston-fi/omniston-sdk';

  // Initialization
  const kit = new AppKit({
    // 1. Configure networks and API clients.
    networks: {
      // Production network. All contracts and funds are real.
      [Network.mainnet().chainId]: {
        apiClient: {
          // Most commonly used, official API client.
          url: 'https://toncenter.com',

          // A key to access higher RPS limits.
          // Get it from https://t.me/toncenter
          key: '<MAINNET_API_KEY>',
        },
      },
    },
    // 2. Configure connectors.
    connectors: [
      // Enables connections with TON wallet services, such as Tonkeeper or MyTonWallet.
      new TonConnectConnector({
        tonConnectOptions: {
          // Public link to the application manifest JSON file.
          // For local development and testing, use the one from a demo dApp:
          manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
        },
      }),
    ],
    // 3. Configure DeFi providers.
    providers: [new OmnistonSwapProvider()],
  });
  ```
</CodeGroup>

## Dynamic configuration

AppKit instance can be dynamically extended with new [connectors](#connectors) and [providers](#providers).

### Add new connectors

To add a new connector, call the `.addConnector()` method on the initialized AppKit object:

```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
kit.addConnector(connector);
```

### Add new providers

To add a new provider, call the `.registerProvider()` method on the initialized AppKit object:

```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
kit.registerProvider(provider);
```

To specifically add a swap provider, register it via `kit.swapManager`:

```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
kit.swapManager.registerProvider(swapProvider);
```

## Configuration parameters

<ParamField path="networks" type="Record<CHAIN, NetworkConfig>">
  For one or more TON networks, configure their respective API or RPC providers to interact with.

  ```ts title="TypeScript" icon="globe" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  // Or @ton/appkit-react for React
  import { Network } from '@ton/appkit';

  new AppKit({
    networks: {
      // Production network. All contracts and funds are real.
      [Network.mainnet().chainId]: { // "-239"
        apiClient: {
          // Most commonly used, official API client.
          //
          // To self-host, see:
          // * Real-time API: https://github.com/toncenter/ton-http-api-cpp
          // * Indexer: https://github.com/toncenter/ton-indexer
          // It is important to put real-time API under `/api/v2` route and indexer API under `/api/v3` route.
          url: 'https://toncenter.com',

          // Optional key to access higher RPS limits.
          key: '<MAINNET_API_KEY>',
        },
      },
      // Testing network. For experiments, beta tests, and feature previews.
      [Network.testnet().chainId]: { // "-3"
        apiClient: {
          url: 'https://testnet.toncenter.com',
          key: '<TESTNET_API_KEY>',
        },
      },
    },
    // ...later fields...
  });
  ```

  It is also possible to provide an entirely custom provider with its own `ApiClient` interface implementation.

  ```ts title="TypeScript" icon="globe" theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  // Or @ton/appkit-react for React
  import { Network } from '@ton/appkit';

  new AppKit({
    networks: {
      [Network.testnet().chainId]: { // "-3"
        apiClient: /*  A complete ApiClient interface implementation */,
      },
    },
    // ...later fields...
  });
  ```
</ParamField>

<ParamField path="connectors" type="Connector[] | undefined">
  Array of connectors that enable wallet connections. The primary connector is `TonConnectConnector`.

  Each connector must expose the following methods:

  * `initialize()` — creates the connector, restores connections, sets up event listeners.
  * `destroy()` — cleans up connector resources.
  * `connectWallet()` — connects a wallet through the UI.
  * `disconnectWallet()` — disconnects a wallet.
  * `getConnectedWallets()` — lists connected wallets.

  Additionally, each connector has metadata that can be displayed in the UI:

  ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
  interface ConnectorMetadata {
    /**
     * Connector name
     */
    name: string;
    /**
     * Connector icon URL
     */
    iconUrl?: string;
  }
  ```
</ParamField>

<ParamField path="providers" type="Providers[] | undefined">
  Array of DeFi providers that enable additional functionality, such as asset swaps via [Omniston](https://ston.fi/omniston).
</ParamField>

## Relation to TON Connect libraries

Lower-level TON Connect libraries, such as `@tonconnect/ui-react` and `@tonconnect/ui`, only give access to wallet services via the TON Connect protocol and basic facilities to query connected TON wallets with direct API calls.

AppKit builds on the foundation provided by these libraries and extends functionality with convenient components, hooks, and functions. It enables balance tracking and asset management, gives ready-made React UI components for common cases, handles API-related state management, and even registers DeFi integrations for advanced use cases.

If there is an existing dApp that uses either `@tonconnect/ui-react` or `@tonconnect/ui`, consider migrating to AppKit to simplify development and reduce boilerplate.

### Migrate from `@tonconnect/ui-react`

Before migrating, [install AppKit and peer packages](#installation) and add necessary polyfills.

<Steps>
  <Step title="Ensure the TON Connect UI package is of the latest version">
    Ensure that TON Connect packages are of the latest version:

    ```shell theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    npm up @tonconnect/ui-react --save
    ```
  </Step>

  <Step title="Initialize AppKit and replace TonConnectUIProvider">
    Use `AppKitProvider` in place of the `TonConnectUIProvider`:

    ```tsx theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    import {
      AppKit,
      // Replaces <TonConnectUIProvider>
      AppKitProvider,
      // Wallet connector
      TonConnectConnector,
    } from '@ton/appkit-react';
    import '@ton/appkit-react/styles.css';

    const kit = new AppKit({
      connectors: [
        new TonConnectConnector({
          // In place of props on the TonConnectUIProvider
          tonConnectOptions: {
            // Public link to the application manifest JSON file.
            // For local development and testing, use the one from a demo dApp:
            manifestUrl: 'https://tonconnect-sdk-demo-dapp.vercel.app/tonconnect-manifest.json',
          },
        }),
      ],
    });

    export function App() {
      return (
        // In place of the TonConnectUIProvider
        <AppKitProvider appKit={kit}>
          {/* ...rest of the app... */}
        </AppKitProvider>
      );
    }
    ```

    Refer to the [complete initialization setup](#complete-setup) for all the possible AppKit configuration options.
  </Step>

  <Step title="Keep existing hooks as is">
    The `AppKitProvider` bridges to TON Connect under the hood. Existing few `@tonconnect/ui-react` hooks, such as `useTonAddress()`, `useTonWallet()`, and others, will continue to work inside the `AppKitProvider` automatically.
  </Step>
</Steps>

### Migrate from `@tonconnect/ui`

Before migrating, [install AppKit and peer packages](#installation) and add necessary polyfills.

<Steps>
  <Step title="Ensure the TON Connect UI package is of the latest version">
    ```shell theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    npm up @tonconnect/ui --save
    ```
  </Step>

  <Step title="Initialize AppKit and reuse TonConnectUI object">
    It is possible to reuse the existing `TonConnectUI` object when configuring AppKit [connectors](#connectors):

    ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    import {
      AppKit,
      TonConnectConnector,
    } from '@ton/appkit';

    const kit = new AppKit({
      connectors: [
        new TonConnectConnector({
          // Pass the existing TonConnectUI instance object
          tonConnectUI
        }),
      ]
    });
    ```

    One can also extend the existing AppKit instance dynamically:

    ```ts theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
    // Passing the existing TonConnectUI instance object
    kit.addConnector(new TonConnectConnector({ tonConnectUI }));
    ```

    Refer to the [complete initialization setup](#complete-setup) for all the possible AppKit configuration options.
  </Step>

  <Step title="Replace method calls with exported functions">
    Instead of consolidating everything within the instantiated `TonConnectUI` object, AppKit offers several tree-shakable functions that enhance and expand the capabilities of the existing `TonConnectUI` functionality. Refer to [relevant how-to pages](/ecosystem/appkit/overview#quick-start) for concrete examples.
  </Step>
</Steps>

## Next steps

<Columns cols={2}>
  <Card title="Work with Toncoin" icon="gem" horizontal="true" href="/ecosystem/appkit/toncoin" />
</Columns>

## See also

* [AppKit overview](/ecosystem/appkit/overview)
* [TON Connect's app manifest](/ecosystem/ton-connect/manifest#app-manifest)
* [TON Connect overview](/ecosystem/ton-connect/overview)