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

# Getting started

> Install @hot-labs/kit, set up the bundler, create the kit and connect wallets in the browser or on Node.js.

## Install

```bash npm theme={null}
npm install @hot-labs/kit react react-dom
```

```bash yarn theme={null}
yarn add @hot-labs/kit react react-dom
```

React 18 or 19 is a peer dependency: the kit renders its popups with React even when your app does not use it.
The package is ESM only (`"type": "module"`) and needs Node.js 20.10 or newer for tooling and server use.

## Bundler setup

Some chain SDKs the kit depends on use Node built-ins (`Buffer` and friends), so the browser bundle needs polyfills.

### Vite

```bash theme={null}
npm install -D vite-plugin-node-polyfills @vitejs/plugin-react
```

```ts vite.config.ts theme={null}
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { nodePolyfills } from "vite-plugin-node-polyfills";

export default defineConfig({
  plugins: [nodePolyfills(), react()],
});
```

### webpack / Next.js

Provide `Buffer` and `process` (for example with `buffer` and `process/browser` through `webpack.ProvidePlugin`), and
load the kit only on the client:

```tsx theme={null}
"use client";
import { useEffect, useState } from "react";

export function useKit() {
  const [kit, setKit] = useState<import("@hot-labs/kit").HotKit>();
  useEffect(() => {
    void import("./kit").then((m) => setKit(m.kit)); // ./kit creates the HotKit once
  }, []);
  return kit;
}
```

## Create the kit

Create **one** `HotKit` per app, at module level, and reuse it everywhere.

```ts kit.ts theme={null}
import { HotKit } from "@hot-labs/kit";
import { defaultConnectors } from "@hot-labs/kit/defaults";

export const kit = new HotKit({
  connectors: defaultConnectors,
  walletConnect: {
    projectId: "<your Reown project id>", // https://dashboard.reown.com
    metadata: {
      name: "My App",
      description: "My App",
      url: window.location.origin,
      icons: [`${window.location.origin}/icon.png`],
    },
  },
});
```

`defaultConnectors` covers EVM, NEAR, Solana, TON, Stellar, TRON, Sui, Aptos, Starknet, XRP and UTXO chains. Each chain's
code is a separate chunk loaded on demand: see [Connectors](https://docs.hex-api.app/kit/connectors.md).

## Connect and react to wallets

```ts theme={null}
await kit.connect(); // opens the wallet picker

kit.onConnect(({ wallet }) => console.log("connected", wallet.type, wallet.address));
kit.onDisconnect(({ wallet }) => console.log("disconnected", wallet.type));
```

`HotKit` is a MobX store: `kit.wallets`, `kit.priorityWallet`, `kit.evm`, `kit.near` and the balances are observable.
In React, wrap the components that read them in `observer` from `mobx-react-lite`:

```tsx theme={null}
import { observer } from "mobx-react-lite";
import { kit } from "./kit";

export const Wallets = observer(() => (
  <ul>
    {kit.wallets.map((w) => (
      <li key={w.type}>{w.address}</li>
    ))}
  </ul>
));
```

## Open the built-in UI

```ts theme={null}
kit.openProfile(); // balances, activity, disconnect
kit.openBridge(); // swap / bridge between chains
kit.openDepositFlow(); // deposit into the balance account
```

See [UI](https://docs.hex-api.app/kit/ui.md) for presentation, theming and customization.

## Server side

On Node.js import the headless parts only: `@hot-labs/kit/core` and the chain entry point you sign with. They do not
touch `window` and pull no React code.

```ts theme={null}
import { Intents, OmniToken } from "@hot-labs/kit/core";
import { NearWallet } from "@hot-labs/kit/near";

const wallet = NearWallet.fromPrivateKey(privateKeyBytes, "my-account.near");

await Intents.builder(wallet)
  .give(OmniToken.USDT, 1)
  .take(OmniToken.USDC, 1)
  .execute();
```

More in [Intents](https://docs.hex-api.app/kit/intents.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.