# AppKit overview (https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/overview/content.md)



**AppKit** is an open-source SDK for integrating TON into **React** and **JavaScript/TypeScript** decentralized applications and [Telegram Mini Apps](https://core.telegram.org/bots/webapps).

With AppKit, you have a single place to configure networks, wallet connectors, DeFi providers, and React integration around GRAM wallet operations. It also includes an out-of-the-box UI with sub-second updates.

Use AppKit to do the following:

* Connect a GRAM wallet
* Send Gram and [jettons](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/blockchain-basics/standard/tokens/jettons/overview/content.md), work with [NFTs](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/blockchain-basics/standard/tokens/nft/overview/content.md)
* Request swap, staking, or signing operations
* Read wallet data and asset balances

<Callout>
  An application built with AppKit can interact with your own smart contract. To create a contract, use [Acton](https://ton-blockchain.github.io/acton/docs/welcome) and explore primitives, such as [Messages & transactions](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/blockchain-basics/primitives/messages/overview/content.md) and others.
</Callout>

## How it works [#how-it-works]

This is how AppKit fits into the TON ecosystem:

* AppKit prepares requests, tracks application state, and bridges the application interface to wallets and providers.
* Wallets sign transactions and data.
* Backends verify orders, signatures, and business rules.

<Callout type="note">
  AppKit is the user-facing layer of the connection between applications and wallets. Its wallet-side counterpart is [WalletKit](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/walletkit/overview/content.md) — an SDK integrating wallet services with TON.
</Callout>

AppKit builds on top of the following components:

* [TON Connect](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/ton-connect/overview/content.md): A protocol enabling interaction between applications and wallets
* [TanStack Query](https://tanstack.com/query/latest) and hooks
* [TON Center API](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/api/toncenter/introduction/content.md), [TON Center Streaming API v2](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/api/toncenter/streaming/overview/content.md)
* Open interfaces for integrating embedded wallets, on-chain/off-chain on-ramps, and DeFi protocols, such as staking and swaps

<Callout type="note">
  AppKit integrates with DeFi protocols through [providers](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/get-started/providers/content.md).
</Callout>

## Section overview [#section-overview]

| Goal                        | Read                                                                |
| --------------------------- | ------------------------------------------------------------------- |
| Add AppKit to a new app     | [Get started guides](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/get-started/get-started/content.md)  |
| Understand the moving parts | [How-to guides](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/howto/howto/content.md)                   |
| Look up functions and types | [Reference](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/reference/reference/content.md)               |
| Diagnose common issues      | [FAQ and troubleshooting](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/faq-troubleshooting/content.md) |
| Check upgrade notes         | [Changelog](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/changelog/content.md)                         |

## Packages [#packages]

| Package                          | Use                                                             |
| -------------------------------- | --------------------------------------------------------------- |
| `@ton/appkit`                    | Core AppKit instance, actions, connectors, providers, and types |
| `@ton/appkit/queries`            | Query and mutation helpers for data fetching                    |
| `@ton/appkit-react`              | React provider, hooks, components, and core re-exports          |
| `@ton/appkit-react/styles.css`   | Default component styles                                        |
| `@ton/appkit/swap/omniston`      | Omniston swap provider                                          |
| `@ton/appkit/swap/dedust`        | DeDust swap provider                                            |
| `@ton/appkit/staking/tonstakers` | Tonstakers staking provider                                     |

## Examples [#examples]

The [`appkit-minter`](https://github.com/ton-connect/kit/tree/main/apps/appkit-minter) example wires AppKit into a Vite + React application.

This example implements wallet connection, balance and jetton queries, transaction sending, and streaming watches in one place.

[Try it live: `appkit-minter`](https://appkit-minter.vercel.app/).

## Next steps [#next-steps]

* Walk through [Get started guides](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/get-started/get-started/content.md) to install AppKit and reach a working app.
* Switch to [How-to guides](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/howto/howto/content.md) for task-level recipes once the baseline is in place.
* Look up types and signatures in [Reference](https://docs-mpppm4893-ton-core-docs.vercel.app/llms/applications/appkit/reference/reference/content.md).