chore: import upstream snapshot with attribution

examples/showcases/presentation/src/app/actions/useAppendSlide.tsx

@@ -0,0 +1,57 @@
+import { useCopilotAction } from "@copilotkit/react-core";
+import { SlideModel } from "../types";
+import { SlidePreview } from "../components/misc/SlidePreview";
+
+interface AppendSlideParams {
+  setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
+  setCurrentSlideIndex: (fn: (i: number) => number) => void;
+  slides: SlideModel[];
+}
+
+export default function useAppendSlide({
+  setSlides,
+  setCurrentSlideIndex,
+  slides,
+}: AppendSlideParams) {
+  useCopilotAction({
+    name: "appendSlide",
+    description:
+      "Add a slide after all the existing slides. Call this function multiple times to add multiple slides.",
+    parameters: [
+      {
+        name: "content",
+        description:
+          "The content of the slide. MUST consist of a title, then an empty newline, then a few bullet points. Always between 1-3 bullet points - no more, no less.",
+      },
+      {
+        name: "backgroundImageUrl",
+        description:
+          "The url of the background image for the slide. Use the getImageUrl tool to retrieve a URL for a topic.",
+      },
+      {
+        name: "spokenNarration",
+        description:
+          "The text to read while presenting the slide. Should be distinct from the slide's content, " +
+          "and can include additional context, references, etc. Will be read aloud as-is. " +
+          "Should be a few sentences long, clear, and smooth to read." +
+          "DO NOT include meta-commentary, such as 'in this slide', 'we explore', etc.",
+      },
+    ],
+
+    handler: async ({ content, backgroundImageUrl, spokenNarration }) => {
+      const newSlide: SlideModel = {
+        content,
+        backgroundImageUrl,
+        spokenNarration,
+      };
+
+      setSlides((slides) => [...slides, newSlide]);
+      setCurrentSlideIndex((i) => slides.length);
+    },
+    render: (props) => {
+      return (
+        <SlidePreview {...props.args} done={props.status === "complete"} />
+      );
+    },
+  });
+}

examples/showcases/presentation/src/app/actions/useUpdateSlide.tsx

@@ -0,0 +1,45 @@
+import { useCopilotAction } from "@copilotkit/react-core";
+import { SlideModel } from "../types";
+import { SlidePreview } from "../components/misc/SlidePreview";
+
+interface UpdateSlideParams {
+  partialUpdateSlide: (partialSlide: Partial<SlideModel>) => void;
+}
+
+export default function useUpdateSlide({
+  partialUpdateSlide,
+}: UpdateSlideParams) {
+  useCopilotAction({
+    name: "updateSlide",
+    description: "Update the current slide.",
+    parameters: [
+      {
+        name: "content",
+        description:
+          "The content of the slide. Should generally consist of a few bullet points.",
+      },
+      {
+        name: "backgroundImageUrl",
+        description:
+          "The url of the background image for the slide. Use the getImageUrl tool to retrieve a URL for a topic.",
+      },
+      {
+        name: "spokenNarration",
+        description:
+          "The spoken narration for the slide. This is what the user will hear when the slide is shown.",
+      },
+    ],
+    handler: async ({ content, backgroundImageUrl, spokenNarration }) => {
+      partialUpdateSlide({
+        content,
+        backgroundImageUrl,
+        spokenNarration,
+      });
+    },
+    render: (props) => {
+      return (
+        <SlidePreview {...props.args} done={props.status === "complete"} />
+      );
+    },
+  });
+}

examples/showcases/presentation/src/app/api/copilotkit/research.ts

