> For the complete documentation index, see [llms.txt](https://docs.cspr.click/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cspr.click/documentation/getting-started.md).

# Getting started

This page guides you through the steps to create a new React application for your project with CSPR.click UI SDK integrated and ready to use.

{% hint style="info" %}
If you want to integrate CSPR.click SDK into an existing React application, go to the [React Context Provider](/cspr.click-sdk/integration/react-context-provider.md) section. If you are not using React, or you want to control the runtime loading yourself, follow [Downloading and initializing the SDK](https://github.com/make-software/casper-click-websdk/blob/master/docs/public/csprclick-sdk/downdload-and-initialize.md).
{% endhint %}

## Create a new React project

To create a new React project with CSPR.click ready to use, write the following command in a terminal session:

```
npx tiged make-software/csprclick-examples/csprclick-react my-casper-app
```

Next, go to the newly created project directory and run the app:

```
cd my-casper-app
pnpm install
pnpm run dev
```

Your new app will open in your browser. If it doesn't, browse to the URL: <http://localhost:5173>.

<figure><img src="/files/F4poS6qGUl8FIPNfiCTd" alt=""><figcaption><p>Your new application</p></figcaption></figure>

## Adjust the initialization options

Your new project comes with some default initialization options. You'll need to review them and adjust some.

Open the file `src/ClickContext.tsx` and locate the definition of the `clickSDKOptions` variable. It'll look similar to this:

```typescript
import { CONTENT_MODE } from '@make-software/csprclick-core-types';

window.clickSDKOptions = {
  appName: 'CSPR.click React template',
  appId: 'csprclick-template',
  providers: ['casper-wallet', 'ledger', 'metamask-snap'],
  contentMode: CONTENT_MODE.IFRAME
};
```

You can use the default `csprclick-template` application identifier while you're working locally on your application. But to upload your new project to a server, you'll need to [get your own application id](/documentation/overview.md).

Update the properties according to your needs. Read more about the [CsprClickInitOptions ](/cspr.click-sdk/reference/types.md#csprclickinitoptions)type in the Core JS SDK reference.

## What's next

You're almost ready to start developing the next web3 killer app. Before you get cracking on your project, get familiar with some crucial aspects of CSPR.click that are demonstrated in the template:

#### Responding to CSPR.click events

The `App` component sets handlers to listen and respond to events triggered by CSPR.click when the user connects an account, switches to a different one, or closes the session.

Refer to the [Handling events](/cspr.click-sdk/integration/handling-events.md) page for information on how to add your listener functions.

#### Customize the top navigation bar

The template displays some settings selectors in the top navigation bar. Find the `ClickTopBar` component in `src/components/ClickTopBar/index.tsx` and see how these settings are defined.

Refer to the [Customizing the top bar](/cspr.click-sdk/integration/customizing-the-top-bar.md) section for complete reference on how to work with each of the setting elements in the top bar.

#### Request transaction approvals

At some point, your application will need to interact with the Casper network by sending a transaction (aka deploy).\
CSPR.click manages this process communicating with the active wallet to request the user to approve or reject the transaction. The UI depends on the wallet.

The template includes the `BuyMeACoffee` components to demonstrate how to request a transaction signature and send the approved deploy to the network.

Refer to the [Signing transactions](/cspr.click-sdk/integration/signing-transactions.md) page for information on how to request the user a transaction approval. Also, look at [Processing status updates](/cspr.click-sdk/integration/processing-status-updates.md) for information on how to listen for real-time status updates.

#### Leverage CSPR.cloud Proxy

CSPR.click provides a proxy to interact with the CSPR.cloud REST and Streaming APIs, as well as to set up a Node RPC client with `casper-js-sdk`. This is helpful when you want to interact with the CSPR.cloud APIs from the frontend of your application, as CSPR.cloud APIs require authentication and you must not expose your API keys in the frontend.

Refer to the [CSPR.cloud API proxies](/cspr.click-sdk/reference/cloud-proxies.md) page for information on how to use the proxy.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.cspr.click/documentation/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.