Joyride + LM Tools for Copilot

June 18, 2025 ยท View on GitHub

Presenting Joyride with an AI powered presentation system, made with Joyride

Video thumbnail: Copilot hacked my editorCopilot hacked my editor

YouTube: Copilot hacked my editor

A complete AI-powered presentation system built entirely with Joyride - user space scripting for VS Code. The system enables AI-assisted slide creation, narration generation, text-to-speech conversion, and interactive presentation delivery, all within the VS Code environment.

Taking this for a spin is as easy as opening this project in VS Code with Copilot enabled, and installing the Joyride extension. (But please read on a bit before you do this. At least about Running the System)

The audio generation features need an OpenAI API key. But you and Copilot can hack it to use something else for audio generation, because ...

... This project is 100% Joyride - Leveraging VS Code's extension API.

It is also very WIP, and meant to forever be WIP, but your WIP. ๐Ÿ˜€

Quick Start

Core Requirements

  1. GitHub Copilot
  2. Joyride - User space scripting for VS Code
  3. (for text-to-speech generation) OpenAI API Key in your env:
    export OPENAI_API_KEY="your-openai-api-key"
    

Running the System

When you open the project with Joyride installed, the slide navigation system will automatically activate and the Audio Service webview will open.

audio-service-webview

For audio to be played, yuu will need to click the Enable Audio button, because of browser restriction requiring a user gesture to autoplay audio. (You may have to click the button twice, there's some glitch in the vibe coded scripts for audio playback, that I'll fix soon.)

See that button in the stats bar with โ€œ๐ŸŽญโ€? It's a system prompt/mood selector. Select the presenter mood. Then ask Copilot to show the first slide.

With your OpenAI API key set in the environment you can then activate the audio-generator mood, and ask Copilot to generate audio for the first slide. Then switch back to presenter mode and ask Copilot to present the slide.

To navigate the slides yourelf, with the keyboard or a clicker, you'll need to set up some keyboard shortcuts. See the slide navigation script archive/next_slide.cljs, which starts with a bunch of shortcuts you can use in your keybindings.json file. (Use the Toggle Line Comment command to get JSON you can copy.)

Core Features

AI Workflow support

The project comes with Copilot Instructions/moods supporting both VS Code hacking and presentation authoring/presenting.

Easily switch between different system prompts depending on where in the workflow you are using the AI mood status bar button . Available system prompts (in prompts/system/):

Slideshow creation moods and workflow/pipeline

Creating slides is a composition of human direction, AI agentic processing and Joyride scripts. The main pipeline looks something like so

Human has a story to share
     โ†“
๐Ÿค Human + **slide-author** โ†’ Draft slides & notes
     โ†“ (human feedback & iteration)
๐Ÿ“– **story-author** โ†’ Retrofits with storytelling expertise
     โ†“ (human feedback & story refinement)
๐ŸŽ™๏ธ **slide-narration-author** โ†’ Crafts narration scripts
     โ†“ (human feedback & narration polish)
๐Ÿ”Š **audio-generator** โ†’ Generates high-quality voice audio
     โ†“ (human feedback & audio refinement)
โœจ **presenter** (+ human) โ†’ Present slides
       (the human needs to ask for next slides)

It is the human who is responsible for the main orchestration. Including during presentation. A possible improvement you can try to vibe code is to make the AI able to run the whole presentation from start to finish.

The reason for the story authoring step is so that slide narration is grounded in the overall story and can avoid some of the repetition that AI is so happy to produce.

Coding moods

  • architect - For system design and architectural decisions
  • joyride-hacker - For interactive programming and VS Code hacking with Joyride
  • reviewer - Review Joyride code to get suggestions for improvements for code quality and maintainability.

Extra features

An example VS Code hack adding a git history fuzzy search menu:

Project Structure

