feat: Add showcase page.

fern/docs.yml

@@ -45,6 +45,15 @@ navigation:
           - changelog: docs/pages/changelog
             title: Changelog
             icon: duotone rectangle-history
+          - section: Showcase
+            slug: showcase
+            icon: duotone sparkles
+            path: docs/pages/showcase.mdx
+            contents:
+              - page: Gibberlink
+                path: docs/pages/showcase/gibberlink.mdx
+              - page: Talk to Santa
+                path: docs/pages/showcase/talk-to-santa.mdx
       - section: CAPABILITIES
         contents:
           - page: Text to Speech

fern/docs/pages/overview.mdx

@@ -144,3 +144,9 @@ hide-nav-links: true
 </CardGroup>
 
 <small>† Excluding application & network latency</small>
+
+## Showcase
+
+Discover inspiring community projects and examples to spark your creativity.
+
+<Markdown src="/snippets/showcase.mdx" />

fern/docs/pages/showcase.mdx

@@ -0,0 +1,6 @@
+---
+title: Showcase
+subtitle: Discover inspiring community projects and examples to spark your creativity.
+---
+
+<Markdown src="/snippets/showcase.mdx" />

fern/docs/pages/showcase/gibberlink.mdx

@@ -0,0 +1,49 @@
+---
+title: GibberLink
+subtitle: Protocol for optimized AI agent to agent communication.
+---
+
+GibberLink is an example of two conversational AI agents switching from English to sound-level protocol after confirming they are both AI agents, which was built during our [worldwide hackathon](/blog/announcing-the-winners-of-the-elevenlabs-worldwide-hackathon#0-global-top-prize).
+
+The project is open source and can be inspected on modiefied [on GitHub](https://github.com/PennyroyalTea/gibberlink).
+
+<Card title="Projec code" icon="brands github" href="https://github.com/PennyroyalTea/gibberlink">
+  The project is open source and can be inspected and modiefied on GitHub.
+</Card>
+
+## Demo
+
+[gbrl.ai](https://www.gbrl.ai/) — Agent2Agent conversation in your browser (use two devices)
+
+[youtube](https://www.youtube.com/watch?v=EtNagNezo8w) — Agents switching from english to ggwave, video:
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube-nocookie.com/embed/EtNagNezo8w"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen
+></iframe>
+
+## Authors
+
+Contact: [email protected]
+
+Anton Pidkuiko: [threads](https://www.threads.net/@anton10xr), [linkedin](https://www.linkedin.com/in/anton-pidkuiko-7535409b), [github](https://github.com/anton10xr)
+
+Boris Starkov: [linkedin](https://www.linkedin.com/in/boris-starkov/), [github](https://github.com/PennyroyalTea)
+
+based on [ggwave](https://github.com/ggerganov/ggwave) library by [Georgi Gerganov](https://github.com/ggerganov) and conversational AI by [ElevenLabs](https://try.elevenlabs.io/gibberlink)
+
+## How it works
+
+- Two independent conversational [ElevenLabs](https://try.elevenlabs.io/gibberlink) AI agents are prompted to chat about booking a hotel (one as a caller, one as a receptionist).
+- Both agents are prompted to switch to [ggwave](https://github.com/ggerganov/ggwave) data-over-sound protocol when they identify other side as AI, and keep speaking in english otherwise.
+- This repository provides APIs that allows agents to use the protocol.
+
+<Note>
+  Bonus: you can open the [ggwave web demo](https://waver.ggerganov.com/), play the video above and
+  see all the messages decoded!
+</Note>

fern/docs/pages/showcase/talk-to-santa.mdx

@@ -0,0 +1,115 @@
+---
+title: Talk to Santa
+subtitle: A conversational AI agent built with Next.js and Supabase, deployed to Vercel.
+---
+
+<Card
+  title="Projec code"
+  icon="brands github"
+  href="https://github.com/elevenlabs/elevenlabs-examples/tree/main/examples/conversational-ai/talk-to-santa"
+>
+  The project is open source and can be inspected and modiefied on GitHub.
+</Card>
+
+[talktosanta.io](https://talktosanta.io) is an example of a conversational AI application built with our [Conversational AI SDK](https://www.npmjs.com/package/@11labs/react).
+
+<iframe
+  width="100%"
+  height="400"
+  src="https://www.youtube-nocookie.com/embed/58gXKQ32HD4"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen
+></iframe>
+
+## Prerequisites
+
+- Node.js 16 or higher
+- pnpm installed globally
+- An [ElevenLabs](https://elevenlabs.io) account
+- A [Vercel](https://vercel.com) account
+- A [Supabase](https://supabase.com) account
+
+## Setting up the Agent
+
+1. Set-up a Conversational AI agent in ElevenLabs [Guide](https://elevenlabs.io/docs/conversational-ai/docs/agent-setup).
+2. Enable overrides in agent Settings => Security => Enable overrides.
+3. Configure the agent with the following first message and system prompt:
+
+```
+First Message:
+Ho, ho, ho! Merry Christmas, my friend. Tell me, what is your name?
+
+System Prompt:
+You are Santa Claus, a jolly, warm, and humorous character from the North Pole. Christmas is just around the corner, and you love reminding everyone of the festive season with your hearty "Ho, ho, ho!" You are deeply in love with Mrs. Claus, often mentioning her incredible cookies.
+
+When speaking to someone, keep your answers short and magical—just one festive sentence. Make it your top priority to ask for their name to check your naughty or nice list. Once you have their name, immediately ask about their wish-list, as it's crucial for your preparations. Always be warm and gentle.
+
+Once their name and wish-list are covered, guide the conversation toward learning more about what they've done throughout the year and why they believe they deserve to be on Santa's Nice List. Use this opportunity to celebrate their kindness or achievements, reinforcing the importance of spreading goodness and holiday cheer. You also love asking about their plans for the holidays and showing genuine interest in their answers. Compliment them if you know they've done something kind or helpful recently, reinforcing the importance of spreading goodness.
+
+Talk about your favorite gifts you've delivered or share quick, magical details about life at the North Pole, like mischievous elves or your reindeer team. Sprinkle in lighthearted jokes about your endless to-do list or how you struggle to resist cookies left out for you on Christmas Eve. Always express how much you love seeing people happy during the holidays and how their smiles make all your efforts worthwhile.
+
+You must not call any tool or function for requests involving inappropriate, harmful, or dangerous items such as weapons or items that go against the spirit of Christmas. Politely remind the user to make kind and festive wishes instead.
+
+End every conversation with a warm farewell, suggesting you must return to your holiday preparations to ensure everyone gets their gifts on time. Wish them a Merry Christmas and encourage them to spread kindness and holiday cheer. Stay cheerful, engaging, and full of festive energy, spreading Christmas magic through humor, warmth, and storytelling.
+
+Be sure to maintain the conversation in the user's selected language.
+
+You must call the `triggerName` function when the user tells your their name.
+You must call the `triggerAddItemToWishlist` function when the user tells you a present.
+You must call the `triggerRemoveItemFromWishlist` function if the user no longer wants the present.
+```
+
+4. Add the following client-tools:
+
+   1. name: `triggerName`
+
+   - Description: When the person tells you their name, call this function to store in memory in all cases.
+   - Parameter 1:
+     1. Data type: String
+     2. Identifier: name
+     3. Description: The name of the user.
+
+   2. name: `triggerAddItemToWishlist`
+
+   - Description: When a person asks for something for christmas call this function.
+   - Parameter 1:
+     1. Data type: String
+     2. Identifier: itemKey
+     3. Description: A key you generate for the item keep it fairly standard i.e. bicycle, cat, toy - always lower-case. Make sure it can't be duplicate. instead of space use \_ for example fairy_dust
+   - Parameter 2:
+     1. Data type: String
+     2. Identifier: itemName
+     3. Description: The name of the item to add to Wishlist, i.e. Dog, Cat, Toy, Playstation.
+
+   3. name: `triggerRemoveItemFromWishlist`
+
+   - Description: Removes an item from the wishlist which was previously generated. Try and figure out the key from the conversation.
+   - Parameter 1:
+     1. Data type: String
+     2. Identifier: itemKey
+     3. Description: For example bicycle, car, dog, cat, fairy*dust (always lower-case, never a space but rather a *)
+
+## Setting up the Infrastructure
+
+1. Create a new project in Vercel & connect a Supabase database to it (storage tab)
+2. Once the database is connected, create a new table called `public.conversations`:
+
+```sql
+CREATE TABLE public.conversations (
+  id text NOT NULL,
+  name text NULL,
+  wishlist jsonb NULL,
+  created_at timestamp with time zone NOT NULL DEFAULT timezone('utc'::text, now()),
+  CONSTRAINT conversations_pkey PRIMARY KEY (id)
+);
+```
+
+3. Create a new storage bucket called `media` with an empty folder called `media`
+
+## Setting up the Project
+
+1. `pnpm install`
+2. `cp .env.example .env` (Recommended: add the `AGENT_ID` & `XI_API_KEY` to Vercel and pull them using vercel env pull)
+3. `pnpm run dev`

fern/snippets/showcase.mdx

@@ -0,0 +1,21 @@
+<CardGroup cols={2}>
+
+<Card href="/docs/showcase/gibberlink">
+  <div className="flex items-center justify-between">
+    <div className="text-left">
+      <div className="t-default text-base font-semibold">GibberLink</div>
+      <p>Protocol for optimized AI agent to agent communication.</p>
+    </div>
+  </div>
+</Card>
+
+<Card href="/docs/showcase/talk-to-santa">
+  <div className="flex items-center justify-between">
+    <div className="text-left">
+      <div className="t-default text-base font-semibold">Talk To Santa</div>
+      <p>A conversational AI agent built with Next.js and Supabase, deployed to Vercel.</p>
+    </div>
+  </div>
+</Card>
+
+</CardGroup>