# Getting Started

## Creating next-app

*If you already have Nextjs with app routing installed you can skip this step.*

Follow the steps on the Next.js [Installation page](https://nextjs.org/docs/getting-started/installation). 

*  If using `create-next-app`, make sure you input `Yes` when prompted: `Would you like to use App Router? (recommended) No / Yes`.
* If installing manually, ensure to [follow](https://nextjs.org/docs/getting-started/installation#the-app-directory) the `app routing` structure.

## Installation

#### NPM Package

Please note that some of **Block3d**'s transitive dependencies rely on [ws 8.13.0](https://www.npmjs.com/package/ws/v/8.13.0), which is a vulnerable version of [ws](https://www.npmjs.com/package/ws) that contains a high-level issue that has since then been [reviewed and patched](https://github.com/advisories/GHSA-3h5v-q93c-6h6q). To resolve these vulnerabilities you can set [override](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides)[s](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides) in your `package.json` file like so:

```json
"overrides": {
    "mipd": {
      "ws": "8.17.1"
    },
    "viem": {
      "ws": "8.17.1"
    }
  }
```

**Block3d** can then be installed by running this command:

{% tabs %}
{% tab title="npm" %}

```sh
npm install block3d
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add block3d
```

{% endtab %}
{% endtabs %}

Finally, if you don't already have these installed, make sure to run this command as well:

{% tabs %}
{% tab title="npm" %}

```sh
npm install wagmi @rainbow-me/rainbowkit @tanstack/react-query viem@2.x
```

{% endtab %}

{% tab title="yarn" %}

```sh
yarn add wagmi @rainbow-me/rainbowkit @tanstack/react-query viem@2.x
```

{% endtab %}
{% endtabs %}

#### Git Submodule

**Block3d** alternatively comes in the form of a git submodule. This way you can quickly integrate the toolkit and, with minimal effort, be compatible with any future upgrades while maintaining a distinct separation of the submodule and the parent directory. This also allows you to fork **Block3d** and directly edit it however you want.

```sh
git submodule add https://github.com/RohanNero/block3d-submodule
```


---

# 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://block3d.gitbook.io/block3d/getting-started.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.