| 1 | # Work with AI |
| 2 | |
| 3 | Thanks to Slidev being markdown-based, it works great with AI coding agents. |
| 4 | |
| 5 | ## MCP Server |
| 6 | |
| 7 | Slidev has a built-in <LinkInline link="features/mcp" /> that gives any MCP-capable agent structured tools to inspect, edit, reorder, and navigate your slides. |
| 8 | |
| 9 | When the dev server is running, point your agent to `http://localhost:<port>/__mcp`: |
| 10 | |
| 11 | ```bash |
| 12 | # e.g. for Claude Code |
| 13 | claude mcp add --transport http slidev http://localhost:3030/__mcp |
| 14 | ``` |
| 15 | |
| 16 | Or run a standalone stdio server that operates on the files directly: |
| 17 | |
| 18 | ```bash |
| 19 | slidev mcp slides.md |
| 20 | ``` |
| 21 | |
| 22 | See <LinkInline link="features/mcp" /> for the available tools and configuration. |
| 23 | |
| 24 | ## Skills |
| 25 | |
| 26 | Slidev provides official [skills](https://code.claude.com/docs/en/skills) for AI coding agents, enabling them to understand Slidev's syntax, features, and best practices when helping you create presentations. |
| 27 | |
| 28 | ### Installation |
| 29 | |
| 30 | Install the Slidev skill to your AI coding agent: |
| 31 | |
| 32 | ```bash |
| 33 | npx skills add slidevjs/slidev |
| 34 | ``` |
| 35 | |
| 36 | The source code of the skill is [here](https://github.com/slidevjs/slidev/tree/main/skills/slidev). |
| 37 | |
| 38 | ### Example Prompts |
| 39 | |
| 40 | Once installed, you can ask agents to help with various Slidev tasks: |
| 41 | |
| 42 | ``` |
| 43 | Create a Slidev presentation about TypeScript generics with code examples |
| 44 | ``` |
| 45 | |
| 46 | ``` |
| 47 | Add a two-column slide with code on the left and explanation on the right |
| 48 | ``` |
| 49 | |
| 50 | ``` |
| 51 | Set up click animations to reveal bullet points one by one |
| 52 | ``` |
| 53 | |
| 54 | ``` |
| 55 | Configure the presentation for PDF export with speaker notes |
| 56 | ``` |
| 57 | |
| 58 | ### What's Included |
| 59 | |
| 60 | The Slidev skill provides knowledge about: |
| 61 | |
| 62 | - Markdown syntax, slide separators, and frontmatter |
| 63 | - Click animations and transitions |
| 64 | - Code highlighting, Monaco editor, and magic-move |
| 65 | - Diagrams (Mermaid, PlantUML) and LaTeX math |
| 66 | - Built-in layouts and components |
| 67 | - Exporting and hosting options |
| 68 | |
| 69 | ## VS Code Extension |
| 70 | |
| 71 | The <LinkInline link="features/vscode-extension" /> provides Language Model Tools that allow VS Code's Copilot and other AI assistants to interact with your Slidev project directly. These tools enable AI to: |
| 72 | |
| 73 | - Get information about the active slide and project |
| 74 | - Retrieve content of specific slides |
| 75 | - List and search slides by title |
| 76 | - Navigate between slides |
| 77 | |
| 78 | See <LinkInline link="features/vscode-extension#ai-integration" /> for more details. |
| 79 |