@@ -0,0 +1,256 @@
+/**
+ * This is a port of GPT Newspaper to LangGraph JS, adapted from the original Python code.
+ *
+ * https://github.com/assafelovic/gpt-newspaper
+ */
+import { HumanMessage, SystemMessage } from "@langchain/core/messages";
+import { ChatOpenAI } from "@langchain/openai";
+import { StateGraph, END } from "@langchain/langgraph";
+import { RunnableLambda } from "@langchain/core/runnables";
+import { TavilySearchAPIRetriever } from "@langchain/community/retrievers/tavily_search_api";
+
+interface AgentState {
+  topic: string;
+  searchResults?: string;
+  article?: string;
+  critique?: string;
+}
+
+function model() {
+  return new ChatOpenAI({
+    temperature: 0,
+    modelName: "gpt-3.5-turbo-0125",
+  });
+}
+
+async function search(state: {
+  agentState: AgentState;
+}): Promise<{ agentState: AgentState }> {
+  const retriever = new TavilySearchAPIRetriever({
+    k: 10,
+  });
+  let topic = state.agentState.topic;
+  // must be at least 5 characters long
+  if (topic.length < 5) {
+    topic = "topic: " + topic;
+  }
+  console.log("searching for topic:", topic);
+  const docs = await retriever.getRelevantDocuments(topic);
+  console.log("search result length:", docs.length);
+  return {
+    agentState: {
+      ...state.agentState,
+      searchResults: JSON.stringify(docs),
+    },
+  };
+}
+
+async function curate(state: {
+  agentState: AgentState;
+}): Promise<{ agentState: AgentState }> {
+  console.log("curating search results");
+  const response = await model().invoke(
+    [
+      new SystemMessage(
+        `You are a personal newspaper editor. 
+         Your sole task is to return a list of URLs of the 5 most relevant articles for the provided topic or query as a JSON list of strings
+         in this format:
+         {
+          urls: ["url1", "url2", "url3", "url4", "url5"]
+         }
+         .`.replace(/\s+/g, " "),
+      ),
+      new HumanMessage(
+        `Today's date is ${new Date().toLocaleDateString("en-GB")}.
+       Topic or Query: ${state.agentState.topic}
+       
+       Here is a list of articles:
+       ${state.agentState.searchResults}`.replace(/\s+/g, " "),
+      ),
+    ],
+    {
+      response_format: {
+        type: "json_object",
+      },
+    },
+  );
+  const urls = JSON.parse(response.content as string).urls;
+  const searchResults = JSON.parse(state.agentState.searchResults!);
+  const newSearchResults = searchResults.filter((result: any) => {
+    return urls.includes(result.metadata.source);
+  });
+  console.log("curated search results:", newSearchResults);
+  return {
+    agentState: {
+      ...state.agentState,
+      searchResults: JSON.stringify(newSearchResults),
+    },
+  };
+}
+
+async function critique(state: {
+  agentState: AgentState;
+}): Promise<{ agentState: AgentState }> {
+  console.log("critiquing article");
+  let feedbackInstructions = "";
+  if (state.agentState.critique) {
+    feedbackInstructions =
+      `The writer has revised the article based on your previous critique: ${state.agentState.critique}
+       The writer might have left feedback for you encoded between <FEEDBACK> tags.
+       The feedback is only for you to see and will be removed from the final article.
+    `.replace(/\s+/g, " ");
+  }
+  const response = await model().invoke([
+    new SystemMessage(
+      `You are a personal newspaper writing critique. Your sole purpose is to provide short feedback on a written 
+      article so the writer will know what to fix.       
+      Today's date is ${new Date().toLocaleDateString("en-GB")}
+      Your task is to provide a really short feedback on the article only if necessary.
+      if you think the article is good, please return [DONE].
+      you can provide feedback on the revised article or just
+      return [DONE] if you think the article is good.
+      Please return a string of your critique or [DONE].`.replace(/\s+/g, " "),
+    ),
+    new HumanMessage(
+      `${feedbackInstructions}
+       This is the article: ${state.agentState.article}`,
+    ),
+  ]);
+  const content = response.content as string;
+  console.log("critique:", content);
+  return {
+    agentState: {
+      ...state.agentState,
+      critique: content.includes("[DONE]") ? undefined : content,
+    },
+  };
+}
+
+async function write(state: {
+  agentState: AgentState;
+}): Promise<{ agentState: AgentState }> {
+  console.log("writing article");
+  const response = await model().invoke([
+    new SystemMessage(
+      `You are a personal newspaper writer. Your sole purpose is to write a well-written article about a 
+      topic using a list of articles. Write 5 paragraphs in markdown.`.replace(
+        /\s+/g,
+        " ",
+      ),
+    ),
+    new HumanMessage(
+      `Today's date is ${new Date().toLocaleDateString("en-GB")}.
+      Your task is to write a critically acclaimed article for me about the provided query or 
+      topic based on the sources. 
+      Here is a list of articles: ${state.agentState.searchResults}
+      This is the topic: ${state.agentState.topic}
+      Please return a well-written article based on the provided information.`.replace(
+        /\s+/g,
+        " ",
+      ),
+    ),
+  ]);
+  const content = response.content as string;
+  console.log("article:", content);
+  return {
+    agentState: {
+      ...state.agentState,
+      article: content,
+    },
+  };
+}
+
+async function revise(state: {
+  agentState: AgentState;
+}): Promise<{ agentState: AgentState }> {
+  console.log("revising article");
+  const response = await model().invoke([
+    new SystemMessage(
+      `You are a personal newspaper editor. Your sole purpose is to edit a well-written article about a 
+      topic based on given critique.`.replace(/\s+/g, " "),
+    ),
+    new HumanMessage(
+      `Your task is to edit the article based on the critique given.
+      This is the article: ${state.agentState.article}
+      This is the critique: ${state.agentState.critique}
+      Please return the edited article based on the critique given.
+      You may leave feedback about the critique encoded between <FEEDBACK> tags like this:
+      <FEEDBACK> here goes the feedback ...</FEEDBACK>`.replace(/\s+/g, " "),
+    ),
+  ]);
+  const content = response.content as string;
+  console.log("revised article:", content);
+  return {
+    agentState: {
+      ...state.agentState,
+      article: content,
+    },
+  };
+}
+
+const agentState = {
+  agentState: {
+    value: (x: AgentState, y: AgentState) => y,
+    default: () => ({
+      topic: "",
+    }),
+  },
+};
+
+// Define the function that determines whether to continue or not
+const shouldContinue = (state: { agentState: AgentState }) => {
+  const result = state.agentState.critique === undefined ? "end" : "continue";
+  return result;
+};
+
+const workflow = new StateGraph({
+  channels: agentState,
+});
+
+workflow.addNode("search", new RunnableLambda({ func: search }) as any);
+workflow.addNode("curate", new RunnableLambda({ func: curate }) as any);
+workflow.addNode("write", new RunnableLambda({ func: write }) as any);
+workflow.addNode("critique", new RunnableLambda({ func: critique }) as any);
+workflow.addNode("revise", new RunnableLambda({ func: revise }) as any);
+
+workflow.addEdge("search", "curate");
+workflow.addEdge("curate", "write");
+workflow.addEdge("write", "critique");
+
+// We now add a conditional edge
+workflow.addConditionalEdges(
+  // First, we define the start node. We use `agent`.
+  // This means these are the edges taken after the `agent` node is called.
+  "critique",
+  // Next, we pass in the function that will determine which node is called next.
+  shouldContinue,
+  // Finally we pass in a mapping.
+  // The keys are strings, and the values are other nodes.
+  // END is a special node marking that the graph should finish.
+  // What will happen is we will call `should_continue`, and then the output of that
+  // will be matched against the keys in this mapping.
+  // Based on which one it matches, that node will then be called.
+  {
+    // If `tools`, then we call the tool node.
+    continue: "revise",
+    // Otherwise we finish.
+    end: END,
+  },
+);
+
+workflow.addEdge("revise", "critique");
+
+workflow.setEntryPoint("search");
+const app = workflow.compile();
+
+export async function researchWithLangGraph(topic: string) {
+  const inputs = {
+    agentState: {
+      topic,
+    },
+  };
+  const result = await app.invoke(inputs);
+  const regex = /<FEEDBACK>[\s\S]*?<\/FEEDBACK>/g;
+  const article = result.agentState.article.replace(regex, "");
+  return article;
+}

