[pull] main from liveblocks:main

docs/pages/get-started/*.prompt.md

@@ -0,0 +1,77 @@
+# Help the user install Liveblocks
+
+## Overview
+
+You must help the user install Liveblocks, following these instructions:
+
+### 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
+```
+
+If the user does not use NPM, change the command accordingly.
+
+### 2. Read the docs page
+
+Read the documentation page linked above. This is the get started guide for the
+Liveblocks feature the user wants to install.
+
+### 3. Read additional documentation pages
+
+Read all additional documentation pages that are referenced in the guide. The
+pages listed as next steps are especially important.
+
+### 4. 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/authentication/).
+[Next.js ID token quickstart](https://liveblocks.io/docs/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.
+
+### 5. Install Liveblocks
+
+Follow each step of the guide to install Liveblocks. Remember to adapt the guide
+to use `authEndpoint` and their secret key.
+
+### 6. Set up environment variables
+
+Create a file for the user where they can insert their environment variables,
+for example `.env.local`, 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 file=".env.local"
+# https://liveblocks.io/dashboard
+LIVEBLOCKS_SECRET_KEY=
+```
+
+## Important tips
+
+- 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.

docs/pages/get-started/javascript.mdx

@@ -12,6 +12,8 @@ collaboration to your JavaScript application using the APIs from the
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-ai-chat.mdx

@@ -15,6 +15,8 @@ components from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-blocknote.mdx

@@ -15,6 +15,8 @@ package.
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks and BlockNote</StepTitle>

docs/pages/get-started/nextjs-chat-sdk-bot.mdx

@@ -15,6 +15,8 @@ in your Next.js `/app` directory application.
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks and Chat SDK</StepTitle>

docs/pages/get-started/nextjs-comments-ag-grid.mdx

@@ -15,6 +15,8 @@ components from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-comments-canvas.mdx

@@ -15,6 +15,8 @@ components from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks and dnd-kit</StepTitle>

docs/pages/get-started/nextjs-comments-handsontable.mdx

@@ -15,6 +15,8 @@ components from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-comments-table.mdx

@@ -16,6 +16,8 @@ components from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-comments.mdx

@@ -15,6 +15,8 @@ components from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-feeds.mdx

@@ -15,6 +15,8 @@ feed to your Next.js `/app` directory application using hooks from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>
@@ -293,13 +295,42 @@ experience for your Next.js application.
 ## Examples using Feeds
 
 <ListGrid columns={2}>
+  <ExampleCard
+    example={{
+      title: "Linear-like Issue Tracker",
+      slug: "linear-like-issue-tracker/nextjs-linear-like-issue-tracker",
+      image: "/images/examples/thumbnails/linear-like-issue-tracker.jpg",
+      advanced: true,
+    }}
+    technologies={["nextjs"]}
+    openInNewWindow
+  />
   <ExampleCard
     example={{
       title: "AI Comments",
-      slug: "ai-comments",
+      slug: "ai-comments/nextjs-comments-ai",
       image: "/images/examples/thumbnails/comments-ai.jpg",
     }}
     technologies={["nextjs"]}
     openInNewWindow
   />
+  <ExampleCard
+    example={{
+      title: "Collaborative Flowchart AI",
+      slug: "collaborative-flowchart-ai/nextjs-react-flow-ai",
+      image: "/images/examples/thumbnails/collaborative-flowchart-ai.jpg",
+      advanced: true,
+    }}
+    technologies={["nextjs"]}
+    openInNewWindow
+  />
+  <ExampleCard
+    example={{
+      title: "AI Reports Dashboard",
+      slug: "ai-dashboard-reports/nextjs-ai-dashboard-reports",
+      image: "/images/examples/thumbnails/ai-reports-dashboard.jpg",
+    }}
+    technologies={["nextjs"]}
+    openInNewWindow
+  />
 </ListGrid>

docs/pages/get-started/nextjs-lexical.mdx

@@ -15,6 +15,8 @@ package.
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks and Lexical</StepTitle>

docs/pages/get-started/nextjs-multiplayer-handsontable.mdx

@@ -17,6 +17,8 @@ application using the hooks from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks and Handsontable</StepTitle>

docs/pages/get-started/nextjs-notifications-custom-email.mdx

@@ -16,6 +16,8 @@ to email using methods from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks Node</StepTitle>

docs/pages/get-started/nextjs-notifications-custom-in-app.mdx

@@ -17,6 +17,8 @@ from [`@liveblocks/react-ui`](/docs/api-reference/liveblocks-react-ui).
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-notifications-custom-microsoft-teams.mdx

@@ -17,6 +17,8 @@ to Microsoft Teams using methods from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks Node</StepTitle>

docs/pages/get-started/nextjs-notifications-custom-slack.mdx

@@ -17,6 +17,8 @@ to Slack using methods from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks Node</StepTitle>

docs/pages/get-started/nextjs-notifications-custom-web-push.mdx

@@ -17,6 +17,8 @@ with Web Push using methods from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks Node</StepTitle>

docs/pages/get-started/nextjs-notifications-custom-webhooks.mdx

@@ -16,6 +16,8 @@ using methods from [`@liveblocks/node`](/docs/api-reference/liveblocks-node).
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks Node</StepTitle>

docs/pages/get-started/nextjs-notifications-email.mdx

@@ -15,6 +15,8 @@ using methods from [`@liveblocks/node`](/docs/api-reference/liveblocks-node).
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/nextjs-notifications-in-app.mdx

@@ -15,6 +15,8 @@ from [`@liveblocks/react-ui`](/docs/api-reference/liveblocks-react-ui).
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>

docs/pages/get-started/nextjs-notifications-microsoft-teams.mdx

@@ -17,6 +17,8 @@ to Microsoft Teams using methods from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/nextjs-notifications-slack.mdx

@@ -17,6 +17,8 @@ to Slack using methods from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/nextjs-notifications-web-push.mdx

@@ -17,6 +17,8 @@ to Web Push using methods from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/nextjs-notifications-webhooks.mdx

@@ -16,6 +16,8 @@ using methods from [`@liveblocks/node`](/docs/api-reference/liveblocks-node).
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/nextjs-presence.mdx

@@ -14,6 +14,8 @@ the [`@liveblocks/react`](/docs/api-reference/liveblocks-react) package.
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/nextjs-react-flow.mdx

@@ -14,6 +14,8 @@ collaboration to your Next.js application using the APIs from the
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks and React Flow</StepTitle>

docs/pages/get-started/nextjs-tiptap.mdx

@@ -14,6 +14,8 @@ package.
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks and Tiptap</StepTitle>

docs/pages/get-started/nextjs-tldraw.mdx

@@ -16,6 +16,8 @@ collaboration to your Next.js and Tldraw app using hooks from
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/nextjs.mdx

@@ -12,6 +12,8 @@ the [`@liveblocks/react`](/docs/api-reference/liveblocks-react) package.
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
 
   <Step>

docs/pages/get-started/react-ai-chat.mdx

@@ -14,6 +14,8 @@ from [`@liveblocks/react-ui`](/docs/api-reference/liveblocks-react-ui).
 
 ## Quickstart
 
+<PromptCta />
+
 <Steps>
   <Step>
     <StepTitle>Install Liveblocks</StepTitle>