# Installation

Install the SDKs and get your environment ready.

### Prerequisites

- **Node.js 18+** — required for both SDKs
- **React 18+** — required if using the React SDK
- **Arlopass browser extension** — installed in the user's browser to provide AI credentials

### React SDK

The React SDK gives you hooks, providers, and guard components for building AI-powered React apps.

```bash title="Terminal"
pnpm add @arlopass/react
```

### Web SDK

The Web SDK is framework-agnostic. Use it with vanilla JavaScript, Svelte, Vue, or any other framework.

```bash title="Terminal"
pnpm add @arlopass/web-sdk
```

### Browser extension

Arlopass requires the browser extension to be installed in the end user's browser. The extension manages provider credentials and exposes the secure transport that the SDKs connect to. Install the Arlopass browser extension from the Chrome Web Store.

### Verify installation

Add one of these import checks to confirm everything is wired up:

```typescript title="React SDK"
import { ArlopassProvider, useConversation } from "@arlopass/react";

console.log("React SDK loaded ✓");
```

```typescript title="Web SDK"
import { ArlopassClient } from "@arlopass/web-sdk";

console.log("Web SDK loaded ✓");
```

### Components Library

The optional components library provides headless React primitives for building chat interfaces.

```bash title="Terminal"
pnpm add @arlopass/react-ui
```

You can also use the block registry CLI to copy pre-styled Tailwind blocks into your project:

```bash title="Terminal"
npx @arlopass/ui add chat
```

### TypeScript

Both SDKs ship with full TypeScript declarations. No `@types` packages needed — just import and go.