npx create-next-app@latest

npm i @copilotkit/backend @copilotkit/shared @langchain/langgraph @copilotkit/react-core 
@copilotkit/react-ui @copilotkit/react-textarea @heroicons/react

"use client";

// Define an interface for the model of a slide, specifying the expected structure of a slide object.
export interface SlideModel {
  title: string;
  content: string;
  backgroundImageDescription: string;
  spokenNarration: string;
}

// Define an interface for the properties of a component or function that manages slides.
export interface SlideProps {
  slide: SlideModel;
  partialUpdateSlide: (partialSlide: Partial<SlideModel>) => void;
}

// Define a functional component named Slide that accepts props of type SlideProps.
export const Slide = (props: SlideProps) => {
    // Define a constant for the height of the area reserved for speaker notes.
    const heightOfSpeakerNotes = 150;

    // Construct a URL for the background image using the description from slide properties, dynamically fetching an image from Unsplash.
    const backgroundImage =
      'url("https://source.unsplash.com/featured/?' +
      encodeURIComponent(props.slide.backgroundImageDescription) +
      '")';

    // Return JSX for the slide component.
    return (
      <>
        {/* Slide content container with dynamic height calculation to account for speaker notes area. */}
        <div 
          className="w-full relative bg-slate-200"
          style={{
            height: `calc(100vh - ${heightOfSpeakerNotes}px)`, // Calculate height to leave space for speaker notes.
          }}
        >
          {/* Container for the slide title with centered alignment and styling. */}
          <div 
            className="h-1/5 flex items-center justify-center text-5xl text-white text-center z-10"
          >
            {/* Textarea for slide title input, allowing dynamic updates. */}
            <textarea
              className="text-2xl bg-transparent text-black p-4 text-center font-bold uppercase italic line-clamp-2 resize-none flex items-center"
              style={{
                border: "none",
                outline: "none",
              }}
              value={props.slide.title}
              placeholder="Title"
              onChange={(e) => {
                props.partialUpdateSlide({ title: e.target.value });
              }}
            />
          </div>

          {/* Container for the slide content with background image. */}
          <div className="h-4/5 flex"
            style={{
              backgroundImage,
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}
          >
            {/* Textarea for slide content input, allowing dynamic updates and styled for readability. */}
            <textarea
              className="w-full text-3xl text-black font-medium p-10 resize-none bg-red mx-40 my-8 rounded-xl text-center"
              style={{
                lineHeight: "1.5",
              }}
              value={props.slide.content}
              placeholder="Body"
              onChange={(e) => {
                props.partialUpdateSlide({ content: e.target.value });
              }}
            />
          </div>
        </div>

        {/* Textarea for entering spoken narration with specified height and styling for consistency. */}
        <textarea
          className=" w-9/12 h-full bg-transparent text-5xl p-10 resize-none bg-gray-500 pr-36"
          style={{
            height: `${heightOfSpeakerNotes}px`,
            background: "none",
            border: "none",
            outline: "none",
            fontFamily: "inherit",
            fontSize: "inherit",
            lineHeight: "inherit",
          }}
          value={props.slide.spokenNarration}
          onChange={(e) => {
            props.partialUpdateSlide({ spokenNarration: e.target.value });
          }}
        />
      </>
    );
  };

"use client";

import { useCallback, useMemo, useState } from "react";
import {
  BackwardIcon,
  ForwardIcon,
  PlusIcon,
  SparklesIcon,
  TrashIcon
} from "@heroicons/react/24/outline";
import { SlideModel, Slide } from "./Slide";

export const ActionButton = ({
  disabled, onClick, className, children,
}: {
  disabled: boolean;
  onClick: () => void;
  className?: string;
  children: React.ReactNode;
}) => {
  return (
    <button
      disabled={disabled}
      className={`bg-blue-500 text-white font-bold py-2 px-4 rounded
      ${disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"}
      ${className}`}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

// Define the Presentation component as a functional component.
export const Presentation = () => {
    // Initialize state for slides with a default first slide and a state to track the current slide index.
    const [slides, setSlides] = useState<SlideModel[]>([
      {
        title: `Welcome to our presentation!`, // Title of the first slide.
        content: 'This is the first slide.', // Content of the first slide.
        backgroundImageDescription: "hello", // Description for background image retrieval.
        spokenNarration: "This is the first slide. Welcome to our presentation!", // Spoken narration text for the first slide.
      },
    ]);
    const [currentSlideIndex, setCurrentSlideIndex] = useState(0); // Current slide index, starting at 0.

    // Use useMemo to memoize the current slide object to avoid unnecessary recalculations.
    const currentSlide = useMemo(() => slides[currentSlideIndex], [slides, currentSlideIndex]);

    // Define a function to update the current slide. This function uses useCallback to memoize itself to prevent unnecessary re-creations.
    const updateCurrentSlide = useCallback(
      (partialSlide: Partial<SlideModel>) => {
        // Update the slides state by creating a new array with the updated current slide.
        setSlides((slides) => [
          ...slides.slice(0, currentSlideIndex), // Copy all slides before the current one.
          { ...slides[currentSlideIndex], ...partialSlide }, // Merge the current slide with the updates.
          ...slides.slice(currentSlideIndex + 1), // Copy all slides after the current one.
        ]);
      },
      [currentSlideIndex, setSlides] // Dependencies for useCallback.
    );

    // The JSX structure for the Presentation component.
    return (
      <div className="relative">
        {/* Render the current slide by passing the currentSlide and updateCurrentSlide function as props. */}
        <Slide slide={currentSlide} partialUpdateSlide={updateCurrentSlide} />

        {/* Container for action buttons located at the top-left corner of the screen. */}
        <div className="absolute top-0 left-0 mt-6 ml-4 z-30">
          {/* Action button to add a new slide. Disabled state is hardcoded to true for demonstration. */}
          <ActionButton
            disabled={true} 
            onClick={() => {
              // Define a new slide object.
              const newSlide: SlideModel = {
                title: "Title",
                content: "Body",
                backgroundImageDescription: "random",
                spokenNarration: "The speaker's notes for this slide.",
              };
              // Update the slides array to include the new slide.
              setSlides((slides) => [
                ...slides.slice(0, currentSlideIndex + 1),
                newSlide,
                ...slides.slice(currentSlideIndex + 1),
              ]);
              // Move to the new slide by updating the currentSlideIndex.
              setCurrentSlideIndex((i) => i + 1);
            }}
            className="rounded-r-none"
          >
            <PlusIcon className="h-6 w-6" /> {/* Icon for the button. */}
          </ActionButton>

          {/* Another action button, currently disabled and without functionality. */}
          <ActionButton
            disabled={true} 
            onClick={async () => { }} // Placeholder async function.
            className="rounded-l-none ml-[1px]"
          >
            <SparklesIcon className="h-6 w-6" /> {/* Icon for the button. */}
          </ActionButton>
        </div>

        {/* Container for action buttons at the top-right corner for deleting slides, etc. */}
        <div className="absolute top-0 right-0 mt-6 mr-24">
          <ActionButton
            disabled={slides.length === 1} // Disable button if there's only one slide.
            onClick={() => {}} // Placeholder function for the button action.
            className="ml-5 rounded-r-none"
          >
            <TrashIcon className="h-6 w-6" /> {/* Icon for the button. */}
          </ActionButton>
        </div>

        {/* Display current slide number and total slides at the bottom-right corner. */}
        <div
          className="absolute bottom-0 right-0 mb-20 mx-24 text-xl"
          style={{
            textShadow: "1px 1px 0 #ddd, -1px -1px 0 #ddd, 1px -1px 0 #ddd, -1px 1px 0 #ddd",
          }}
        >
          Slide {currentSlideIndex + 1} of {slides.length} {/* Current slide and total slides. */}
        </div>

        {/* Container for navigation buttons (previous and next) at the bottom-right corner. */}
        <div className="absolute bottom-0 right-0 mb-6 mx-24">
          {/* Button to navigate to the previous slide. */}
          <ActionButton
            className="rounded-r-none"
            disabled={
              currentSlideIndex === 0 ||
              true} // Example condition to disable button; 'true' is just for demonstration.
            onClick={() => {
              setCurrentSlideIndex((i) => i - 1); // Update currentSlideIndex to move to the previous slide.
            }}
          >
            <BackwardIcon className="h-6 w-6" /> {/* Icon for the button. */}
          </ActionButton>
          {/* Button to navigate to the next slide. */}
          <ActionButton
            className="mr-[1px] rounded-l-none"
            disabled={
              true ||
              currentSlideIndex + 1 === slides.length} // Example condition to disable button; 'true' is just for demonstration.
            onClick={async () => {
              setCurrentSlideIndex((i) => i + 1); // Update currentSlideIndex to move to the next slide.
            }}
          >
            <ForwardIcon className="h-6 w-6" /> {/* Icon for the button. */}
          </ActionButton>
        </div>
      </div>
    );
  };

"use client";

import "./style.css";
import { Presentation } from "./components/Presentation";

export default function AIPresentation() {
  return (
    <Presentation  />
  );
}

OPENAI_API_KEY="Your ChatGPT API key"
TAVILY_API_KEY="Your Tavily Search API key"

import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit.
import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research.
import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata.

// Define a runtime environment variable, indicating the environment where the code is expected to run.
export const runtime = "edge";

// Define an annotated function for research. This object includes metadata and an implementation for the function.
const researchAction: AnnotatedFunction<any> = {
  name: "research", // Function name.
  description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description.
  argumentAnnotations: [ // Annotations for arguments that the function accepts.
    {
      name: "topic", // Argument name.
      type: "string", // Argument type.
      description: "The topic to research. 5 characters or longer.", // Argument description.
      required: true, // Indicates that the argument is required.
    },
  ],
  implementation: async (topic) => { // The actual function implementation.
    console.log("Researching topic: ", topic); // Log the research topic.
    return await researchWithLangGraph(topic); // Call the research function and return its result.
  },
};

// Define an asynchronous function that handles POST requests.
export async function POST(req: Request): Promise<Response> {
  const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions.

  // Check if a specific environment variable is set, indicating access to certain functionality.
  if (process.env["TAVILY_API_KEY"]) {
    actions.push(researchAction); // Add the research action to the actions array if the condition is true.
  }

  // Instantiate CopilotBackend with the actions defined above.
  const copilotKit = new CopilotBackend({
    actions: actions,
  });

  // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter.
  return copilotKit.response(req, new OpenAIAdapter());
}

import { useMakeCopilotActionable } from "@copilotkit/react-core";

useMakeCopilotActionable({
        // Defines the action name. This is a unique identifier for the action within the application.
        name: "updateSlide",
        // Describes what the action does. In this case, it updates the current slide.
        description: "Update the current slide.",
        // Details the arguments that the action accepts. Each argument has a name, type, description, and a flag indicating if it's required.
        argumentAnnotations: [
        {
            name: "title", // The argument name.
            type: "string", // The data type of the argument.
            description: "The title of the slide. Should be a few words long.", // Description of the argument.
            required: true, // Indicates that this argument must be provided for the action to execute.
        },
        {
            name: "content",
            type: "string",
            description: "The content of the slide. Should generally consists of a few bullet points.",
            required: true,
        },
        {
            name: "backgroundImageDescription",
            type: "string",
            description: "What to display in the background of the slide. For example, 'dog', 'house', etc.",
            required: true,
        },
        {
            name: "spokenNarration",
            type: "string",
            description: "The spoken narration for the slide. This is what the user will hear when the slide is shown.",
            required: true,
        },
        ],
        // The implementation of the action. This is a function that will be called when the action is executed.
        implementation: async (title, content, backgroundImageDescription, spokenNarration) => {
        // Calls a function passed in through props to partially update the slide with new values for the specified properties.
        props.partialUpdateSlide({
            title,
            content,
            backgroundImageDescription,
            spokenNarration,
        });
        },
    }, [props.partialUpdateSlide]); // Dependencies array for the custom hook or function. This ensures that the action is re-initialized only when `props.partialUpdateSlide` changes.

import { useCopilotContext } from "@copilotkit/react-core";
import { CopilotTask } from "@copilotkit/react-core";
import {
  useMakeCopilotActionable,
  useMakeCopilotReadable
} from "@copilotkit/react-core";

useMakeCopilotReadable("These are all the slides: " + JSON.stringify(slides));
  useMakeCopilotReadable(
    "This is the current slide: " + JSON.stringify(currentSlide)
  );

useMakeCopilotActionable(
        {
          // Defines the action's metadata.
          name: "appendSlide", // Action identifier.
          description: "Add a slide after all the existing slides. Call this function multiple times to add multiple slides.",
          // Specifies the arguments that the action takes, including their types, descriptions, and if they are required.
          argumentAnnotations: [
            {
              name: "title", // The title of the new slide.
              type: "string",
              description: "The title of the slide. Should be a few words long.",
              required: true,
            },
            {
              name: "content", // The main content or body of the new slide.
              type: "string",
              description: "The content of the slide. Should generally consist of a few bullet points.",
              required: true,
            },
            {
              name: "backgroundImageDescription", // Description for fetching or generating the background image of the new slide.
              type: "string",
              description: "What to display in the background of the slide. For example, 'dog', 'house', etc.",
              required: true,
            },
            {
              name: "spokenNarration", // Narration text that will be read aloud during the presentation of the slide.
              type: "string",
              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.",
              required: true,
            },
          ],
          // The function to execute when the action is triggered. It creates a new slide with the provided details and appends it to the existing slides array.
          implementation: async (title, content, backgroundImageDescription, spokenNarration) => {
            const newSlide: SlideModel = { // Constructs the new slide object.
              title,
              content,
              backgroundImageDescription,
              spokenNarration,
            };

            // Updates the slides state by appending the new slide to the end of the current slides array.
            setSlides((slides) => [...slides, newSlide]);
          },
        },
        [setSlides] // Dependency array for the hook. This action is dependent on the `setSlides` function, ensuring it reinitializes if `setSlides` changes.
      );

const context = useCopilotContext();

const generateSlideTask = new CopilotTask({
   instructions: "Make the next slide related to the overall topic of the presentation. It will be inserted after the current slide. Do NOT carry any research",
});

const [generateSlideTaskRunning, **setGenerateSlideTaskRunning**] = useState(false);

// The JSX structure for the Presentation component.
    return (
        <div className="relative">
        {/* Renders the current slide using a Slide component with props for the slide data and a method to update it. */}
        <Slide slide={currentSlide} partialUpdateSlide={updateCurrentSlide} />

        {/* Container for action buttons positioned at the top left corner of the relative parent */}
        <div className="absolute top-0 left-0 mt-6 ml-4 z-30">
            {/* ActionButton to add a new slide. It is disabled when a generateSlideTask is running to prevent concurrent modifications. */}
            <ActionButton
            disabled={generateSlideTaskRunning}
            onClick={() => {
                const newSlide: SlideModel = {
                title: "Title",
                content: "Body",
                backgroundImageDescription: "random",
                spokenNarration: "The speaker's notes for this slide.",
                };
                // Inserts the new slide immediately after the current slide and updates the slide index to point to the new slide.
                setSlides((slides) => [
                ...slides.slice(0, currentSlideIndex + 1),
                newSlide,
                ...slides.slice(currentSlideIndex + 1),
                ]);
                setCurrentSlideIndex((i) => i + 1);
            }}
            className="rounded-r-none"
            >
            <PlusIcon className="h-6 w-6" />
            </ActionButton>

            {/* ActionButton to generate a new slide based on the current context, also disabled during task running. */}
            <ActionButton
            disabled={generateSlideTaskRunning}
            onClick={async () => { 
                setGenerateSlideTaskRunning(true); // Indicates the task is starting.
                await generateSlideTask.run(context); // Executes the task with the current context.
                setGenerateSlideTaskRunning(false); // Resets the flag when the task is complete.
            }}
            className="rounded-l-none ml-[1px]"
            >
            <SparklesIcon className="h-6 w-6" />
            </ActionButton>
        </div>

        {/* Container for action buttons at the top right, including deleting the current slide and potentially other actions. */}
        <div className="absolute top-0 right-0 mt-6 mr-24">
            {/* ActionButton for deleting the current slide, disabled if a task is running or only one slide remains. */}
            <ActionButton
            disabled={generateSlideTaskRunning || slides.length === 1}
            onClick={() => {
                console.log("delete slide");
                // Removes the current slide and resets the index to the beginning as a simple handling strategy.
                setSlides((slides) => [
                ...slides.slice(0, currentSlideIndex),
                ...slides.slice(currentSlideIndex + 1),
                ]);
                setCurrentSlideIndex((i) => 0);
            }}
            className="ml-5 rounded-r-none"
            >
            <TrashIcon className="h-6 w-6" />
            </ActionButton>
        </div>

        {/* Display showing the current slide index and the total number of slides. */}
        <div
            className="absolute bottom-0 right-0 mb-20 mx-24 text-xl"
            style={{
            textShadow: "1px 1px 0 #ddd, -1px -1px 0 #ddd, 1px -1px 0 #ddd, -1px 1px 0 #ddd",
            }}
        >
            Slide {currentSlideIndex + 1} of {slides.length}
        </div>

        {/* Navigation buttons to move between slides, disabled based on the slide index or if a task is running. */}
        <div className="absolute bottom-0 right-0 mb-6 mx-24">
            {/* Button to move to the previous slide, disabled if on the first slide or a task is running. */}
            <ActionButton
            className="rounded-r-none"
            disabled={generateSlideTaskRunning || currentSlideIndex === 0}
            onClick={() => {
                setCurrentSlideIndex((i) => i - 1);
            }}
            >
            <BackwardIcon className="h-6 w-6" />
            </ActionButton>
            {/* Button to move to the next slide, disabled if on the last slide or a task is running. */}
            <ActionButton
            className="mr-[1px] rounded-l-none"
            disabled={generateSlideTaskRunning || currentSlideIndex + 1 === slides.length}
            onClick={async () => {
                setCurrentSlideIndex((i) => i + 1);
            }}
            >
            <ForwardIcon className="h-6 w-6" />
            </ActionButton>
        </div>
        </div>
    );

import {
  CopilotKit,
} from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-textarea/styles.css";

export default function AIPresentation() {

  return (
    <CopilotKit url="/api/copilotkit/">
      <CopilotSidebar
        instructions="Help the user create and edit a powerpoint-style presentation. IMPORTANT NOTE: SOMETIMES you may want to research a topic, before taking further action. BUT FIRST ASK THE USER if they would like you to research it. If they answer 'no', do your best WITHOUT researching the topic first."
        defaultOpen={true}
        labels={{
          title: "Presentation Copilot",
          initial:
            "Hi you! 👋 I can help you create a presentation on any topic.",
        }}
        clickOutsideToClose={false}
      >
        <Presentation  />
      </CopilotSidebar>
    </CopilotKit>
  );
}