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>
);
}