# SDK setup
Use these instructions to install, authenticate and instantiate the Spaces SDK.
## Authenticate
An [API key](https://ably.com/docs/auth.md#api-keys) is required to authenticate with Ably. API keys are used either to authenticate directly with Ably using [basic authentication](https://ably.com/docs/auth/basic.md), or to generate tokens for untrusted clients using [token authentication](https://ably.com/docs/auth/token.md).
[Sign up](https://ably.com/sign-up) to Ably to create an API key in the [dashboard](https://ably.com/dashboard) or use the [Control API](https://ably.com/docs/platform/account/control-api.md) to create an API programmatically.
API keys and tokens have a set of capabilities assigned to them that specify which operations, such as `subscribe` or `publish` can be performed on which resources. To use the Spaces SDK, the API key requires the following [capabilities](https://ably.com/docs/auth/capabilities.md):
* Publish
* Subscribe
* Presence
* History
## Install
The Spaces SDK is built on top of the Ably JavaScript SDK and uses it to establish a connection with Ably. Therefore the Ably JavaScript SDK is installed alongside the Spaces SDK.
Both SDKs are available as [NPM modules](#npm) and via [CDN.](#cdn)
### Using NPM
Install the Ably JavaScript SDK and the Spaces SDK:
```shell
npm install @ably/spaces
```
Import the SDKs into your project:
```javascript
import Spaces from '@ably/spaces';
import { Realtime } from 'ably';
```
### Using a CDN
Reference the Ably JavaScript SDK and the Spaces SDK within the `` of your HTML file:
```javascript
```
## Instantiate
Instantiate a realtime client using the Ably JavaScript SDK and pass the generated client into the Spaces constructor:
```javascript
// If installing via NPM
const client = new Realtime({key: "", clientId: ""});
const spaces = new Spaces(client);
// If installing via CDN
const client = new Ably.Realtime({key: "", clientId: ""});
const spaces = new Spaces(client);
```
A [`ClientOptions`](https://ably.com/docs/api/realtime-sdk.md#client-options) object may be passed to the Ably JavaScript SDK to further customize the connection, however at a minimum you must set your API key and provide a `clientId` so that the client is [identified](https://ably.com/docs/auth/identified-clients.md).
## Client connections
A Spaces client exposes the underlying [connection](https://ably.com/docs/connect.md) to Ably that is established via the Ably JavaScript SDK. This means that Spaces clients benefit from the same functionality available in the Ably JavaScript SDK, such as automatic transport selection and [connection state recovery](https://ably.com/docs/connect/states.md) in the event of brief disconnections.
Connections transition through multiple states throughout their lifecycle. Whilst these transitions are handled by the Ably SDK, there are certain cases where you may need to observe and handle them within your application. Ably SDKs enable these transitions to be observed and triggered using methods available on the `connection` object. The Spaces SDK exposes the underlying connection with `spaces.connection`, which is a reference to [`client.connection`](https://ably.com/docs/api/realtime-sdk/connection.md) in the Ably JavaScript SDK.