โ”œโ”€โ”€ slides/                            # Markdown presentation slides
โ”‚   โ”œโ”€โ”€ *.md                           # Individual slides with HTML/CSS
โ”‚   โ”œโ”€โ”€ *-notes.md                     # Presentation guidance for each slide
โ”‚   โ”œโ”€โ”€ voice/                         # Generated audio files
โ”‚   โ”œโ”€โ”€ images/                        # Slide images and assets
โ”‚   โ”œโ”€โ”€ narration-script/              # Detailed narration scripts
โ”‚   โ””โ”€โ”€ opening-sequence/              # Presentation introduction assets
โ”œโ”€โ”€ .joyride/
โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”‚   โ”œโ”€โ”€ next_slide.cljs            # Slide navigation engine
โ”‚   โ”‚   โ”œโ”€โ”€ next_slide_notes.cljs      # Slide notes management
โ”‚   โ”‚   โ”œโ”€โ”€ showtime.cljs              # Status bar timer/stopwatch
โ”‚   โ”‚   โ”œโ”€โ”€ git_history_fuzzy.cljs     # Git history fuzzy search
โ”‚   โ”‚   โ”œโ”€โ”€ ai_mood_selector.cljs      # AI system prompt switcher
โ”‚   โ”‚   โ””โ”€โ”€ ai_presenter/              # AI presentation components
โ”‚   โ”‚       โ”œโ”€โ”€ audio_generation.cljs  # TTS integration
โ”‚   โ”‚       โ”œโ”€โ”€ audio_playback.cljs    # WebView audio player
โ”‚   โ”‚       โ””โ”€โ”€ opening_sequence.cljs  # Presentation introduction
โ”‚   โ”œโ”€โ”€ resources/
โ”‚   โ”‚   โ””โ”€โ”€ audio-service.html         # Audio playback webview
โ”‚   โ””โ”€โ”€ temp-audio/                    # Temporary storage for generated audio
โ”œโ”€โ”€ prompts/                           # AI system prompts
โ”‚   โ”œโ”€โ”€ system/                        # Different AI personality modes
โ”‚   โ”‚   โ”œโ”€โ”€ presenter-instructions.md              # Main presentation mode
โ”‚   โ”‚   โ”œโ”€โ”€ joyride-hacker-instructions.md         # Developer mode
โ”‚   โ”‚   โ”œโ”€โ”€ architect-instructions.md              # System design discussions
โ”‚   โ”‚   โ”œโ”€โ”€ slide-author-instructions.md           # Content creation mode
โ”‚   โ”‚   โ”œโ”€โ”€ slide-narration-author-instructions.md # Script creation
โ”‚   โ”‚   โ”œโ”€โ”€ story-author-instructions.md           # Narrative development
โ”‚   โ”‚   โ”œโ”€โ”€ audio-generator-instructions.md        # Voice synthesis
โ”‚   โ”‚   โ””โ”€โ”€ reviewer-instructions.md               # Code review mode
โ”‚   โ””โ”€โ”€ system-common-*.md                         # Shared prompt components
โ”œโ”€โ”€ docs/
โ”‚   โ”œโ”€โ”€ PROJECT_SUMMARY.md             # Technical overview for LLMs
โ”‚   โ”œโ”€โ”€ images/                        # Documentation images
โ”‚   โ””โ”€โ”€ log/                           # Development logs
โ”œโ”€โ”€ audio/                             # Audio assets
โ”œโ”€โ”€ slides.edn                         # Slide configuration and ordering
โ”œโ”€โ”€ deps.edn                           # Clojure classpath (for tooling)
โ”œโ”€โ”€ package.json                       # Node.js dependencies
โ””โ”€โ”€ next-slide.css                     # Slide styling

Example Usage

Basic Presentation

;; 1. Hide the chat during presentation
(vscode/commands.executeCommand "workbench.action.closeAuxiliaryBar")

;; 2. Show a specific slide
(next-slide/show-slide-by-name!+ "hello.md")

;; 3. Generate and play audio for the slide
(p/let [gen-result (ai-presenter.audio-generation/generate-slide-audio!+
                    "hello" ; slide name (without .md)
                    "Your engaging presentation script here...")]
  (ai-presenter.audio-playback/load-and-play-audio!+ "slides/voice/hello.mp3"))

;; 4. Answer questions during presentation
(ai-presenter.audio-generation/generate-and-play-message!+
 "That's a great question! Here's my answer...")

;; 5. Navigate to next slide when ready
(next-slide/next! true)

AI-Assisted Presentation

Ask Copilot (with LM Tools enabled):

"Present the slide about the LM tools for Joyride, please. I'm especially interested in vibe coding"

The AI will:

  1. Navigate to the slide
  2. Read slide content and notes
  3. Generate a narration script, incorporating your focus
  4. Create audio narration
  5. Play the audio
  6. Wait for your next instruction

(Actually, the AI is instructed such that in this case it should do the authoring and generation steps. But most often it just plays whatever audio is already generated for the slide. Prompting skill issue, I think.)

๐Ÿš€ Extension Ideas

  • Multiple Voices - Different narrators for different slide types
  • Interactive Elements - Audience participation through VS Code commands

๐Ÿ“– Learning Resources

Contributing

This project demonstrates Interactive Programming principles built entirely in Joyride ClojureScript.

For Effective Development

For the most productive experience, both the human and the artificial intelligence should be connected to the Joyride REPL:

Human setup:

  • Install Calva a Clojure extension
  • Command: Calva: Start Joyride REPL and Connect

See calva.io for how to use Calva.

AI setup:

  • With Joyride installed, there is no AI setup.

Development Workflow

  1. Joyride automatically gives
  2. Start the Joyride REPL
  3. Experiment with functions interactively, together with Copilot
  4. Build upon the existing system
  5. Share your enhancements

Both intelligences working together in the same REPL = Interactive Programming magic! โœจ

Happy Interactive Programming! ๐ŸŽ‰

License ๐Ÿป๐Ÿ—ฝ

MIT

You are welcome to show me that you like my work: