[pull] main from liveblocks:main

examples/nextjs-ai-slideshow/.env.example

@@ -0,0 +1,5 @@
+# https://liveblocks.io/dashboard/apikeys
+LIVEBLOCKS_SECRET_KEY=
+
+# https://vercel.com/docs/ai-gateway
+AI_GATEWAY_API_KEY=

examples/nextjs-ai-slideshow/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+.env
+.env.*
+!.env.example
+*.tsbuildinfo
+.vercel
+.next
+out
+next-env.d.ts
+# Turborepo
+.turbo

examples/nextjs-ai-slideshow/README.md

@@ -0,0 +1,97 @@
+<p align="center">
+  <a href="https://liveblocks.io#gh-light-mode-only">
+    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" />
+  </a>
+  <a href="https://liveblocks.io#gh-dark-mode-only">
+    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" />
+  </a>
+</p>
+
+# AI Slideshow Generator
+
+<p>
+  <a href="https://liveblocks.io/examples/ai-slideshow/nextjs-ai-slideshow">
+    <img src="https://img.shields.io/badge/live%20preview-message?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczL3N2ZyI+PHBhdGggZD0iTTE2Ljg0OSA0Ljc1SDBsNC44NDggNS4wNzV2Ny4wMDhsMTItMTIuMDgzWk03LjE1IDE5LjI1SDI0bC00Ljg0OS01LjA3NVY3LjE2N2wtMTIgMTIuMDgzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==&color=333" alt="Live Preview" />
+  </a>
+  <a href="https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-ai-slideshow">
+    <img src="https://img.shields.io/badge/open%20in%20codesandbox-message?style=flat&logo=codesandbox&color=333&logoColor=fff" alt="Open in CodeSandbox" />
+  </a>
+  <img src="https://img.shields.io/badge/react-message?style=flat&logo=react&color=0bd&logoColor=fff" alt="React" />
+  <img src="https://img.shields.io/badge/next.js-message?style=flat&logo=next.js&color=07f&logoColor=fff" alt="Next.js" />
+</p>
+
+This example shows how to build a multiplayer AI slideshow builder with
+[Liveblocks Feeds](https://liveblocks.io/docs/collaboration-features/ai-collaboration),
+[Yjs](https://yjs.dev/), [CodeMirror](https://codemirror.net/),
+[Liveblocks Comments](https://liveblocks.io/docs/products/comments), and
+[Next.js](https://nextjs.org/). Chat with AI to generate slides with HTML, and
+it’ll create previews of new slides that you can apply. Alternatively,edit the
+HTML directly in the collaborative editor. You can also leave comments on
+slides.
+
+## Getting started
+
+Run the following command to try this example locally:
+
+```bash
+npx create-liveblocks-app@latest --example nextjs-ai-slideshow --api-key
+```
+
+This will download the example and ask permission to open your browser, enabling
+you to automatically get your API key from your
+[liveblocks.io](https://liveblocks.io) account.
+
+### Manual setup
+
+<details><summary>Read more</summary>
+
+<p></p>
+
+Alternatively, you can set up your project manually:
+
+- Install all dependencies with `npm install`
+- Create an account on [liveblocks.io](https://liveblocks.io/dashboard)
+- Copy your **secret** key from the
+  [dashboard](https://liveblocks.io/dashboard/apikeys)
+- Create an `.env.local` file and add your **secret** key as the
+  `LIVEBLOCKS_SECRET_KEY` environment variable
+- Add an `AI_GATEWAY_API_KEY` from the
+  [Vercel AI Gateway](https://vercel.com/docs/ai-gateway).
+- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)
+
+To see realtime sync, open the page in two browser tabs. Edits to the HTML,
+comment pins, chat messages, and applied proposals sync across both tabs.
+
+</details>
+
+### Deploy on Vercel
+
+<details><summary>Read more</summary>
+
+<p></p>
+
+To both deploy on [Vercel](https://vercel.com), and run the example locally, use
+the following command:
+
+```bash
+npx create-liveblocks-app@latest --example nextjs-ai-slideshow --vercel
+```
+
+This will download the example and ask permission to open your browser, enabling
+you to deploy to Vercel.
+
+</details>
+
+### Develop on CodeSandbox
+
+<details><summary>Read more</summary>
+
+<p></p>
+
+After forking
+[this example](https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-ai-slideshow)
+on CodeSandbox, create the `LIVEBLOCKS_SECRET_KEY` environment variable as a
+[secret](https://codesandbox.io/docs/secrets). Add `AI_GATEWAY_API_KEY` if you
+want real model responses instead of the mock slide designer.
+
+</details>