# Add wallet connectors in AppKit (https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/connectors/content.md)



Wire up a connector so AppKit can talk to a wallet. A connector is the transport that carries requests to the wallet and responses back — it does not sign, and is not itself a wallet. Signing always happens inside the user's wallet application. AppKit cares about the connector's `id`, `type`, `metadata`, and the methods it exposes (`connectWallet`, `disconnectWallet`, `getConnectedWallets`, `destroy`). The protocol underneath is hidden.

## Before you begin [#before-you-begin]

Install AppKit first. See [Prepare your project](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/installation/installation/content.md).

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

The `AppKit` constructor takes a `connectors` array of connector factories such as `createTonConnectConnector`. A single `AppKit` instance can hold more than one connector, and the user picks at connect time. The example below registers a single TON Connect connector — enough to start wiring up the connect button.

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

export const appKit = new AppKit({
  connectors: [
    createTonConnectConnector({
      tonConnectOptions: {
        manifestUrl: 'https://example.com/tonconnect-manifest.json',
      },
    }),
  ],
});
```

## Render a connect button [#render-a-connect-button]

Drop `<TonConnectButton />` somewhere in the tree to open the wallet picker. The button assumes the React providers are already mounted — see [Install AppKit → Wrap the application](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/installation/react-app/content.md).

For most apps, this drop-in component is the right starting point. `<TonConnectButton />` from `@ton/appkit-react` owns the connect modal, the session lifecycle (open, restore on reload, expire), and the connected-address display. When the UI needs a tailored wallet list, use `useConnectors` and `useConnect` directly. That pattern is documented in [Connect to a wallet](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/howto/connect-to-a-wallet/content.md).

```tsx
import { TonConnectButton } from '@ton/appkit-react';

export function Header() {
  return <TonConnectButton />;
}
```

## Tips [#tips]

Do not assume every connector supports every flow. Check capability before sending a request and treat user rejection as a normal outcome on every action. Connector errors and chain errors are different failure classes and need different recovery paths.

## Next steps [#next-steps]

* Continue to [Add networks](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/get-started/networks/content.md) to configure mainnet alongside testnet and pick an API client.
* For the custom-selector pattern, vanilla JS connect, and error handling, see [Connect to a wallet](https://docs-rbcpr9qys-ton-core-docs.vercel.app/llms/applications/appkit/howto/connect-to-a-wallet/content.md).