examples/showcases/presentation/src/app/api/copilotkit/route.ts

@@ -0,0 +1,86 @@
+import { researchWithLangGraph } from "./research";
+import { Action } from "@copilotkit/shared";
+import { NextRequest } from "next/server";
+import {
+  CopilotRuntime,
+  copilotRuntimeNextJSAppRouterEndpoint,
+  OpenAIAdapter,
+} from "@copilotkit/runtime";
+
+const UNSPLASH_ACCESS_KEY_ENV = "UNSPLASH_ACCESS_KEY";
+const UNSPLASH_ACCESS_KEY = process.env[UNSPLASH_ACCESS_KEY_ENV];
+
+const researchAction: Action<any> = {
+  name: "research",
+  description:
+    "Call this function to conduct research on a certain topic. Respect other notes about when to call this function",
+  parameters: [
+    {
+      name: "topic",
+      type: "string",
+      description: "The topic to research. 5 characters or longer.",
+    },
+  ],
+  handler: async ({ topic }) => {
+    console.log("Researching topic: ", topic);
+    return await researchWithLangGraph(topic);
+  },
+};
+
+export const POST = async (req: NextRequest) => {
+  const actions: Action<any>[] = [
+    {
+      name: "getImageUrl",
+      description: "Get an image url for a topic",
+      parameters: [
+        {
+          name: "topic",
+          description: "The topic of the image",
+        },
+      ],
+      handler: async ({ topic }) => {
+        if (UNSPLASH_ACCESS_KEY) {
+          const response = await fetch(
+            `https://api.unsplash.com/search/photos?query=${encodeURIComponent(
+              topic,
+            )}&per_page=10&order_by=relevant&content_filter=high`,
+            {
+              headers: {
+                Authorization: `Client-ID ${UNSPLASH_ACCESS_KEY}`,
+              },
+            },
+          );
+          const data = await response.json();
+          if (data.results && data.results.length > 0) {
+            const randomIndex = Math.floor(Math.random() * data.results.length);
+            return data.results[randomIndex].urls.regular;
+          }
+        }
+        return (
+          'url("https://loremflickr.com/800/600/' +
+          encodeURIComponent(topic) +
+          '")'
+        );
+      },
+    },
+  ];
+
+  if (
+    process.env["TAVILY_API_KEY"] &&
+    process.env["TAVILY_API_KEY"] !== "NONE"
+  ) {
+    actions.push(researchAction);
+  }
+
+  const openaiModel = process.env["OPENAI_MODEL"];
+
+  console.log("ENV.COPILOT_CLOUD_API_KEY", process.env.COPILOT_CLOUD_API_KEY);
+
+  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
+    runtime: new CopilotRuntime({ actions }),
+    serviceAdapter: new OpenAIAdapter({ model: openaiModel }),
+    endpoint: req.nextUrl.pathname,
+  });
+
+  return handleRequest(req);
+};

