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

# Getting Started

***

### Prerequisites

| Dependency | Version                               |
| ---------- | ------------------------------------- |
| Node.js    | 18 or higher                          |
| React      | 17 or higher (for widget integration) |
| React DOM  | 17 or higher (for widget integration) |
| ethers     | v6 (peer dependency of core-sdk)      |

The core SDK is framework-agnostic. It works in React, Vue, Svelte, vanilla JavaScript or Node.js. The widget component requires React.

***

### Step 1: Register your application

Go to **sdk.surfliquid.com** and register your application. On approval, you receive two credentials:

* **`appId`** - a public identifier. Safe to include in frontend code.
* **`apiSecret`** - a private key for backend API calls. Store this securely in environment variables or a secrets manager. It is shown only once.

***

### Step 2: Install packages

```bash
npm install @surf_liquid/core-sdk @surf_liquid/surf-widget
```

***

### Step 3: Render the widget

```tsx
import { SurfWidget } from '@surf_liquid/surf-widget';
import { SurfClient } from '@surf_liquid/core-sdk';

// Create the client after the user connects their wallet
const client = new SurfClient({
  provider: window.ethereum,       // any EIP-1193 wallet provider
  walletAddress: '0xUserAddress',
  chainId: 8453,                   // Base mainnet (1 = Ethereum, 137 = Polygon)
  appId: 'YOUR_APP_ID',
  autoApprove: true,
});

// Drop the widget into your app
<SurfWidget
  client={client}
  walletAddress="0xUserAddress"
  chainId={8453}
  minDeposit={1}
  theme={{ colors: { primary: '#6366f1' } }}
  onSuccess={(action, txHash) => console.log(action, txHash)}
  onError={(action, error) => console.error(action, error)}
/>
```

That is everything you need for a fully functional savings experience inside your application.

***

### What happens next

Once the widget is live, your users can:

1. Connect their wallet
2. Deposit USDC (or other supported assets)
3. A personal smart contract vault is deployed on their first deposit
4. Surf AI begins managing their funds across approved venues
5. Users track their balance, earnings and Surf AI activity in real time
6. Withdraw any amount at any time

Your partner dashboard at sdk.surfliquid.com shows aggregate stats, user positions and revenue reporting.

***

### Further reading

* [Widget Integration](/surfliquid-docs/sdk-docs/widget-integration.md) - Full component reference and user flow walkthrough
* [Customisation](/surfliquid-docs/sdk-docs/customisation.md) - Match the widget to your brand identity
* [Core SDK Reference -](/surfliquid-docs/sdk-docs/core-sdk-reference.md) Build a fully custom interface
* [REST API Reference](broken://pages/iVsQEp0rD09XMYZeSOYh) - Server-side analytics and reporting