# Install AppKit in a vanilla JS app (https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/installation/vanilla-js/content.md)



Install AppKit's core package, create an `AppKit` instance, and call actions such as `connect`, `transferTon`, `sendTransaction`, and the `watch*` subscribers directly on it.

## Install packages [#install-packages]

```bash
npm i @ton/appkit @tonconnect/ui @ton/core
```

| Package          | Use                                                       |
| ---------------- | --------------------------------------------------------- |
| `@ton/appkit`    | Core runtime: actions, connectors, types.                 |
| `@tonconnect/ui` | TON Connect transport used by the `TonConnect` connector. |
| `@ton/core`      | TON address and cell primitives.                          |

<Callout>
  Complete the [Preparation](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/installation/installation/content.md) step first. The `Buffer` polyfill it sets up is required for AppKit to run in the browser.
</Callout>

## Create the AppKit instance [#create-the-appkit-instance]

Create the `AppKit` instance in a dedicated module. An empty configuration is enough to start — connectors, networks, and DeFi providers are added on the following pages.

```ts
// src/appkit.ts
import { AppKit } from '@ton/appkit';

export const appKit = new AppKit({});
```

Import the instance wherever a core action is called:

```ts
import { connect, getBalance, transferTon } from '@ton/appkit';
import { appKit } from './appkit';

await connect(appKit, { connectorId: 'tonconnect' });
const balance = await getBalance(appKit);
await transferTon(appKit, { recipientAddress, amount: '0.1' });
```

## TanStack Query (optional) [#tanstack-query-optional]

The `@ton/appkit/queries` entry point exports framework-agnostic `queryOptions` and mutation helpers compatible with any TanStack adapter — `@tanstack/vue-query`, `@tanstack/svelte-query`, `@tanstack/solid-query`, and others. The same entry point backs `@ton/appkit-react` through `@tanstack/react-query`.

```ts
import { useQuery } from '@tanstack/react-query';
import { getBalanceByAddressQueryOptions } from '@ton/appkit/queries';

const { data } = useQuery(getBalanceByAddressQueryOptions(appKit, { address: 'EQ...' }));
```

## Next steps [#next-steps]

<Columns cols="2">
  <Card title="Add wallet connectors" icon="plug" href="/applications/appkit/get-started/connectors">
    Register wallet connectors on the `AppKit` instance and open the connect flow.
  </Card>

  <Card title="Send transactions" icon="code" href="/applications/appkit/get-started/sending-transactions">
    Call `transferTon`, `transferJetton`, and `sendTransaction` from the AppKit core.
  </Card>
</Columns>