# Quick Start

This page walks through the minimum setup required to embed the WheelX Widget inside a Next.js app.

## ✅ Requirements

Before installing, make sure your host app matches the current package requirements:

| Item      | Required Version |
| --------- | ---------------- |
| Node.js   | `>= 20`          |
| pnpm      | `>= 10`          |
| Next.js   | `>= 15`          |
| React     | `19.x`           |
| React DOM | `19.x`           |

## 📥 Install

```bash
pnpm add @wheelx/widget @rainbow-me/rainbowkit
```

If your app does not already include RainbowKit styles, import them once in your app entry:

```tsx
import '@rainbow-me/rainbowkit/styles.css'
```

## 🧱 Minimal Integration

```tsx
'use client'

import {
  WheelxBridgeSwapWidget,
  WheelxWidgetProvider
} from '@wheelx/widget'

export default function Page() {
  return (
    <WheelxWidgetProvider>
      <WheelxBridgeSwapWidget />
    </WheelxWidgetProvider>
  )
}
```

This is the fastest way to get a working widget on screen.

## ⚙️ Add Config

Once the base widget is mounted, pass a config object to control mode, defaults, supported assets, or theme:

```tsx
'use client'

import {
  WheelxBridgeSwapWidget,
  WheelxWidgetProvider,
  type WheelxWidgetConfig
} from '@wheelx/widget'

const widgetConfig: WheelxWidgetConfig = {
  mode: 'bridge-and-swap',
  referralCode: 'your-affiliate-code'
}

export default function Page() {
  return (
    <WheelxWidgetProvider>
      <WheelxBridgeSwapWidget config={widgetConfig} />
    </WheelxWidgetProvider>
  )
}
```

## 🛠️ Next Step

After the minimal integration works, continue with:

* chain restriction
* token restriction
* theme customization
* referral setup

Those are covered in the next pages.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wheelx.fi/widget/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.