CopilotKit/demo-presentation-voice

https://presentation-demo-mu.vercel.app

This is a demo that showcases building a PowerPoint-like web app powered by CopilotKit - with the experimental voice driven UX. For the standard non-voice example app, see https://github.com/CopilotKit/presentation-demo .

Run the live demo

Want to see CopilotKit in action? Click the button below to try the live demo.

Deploy with Vercel

To deploy with Vercel, click the button below:

How to Build: a Text-to-PowerPoint Application with CopilotKit

Learn how to create a powerful Text-to-PowerPoint application using CopilotKit. This tutorial will guide you through the process step-by-step.

Tutorial: How to Build: a Text-to-PowerPoint Application with CopilotKit

Getting Started

1. install the needed package:

npm i

2. Set the required environment variables:

copy .env.local.example to .env.local and populate the required environment variables.

⚠️ Important: Not all users have access to the GPT-4 model yet. If you don't have access, you can use GPT-3 by setting OPENAI_MODEL to gpt-3.5-turbo in the .env.local file.

If you want online research to work, you only need a tavily API key, which you can obtain here: https://tavily.com/

3. Run the app

npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Voice Capabilities

Have a look at app/page.tsx to see how the voice capabilities are configured.

  <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"
  >

Zoom in on the CopilotKit code

1. Search for useMakeCopilotReadable to see where frontend application information is being made accessible to the Copilot engine

2. Search for useAppendSlide and useUpdateSlide to see where the frontend application action is made accessible to the Copilot engine.

3. In route.ts, see how the backend-running researchAction is defined against the research.ts agent, powered by LangChain's LangGraph and by Tavily research API.

Learn More

To learn more about CopilotKit, take a look at the following resources:

• CopilotKit Documentation - learn about CopilotKit features and API.
• GitHub - Check out the CopilotKit GitHub repository.
• Discord - Join the CopilotKit Discord community.

Contact

atai <at> copilotkit.ai