AI との連携

Slidev はマークダウンベースであるため、AI コーディングエージェントと非常に相性が良いです。

MCP Server

Slidev has a built-in ✨ MCP Server that gives any MCP-capable agent structured tools to inspect, edit, reorder, and navigate your slides.

When the dev server is running, point your agent to http://localhost:<port>/__mcp:

# e.g. for Claude Code
claude mcp add --transport http slidev http://localhost:3030/__mcp

Or run a standalone stdio server that operates on the files directly:

slidev mcp slides.md

See ✨ MCP Server for the available tools and configuration.

Skills

Slidev は AI コーディングエージェント向けに公式の スキル を提供しており、プレゼンテーションの作成を支援する際に Slidev の構文、機能、およびベストプラクティスを理解できるようにします。

インストール

AI コーディングエージェントに Slidev スキルをインストールします:

npx skills add slidevjs/slidev

スキルのソースコードはここにあります。

プロンプト例

インストール後、エージェントにさまざまな Slidev タスクの支援を依頼できます:

TypeScript ジェネリクスに関する Slidev プレゼンテーションをコード例付きで作成してください

コード例を左側に、説明を右側に配置した 2 カラムのスライドを追加してください

クリックアニメーションを設定して、箇条書きを 1 つずつ表示させてください

スピーカーノート付きで PDF エクスポート用にプレゼンテーションを設定してください

含まれる内容

Slidev スキルは以下の知識を提供します:

• マークダウン構文、スライド区切り、フロントマター
• クリックアニメーションとトランジション
• コードのハイライト、Monaco エディタ、magic-move
• 図表 (Mermaid、PlantUML) と LaTeX 数式
• 組み込みレイアウトとコンポーネント
• エクスポートとホスティングのオプション

VS Code 拡張

✨ VS Code 拡張機能 は Language Model Tools を提供しており、VS Code の Copilot やその他の AI アシスタントが Slidev プロジェクトと直接対話できるようにします。これらのツールにより、AI は以下のことが可能になります:

• アクティブなスライドとプロジェクトに関する情報の取得
• 特定のスライドの内容の取得
• タイトルによるスライドの一覧表示と検索
• スライド間のナビゲーション

詳しくは ✨ VS Code 拡張機能 をご覧ください。