# Install Liveblocks

Help the user install Liveblocks into their existing
application or build a new app. Keep your replies succinct, not updating the user on progress. You've copied this prompt from the Liveblocks homepage. 

## 1. Install the `liveblocks-best-practices` skill

Check if you have the `liveblocks-best-practices` skill installed. If you do not
have it installed, ask the user to install it:

```bash
npx skills add liveblocks/skills --skill liveblocks-best-practices --global
```

## 2. Read the get started overview

Read the get started overview page and internalize the list of guides:
https://liveblocks.io/docs/get-started.md

## 3. Identify the app's framework

Scan files to find which framework this app is using (e.g. Next.js), for example
by looking inside `package.json`.

## 4. Ask the user what they want to build

You must ask the user which feature(s) they'd like to install. Use this to
identify which get started guide to read. You can ask multiple questions, for
example:

<example>

Q: Which Liveblocks features would you like to add? Features include Comments,
Sync, AI Collaboration, AI Chat, Notifications.
A: Sync

Q: What kind of Sync would you like in your app?
A: In a text editor

Q: [Scans package.json] I see you're using Tiptap, would you like to make it
collaborative with Sync?
A: Yes

[Selects Next.js get started guide for Tiptap]

</example>

Other things to check for:

- Where comments will feature in the page (e.g. in a text editor, on a flowchart, in a sidebar, etc.)
- What multiplayer will be for (e.g. a canvas, table, editor, etc.)
- Is this an AI chat with front end tooling and ready-made UI (AI Copilot)

Note down your selected guide.

## 5. Think about how to authenticate Liveblocks

Think about how to authenticate Liveblocks, using ID tokens by default. You must
ensure the user is authenticated with their secret key and `authEndpoint`, **do
not** finish if the user is still using their public API key with
`publicApiKey`. [Learn more](https://liveblocks.io/docs/api-reference/authentication/).
[Next.js ID token quickstart](https://liveblocks.io/docs/api-reference/authentication/id-token/nextjs).

```
authEndpoint="api/liveblocks-auth"
```

Remember that ID tokens requires users to create a room manually, for example
with `liveblocks.createRoom` from `@liveblocks/node`, or with the REST API.

```ts
const room = await liveblocks.createRoom("my-room-id", {
  defaultAccesses: ["room:write"],
});
```

Additionally, if the user's app has users inside of it, authenticate them and
attach their name, avatar, and color (if they have them) to Liveblocks.

## 6. Read the get started guide

Read your selected get started guide from 4. and follow each step of the guide
to install Liveblocks. Remember to adapt the guide to use `authEndpoint` and
their secret key. 

Make sure to read all additional documentation pages that are referenced in the
guide, and **follow those guides too**. The pages listed as next steps are 
especially important.

### 7. Set up environment variables

Create a file for the user where they can insert their environment variables,
for example a local env file, and let the user know where it is (link them if you
can). Leave a space for their keys. Let the user know they can fetch their keys
from the [Liveblocks dashboard](https://liveblocks.io/dashboard) by creating a
new project.

Example:

```env
# https://liveblocks.io/dashboard
LIVEBLOCKS_SECRET_KEY=
```

## Important tips

- You **must** identify the correct get started guide.
- You **must** follow any additional steps that are linked to at the bottom.
  Load and read all linked pages.
- **Never** leave the user with `publicApiKey` in their code. You must always
  set up authentication for them, using ID tokens unless specified otherwise.