examples/showcases/presentation/src/app/api/transcribe/route.ts

@@ -0,0 +1,31 @@
+import { OpenAI } from "openai";
+
+// export const runtime = "edge";
+
+const openai = new OpenAI();
+
+export async function POST(req: Request): Promise<Response> {
+  try {
+    const formData = await req.formData();
+    const file = formData.get("file") as File;
+
+    if (!file) {
+      return new Response("File not provided", { status: 400 });
+    }
+
+    const transcription = await openai.audio.transcriptions.create({
+      file,
+      model: "whisper-1",
+    });
+
+    return new Response(JSON.stringify(transcription), {
+      status: 200,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error: any) {
+    return new Response(JSON.stringify({ error: error.message }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+}

examples/showcases/presentation/src/app/api/tts/route.ts

@@ -0,0 +1,22 @@
+import { OpenAI } from "openai";
+
+export const runtime = "edge";
+
+export async function GET(req: Request): Promise<Response> {
+  const openai = new OpenAI();
+
+  const url = new URL(req.url);
+  const text = url.searchParams.get("text"); // 'text' is the query parameter name
+
+  if (!text) {
+    return new Response("Text parameter is missing", { status: 400 });
+  }
+
+  const response = await openai.audio.speech.create({
+    voice: "alloy",
+    input: text,
+    model: "tts-1",
+  });
+
+  return response;
+}

examples/showcases/presentation/src/app/components/buttons/ActionButton.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx";
+
+interface ActionButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  inProgress?: boolean;
+}
+
+export function ActionButton({
+  children,
+  onClick,
+  disabled,
+  inProgress,
+}: ActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled || inProgress}
+      className={clsx(
+        "text-white font-bold w-7 h-7 flex items-center justify-center rounded-md",
+        disabled
+          ? "opacity-50 cursor-not-allowed"
+          : "hover:border hover:border-white",
+        inProgress &&
+          "animate-bounce text-blue-400 cursor-not-allowed hover:border-none",
+      )}
+    >
+      {children}
+    </button>
+  );
+}

examples/showcases/presentation/src/app/components/buttons/AddSlideButton.tsx

@@ -0,0 +1,36 @@
+import { SlideModel } from "@/app/types";
+import { ActionButton } from "./ActionButton";
+import { PlusCircleIcon } from "@heroicons/react/24/outline";
+
+interface AddSlideButtonProps {
+  currentSlideIndex: number;
+  setCurrentSlideIndex: (fn: (i: number) => number) => void;
+  setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
+}
+
+export function AddSlideButton({
+  currentSlideIndex,
+  setCurrentSlideIndex,
+  setSlides,
+}: AddSlideButtonProps) {
+  return (
+    <ActionButton
+      onClick={() => {
+        const newSlide: SlideModel = {
+          content: "",
+          backgroundImageUrl:
+            "https://loremflickr.com/cache/resized/65535_53415810728_d1db6e2660_h_800_600_nofilter.jpg",
+          spokenNarration: "",
+        };
+        setSlides((slides) => [
+          ...slides.slice(0, currentSlideIndex + 1),
+          newSlide,
+          ...slides.slice(currentSlideIndex + 1),
+        ]);
+        setCurrentSlideIndex((i) => i + 1);
+      }}
+    >
+      <PlusCircleIcon className="h-5 w-5" />
+    </ActionButton>
+  );
+}

examples/showcases/presentation/src/app/components/buttons/DeleteSlideButton.tsx

@@ -0,0 +1,33 @@
+import { SlideModel } from "@/app/types";
+import { ActionButton } from "./ActionButton";
+import { TrashIcon } from "@heroicons/react/24/outline";
+
+interface DeleteSlideButtonProps {
+  currentSlideIndex: number;
+  setCurrentSlideIndex: (fn: (i: number) => number) => void;
+  slides: SlideModel[];
+  setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
+}
+
+export function DeleteSlideButton({
+  currentSlideIndex,
+  setCurrentSlideIndex,
+  slides,
+  setSlides,
+}: DeleteSlideButtonProps) {
+  return (
+    <ActionButton
+      disabled={slides.length == 1}
+      onClick={() => {
+        // delete the current slide
+        setSlides((slides) => [
+          ...slides.slice(0, currentSlideIndex),
+          ...slides.slice(currentSlideIndex + 1),
+        ]);
+        setCurrentSlideIndex((i) => 0);
+      }}
+    >
+      <TrashIcon className="h-5 w-5" />
+    </ActionButton>
+  );
+}

examples/showcases/presentation/src/app/components/buttons/GenerateSlideButton.tsx

@@ -0,0 +1,37 @@
+import { CopilotContextParams, CopilotTask } from "@copilotkit/react-core";
+import { useState } from "react";
+import { ActionButton } from "./ActionButton";
+import { SparklesIcon } from "@heroicons/react/24/outline";
+
+interface GenerateSlideButtonProps {
+  context: CopilotContextParams;
+}
+
+export function GenerateSlideButton({ context }: GenerateSlideButtonProps) {
+  const [isGeneratingSlide, setIsGeneratingSlide] = useState(false);
+  return (
+    <ActionButton
+      inProgress={isGeneratingSlide}
+      onClick={async () => {
+        try {
+          let slideContent = prompt("What should the new slide be about?");
+          if (slideContent === null) {
+            return;
+          }
+          setIsGeneratingSlide(true);
+          const generateSlideTask = new CopilotTask({
+            instructions:
+              "Make a new slide given this user input: " +
+              slideContent +
+              "\n DO NOT carry out research",
+          });
+          await generateSlideTask.run(context);
+        } finally {
+          setIsGeneratingSlide(false);
+        }
+      }}
+    >
+      <SparklesIcon className={"h-5 w-5"} />
+    </ActionButton>
+  );
+}

examples/showcases/presentation/src/app/components/buttons/NavButton.tsx

@@ -0,0 +1,25 @@
+import clsx from "clsx";
+
+interface NavButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+export function NavButton({ children, onClick, disabled }: NavButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={clsx(
+        "w-7 h-7 border border-white rounded-md flex justify-center items-center",
+        "focus:outline-none",
+        disabled
+          ? "opacity-40 cursor-not-allowed"
+          : "hover:bg-white hover:text-black",
+      )}
+    >
+      {children}
+    </button>
+  );
+}

examples/showcases/presentation/src/app/components/buttons/PerformResearchSwitch.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+interface PerformResearchSwitchProps {
+  isEnabled: boolean;
+  setIsEnabled: (fn: (b: boolean) => boolean) => void;
+}
+
+export const PerformResearchSwitch = ({
+  isEnabled,
+  setIsEnabled,
+}: PerformResearchSwitchProps) => {
+  return (
+    <label className="flex items-center cursor-pointer pl-4">
+      <div className="relative">
+        <input
+          type="checkbox"
+          className="sr-only"
+          checked={isEnabled}
+          onChange={() => setIsEnabled((b) => !b)}
+        />
+        <div
+          className={`w-10 h-4 ${
+            isEnabled ? "bg-blue-500" : "bg-gray-400"
+          } rounded-full shadow-inner transition-colors`}
+        ></div>
+
+        <div
+          className={`absolute w-6 h-6 bg-white rounded-full shadow -left-1 -top-1 transition-transform ${
+            isEnabled ? "transform translate-x-full" : ""
+          }`}
+        ></div>
+      </div>
+      <span className="text-sm font-normal ml-2">Perform Research?</span>
+    </label>
+  );
+};

examples/showcases/presentation/src/app/components/buttons/SpeakCurrentSlideButton.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { ActionButton } from "./ActionButton";
+import { SpeakerWaveIcon } from "@heroicons/react/24/outline";
+import { resetGlobalAudio, speak } from "@/app/utils/globalAudio";
+
+interface SpeakCurrentSlideButtonProps {
+  spokenNarration: string;
+}
+
+export function SpeakCurrentSlideButton({
+  spokenNarration,
+}: SpeakCurrentSlideButtonProps) {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  return (
+    <ActionButton inProgress={isSpeaking}>
+      <SpeakerWaveIcon
+        className="h-5 w-5"
+        onClick={async () => {
+          resetGlobalAudio();
+          try {
+            setIsSpeaking(true);
+            await speak(spokenNarration);
+          } finally {
+            setIsSpeaking(false);
+          }
+        }}
+      />
+    </ActionButton>
+  );
+}

examples/showcases/presentation/src/app/components/main/Header.tsx

@@ -0,0 +1,88 @@
+import clsx from "clsx";
+import { SlideModel } from "@/app/types";
+import { useMemo } from "react";
+import { useCopilotContext } from "@copilotkit/react-core";
+import { SlideNumberIndicator } from "../misc/SlideNumberIndicator";
+import { GenerateSlideButton } from "../buttons/GenerateSlideButton";
+import { SpeakCurrentSlideButton } from "../buttons/SpeakCurrentSlideButton";
+import { DeleteSlideButton } from "../buttons/DeleteSlideButton";
+import { NavButton } from "../buttons/NavButton";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
+import { PerformResearchSwitch } from "../buttons/PerformResearchSwitch";
+import { AddSlideButton } from "../buttons/AddSlideButton";
+
+interface HeaderProps {
+  currentSlideIndex: number;
+  setCurrentSlideIndex: (fn: (i: number) => number) => void;
+  slides: SlideModel[];
+  setSlides: (fn: (slides: SlideModel[]) => SlideModel[]) => void;
+  performResearch: boolean;
+  setPerformResearch: (fn: (b: boolean) => boolean) => void;
+}
+
+export function Header({
+  currentSlideIndex,
+  setCurrentSlideIndex,
+  slides,
+  setSlides,
+  performResearch,
+  setPerformResearch,
+}: HeaderProps) {
+  const currentSlide = useMemo(
+    () => slides[currentSlideIndex],
+    [slides, currentSlideIndex],
+  );
+
+  /**
+   * We need to get the context here to run a Copilot task for generating a slide
+   **/
+  const context = useCopilotContext();
+
+  return (
+    <header className={clsx("bg-customBlack text-white items-center flex p-4")}>
+      <div className="flex-0 flex space-x-1">
+        {/* Back */}
+        <NavButton
+          disabled={currentSlideIndex == 0}
+          onClick={() => setCurrentSlideIndex((i) => i - 1)}
+        >
+          <ChevronLeftIcon className="h-6 w-6" />
+        </NavButton>
+
+        {/* Forward */}
+        <NavButton
+          disabled={currentSlideIndex == slides.length - 1}
+          onClick={() => setCurrentSlideIndex((i) => i + 1)}
+        >
+          <ChevronRightIcon className="h-6 w-6" />
+        </NavButton>
+
+        {/* Perform Research */}
+        <PerformResearchSwitch
+          isEnabled={performResearch}
+          setIsEnabled={setPerformResearch}
+        />
+      </div>
+
+      <SlideNumberIndicator
+        {...{ currentSlideIndex, totalSlides: slides.length }}
+      />
+
+      <div className="flex-0 flex space-x-1">
+        <AddSlideButton
+          {...{ currentSlideIndex, setCurrentSlideIndex, setSlides }}
+        />
+
+        <GenerateSlideButton context={context} />
+
+        <SpeakCurrentSlideButton
+          spokenNarration={currentSlide.spokenNarration}
+        />
+
+        <DeleteSlideButton
+          {...{ currentSlideIndex, setCurrentSlideIndex, slides, setSlides }}
+        />
+      </div>
+    </header>
+  );
+}

examples/showcases/presentation/src/app/components/main/Presentation.tsx

@@ -0,0 +1,96 @@
+"use client";
+import { useCopilotReadable } from "@copilotkit/react-core";
+import { useCallback, useMemo, useState } from "react";
+import { Slide } from "./Slide";
+import { Header } from "./Header";
+import useAppendSlide from "../../actions/useAppendSlide";
+import { SlideModel } from "@/app/types";
+
+interface PresentationProps {
+  performResearch: boolean;
+  setPerformResearch: (fn: (b: boolean) => boolean) => void;
+}
+
+export const Presentation = ({
+  performResearch,
+  setPerformResearch,
+}: PresentationProps) => {
+  const [slides, setSlides] = useState<SlideModel[]>([
+    {
+      content: "This is the first slide.",
+      backgroundImageUrl:
+        "https://loremflickr.com/cache/resized/65535_53415810728_d1db6e2660_h_800_600_nofilter.jpg",
+      spokenNarration: "This is the first slide. Welcome to our presentation!",
+    },
+  ]);
+  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
+  const currentSlide = useMemo(
+    () => slides[currentSlideIndex],
+    [slides, currentSlideIndex],
+  );
+
+  /**
+   * This makes all slides available to the Copilot.
+   */
+  useCopilotReadable({
+    description: "These are all the slides",
+    value: slides,
+  });
+
+  /**
+   * This makes the current slide available to the Copilot.
+   */
+  useCopilotReadable({
+    description: "This is the current slide",
+    value: currentSlide,
+  });
+
+  /**
+   * This action allows the Copilot to append a new slide to the presentation.
+   */
+  useAppendSlide({
+    setSlides,
+    setCurrentSlideIndex,
+    slides,
+  });
+
+  const updateCurrentSlide = useCallback(
+    (partialSlide: Partial<SlideModel>) => {
+      setSlides((slides) => [
+        ...slides.slice(0, currentSlideIndex),
+        { ...slides[currentSlideIndex], ...partialSlide },
+        ...slides.slice(currentSlideIndex + 1),
+      ]);
+    },
+    [currentSlideIndex, setSlides],
+  );
+
+  return (
+    <div
+      style={{
+        height: `100vh`,
+      }}
+      className="flex flex-col"
+    >
+      <Header
+        currentSlideIndex={currentSlideIndex}
+        setCurrentSlideIndex={setCurrentSlideIndex}
+        slides={slides}
+        setSlides={setSlides}
+        performResearch={performResearch}
+        setPerformResearch={setPerformResearch}
+      />
+      <div
+        className="flex items-center justify-center flex-1"
+        style={{ backgroundColor: "#414247", overflow: "auto" }}
+      >
+        <div
+          className="aspect-ratio-box bg-white flex shadow-2xl"
+          style={{ margin: "5rem", maxHeight: "70vh" }}
+        >
+          <Slide slide={currentSlide} partialUpdateSlide={updateCurrentSlide} />
+        </div>
+      </div>
+    </div>
+  );
+};

examples/showcases/presentation/src/app/components/main/Slide.tsx

@@ -0,0 +1,101 @@
+"use client";
+import useUpdateSlide from "../../actions/useUpdateSlide";
+import { SlideModel } from "@/app/types";
+
+export interface SlideProps {
+  slide: SlideModel;
+  partialUpdateSlide: (partialSlide: Partial<SlideModel>) => void;
+}
+
+export const Slide = (props: SlideProps) => {
+  const backgroundImage = `url("${props.slide.backgroundImageUrl}")`;
+
+  /**
+   * This action allows the Copilot to update the current slide.
+   */
+  useUpdateSlide({ partialUpdateSlide: props.partialUpdateSlide });
+
+  return (
+    <div className="w-full h-full flex flex-row bg-white">
+      <div className="flex-grow h-full flex flex-col" style={{ flex: "2" }}>
+        <SlideContent
+          content={props.slide.content}
+          onChange={(newContent) => {
+            props.partialUpdateSlide({ content: newContent });
+          }}
+        />
+        <SlideSpeakerNotes
+          spokenNarration={props.slide.spokenNarration}
+          onChange={(newSpokenNarration) => {
+            props.partialUpdateSlide({ spokenNarration: newSpokenNarration });
+          }}
+        />
+      </div>
+      <SlideImage backgroundImage={backgroundImage} />
+    </div>
+  );
+};
+
+function SlideImage({ backgroundImage }: { backgroundImage: string }) {
+  return (
+    <div
+      className="flex-grow h-full bg-slate-200"
+      style={{
+        flex: "1",
+        backgroundImage,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    />
+  );
+}
+
+interface SpeakerNotesProps {
+  spokenNarration: string;
+  onChange: (newSpokenNarration: string) => void;
+}
+
+function SlideSpeakerNotes({ spokenNarration, onChange }: SpeakerNotesProps) {
+  return (
+    <div className="bg-gray-200 relative h-20 flex flex-col">
+      <textarea
+        className="w-full h-full bg-transparent p-2 text-base"
+        style={{
+          border: "none",
+          outline: "none",
+          lineHeight: "1.5",
+          resize: "none",
+        }}
+        placeholder="Speaker notes..."
+        value={spokenNarration}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+      />
+    </div>
+  );
+}
+
+interface SlideContentProps {
+  content: string;
+  onChange: (newContent: string) => void;
+}
+
+function SlideContent({ content, onChange }: SlideContentProps) {
+  return (
+    <textarea
+      className="flex-1 w-full text-gray-800 p-4 px-10 font-bold flex items-center line-clamp-6"
+      style={{
+        border: "none",
+        outline: "none",
+        resize: "none",
+        fontSize: "2vw",
+      }}
+      value={content}
+      placeholder="Slide content..."
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+    />
+  );
+}

examples/showcases/presentation/src/app/components/misc/SlideNumberIndicator.tsx

@@ -0,0 +1,36 @@
+interface SlideNumberIndicatorProps {
+  currentSlideIndex: number;
+  totalSlides: number;
+}
+
+export function SlideNumberIndicator({
+  currentSlideIndex,
+  totalSlides,
+}: SlideNumberIndicatorProps) {
+  return (
+    <div className="flex-1 items-center justify-center flex uppercase text-xs font-bold tracking-widest">
+      <span className="mr-3">{SLIDES_ICON}</span>
+      Slide {currentSlideIndex + 1} of {totalSlides}
+    </div>
+  );
+}
+
+const SLIDES_ICON = (
+  <svg
+    width="10px"
+    height="10px"
+    viewBox="0 0 42 42"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+  >
+    <rect x="0" y="0" width="10" height="10" />
+    <rect x="16" y="0" width="10" height="10" />
+    <rect x="32" y="0" width="10" height="10" />
+    <rect x="0" y="16" width="10" height="10" />
+    <rect x="16" y="16" width="10" height="10" />
+    <rect x="32" y="16" width="10" height="10" />
+    <rect x="0" y="32" width="10" height="10" />
+    <rect x="16" y="32" width="10" height="10" />
+    <rect x="32" y="32" width="10" height="10" />
+  </svg>
+);

examples/showcases/presentation/src/app/components/misc/SlidePreview.tsx

@@ -0,0 +1,33 @@
+interface SlidePreviewProps {
+  title?: string;
+  content?: string;
+  spokenNarration?: string;
+  done?: boolean;
+}
+
+export function SlidePreview({
+  content,
+  spokenNarration,
+  done,
+}: SlidePreviewProps) {
+  return (
+    <div className="">
+      <div className=" w-full relative max-w-xs">
+        <div className="absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl" />
+        <div className="relative shadow-xl bg-gray-900 border border-gray-800  px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start">
+          <h1 className="font-bold text-xl text-white mb-4 relative z-50">
+            {done ? "Slide added" : "Adding slide..."}
+          </h1>
+          <p className="font-normal text-base text-slate-500 mb-4 relative z-50 whitespace-pre">
+            {content}
+          </p>
+          {spokenNarration && (
+            <p className="font-normal text-sm text-slate-500 mb-4 relative z-50">
+              &quot;{spokenNarration}&quot;
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

examples/showcases/presentation/src/app/globals.css

@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+:root {
+  --copilot-kit-primary-color: #222222 !important;
+}
+
+.copilotKitHeader {
+  height: 60px;
+  border-left: 1px solid #555;
+}
+
+.copilotKitWindow.open {
+  box-shadow: none;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+.aspect-ratio-box {
+  width: 100%;
+  max-width: calc(100% - 5rem); /* Account for margin */
+  position: relative;
+}
+.aspect-ratio-box::before {
+  content: "";
+  display: block;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio */
+}
+.aspect-ratio-box > * {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

examples/showcases/presentation/src/app/layout.tsx

@@ -0,0 +1,28 @@
+import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import "@copilotkit/react-ui/styles.css";
+import "@copilotkit/react-textarea/styles.css";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#222222",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

examples/showcases/presentation/src/app/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotSidebar } from "@copilotkit/react-ui";
+import "./styles.css";
+import { Presentation } from "./components/main/Presentation";
+import { useState } from "react";
+
+export default function AIPresentation() {
+  const [performResearch, setPerformResearch] = useState(false);
+
+  return (
+    <CopilotKit
+      publicApiKey={process.env.NEXT_PUBLIC_COPILOT_CLOUD_API_KEY}
+      // Alternatively, you can use runtimeUrl to host your own CopilotKit Runtime
+      runtimeUrl="/api/copilotkit"
+      transcribeAudioUrl="/api/transcribe"
+      textToSpeechUrl="/api/tts"
+    >
+      <CopilotSidebar
+        instructions={
+          "Help the user create and edit a powerpoint-style presentation." +
+          (!performResearch
+            ? " No research is needed. Do not perform any research."
+            : " Perform research on the topic.")
+        }
+        defaultOpen={true}
+        labels={{
+          title: "Presentation Copilot",
+          initial:
+            "Hi you! 👋 I can help you create a presentation on any topic.",
+        }}
+        clickOutsideToClose={false}
+      >
+        <Presentation
+          performResearch={performResearch}
+          setPerformResearch={setPerformResearch}
+        />
+      </CopilotSidebar>
+    </CopilotKit>
+  );
+}

examples/showcases/presentation/src/app/styles.css

@@ -0,0 +1,62 @@
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  font-weight: bold;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+.markdown h1 {
+  font-size: 1.5em;
+}
+
+.markdown h2 {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+.markdown h3 {
+  font-size: 1.1em;
+}
+
+.markdown h4 {
+  font-size: 1em;
+}
+
+.markdown h5 {
+  font-size: 0.9em;
+}
+
+.markdown h6 {
+  font-size: 0.8em;
+}
+
+.markdown p {
+  margin-bottom: 1.25em;
+  text-align: left;
+}
+
+.markdown pre {
+  margin-bottom: 1.25em;
+}
+
+.markdown ul {
+  list-style-type: disc;
+  padding-left: 20px;
+  overflow: visible;
+  text-align: left;
+  margin-bottom: 1.25em;
+}
+
+.markdown li {
+  list-style-type: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  padding-left: 0;
+  position: relative;
+  overflow: visible;
+  text-align: left;
+}

examples/showcases/presentation/src/app/types.ts

@@ -0,0 +1,5 @@
+export interface SlideModel {
+  content: string;
+  backgroundImageUrl: string;
+  spokenNarration: string;
+}

examples/showcases/presentation/src/app/utils/globalAudio.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+export let globalAudio: any = undefined;
+
+export function resetGlobalAudio() {
+  if (globalAudio) {
+    globalAudio.pause();
+    globalAudio.currentTime = 0;
+  } else {
+    globalAudio = new Audio();
+  }
+}
+
+export async function speak(text: string) {
+  const encodedText = encodeURIComponent(text);
+  const url = `/api/tts?text=${encodedText}`;
+  globalAudio.src = url;
+  globalAudio.play();
+  await new Promise<void>((resolve) => {
+    globalAudio.onended = function () {
+      resolve();
+    };
+  });
+  await new Promise((resolve) => setTimeout(resolve, 500));
+}