Open Slide：AIエージェントにReactスライドを書かせるオープンソース基盤

open-slideは、AIコーディングエージェント向けにゼロから設計されたオープンソースのスライド制作フレームワークです。単なるHTMLやMarkdownではなく、Claude CodeやCodex CLI、Cursorといった使い慣れたエージェントに直接Reactコンポーネントとしてスライドコードを書かせることができます。

各スライドは1920 × 1080の固定キャンバス上で動作します。ブラウザ上でプレゼンの概要を指示するだけで、エージェントが1ページずつコードを書き上げ、画面上で即座にホットリロード表示されます。

できること

open-slideの大きな特徴は、コード生成とブラウザ上の視覚的な操作が直結している点です。

スライド上でAキーを押すとエージェント用の連携パネルが開き、Cキーを押せば要素の選択やドラッグ領域へのコメント付けが行えます。コメントはソースコード内に注記として記録され、エージェントが一度の修正作業ですべて反映してくれます。

AIに任せるだけでなく、ドラッグやリサイズ、ガイド線吸着、インライン文字編集に対応したビジュアルエディタも備わっています。

さらに1500以上のブランドロゴを収録したsvglライブラリやGoogle Fontsが組み込まれており、技術系スライドで頻出する各種ツールのロゴを探し回る手間がありません。

発表者ノートやタイマー付きのプレゼンター画面、ページ遷移エフェクトを完備し、成果物は静的HTML、PDF、PPTX形式で書き出せます。VercelやCloudflare Pagesへのワンクリックデプロイにも対応しています。

動かし方

本プロジェクトはMITライセンスで公開されています。Node環境があれば、ターミナルで npx @open-slide/cli init my-deck を実行するだけで初期化できます。

初回起動時にローカル環境へSDKが組み込まれ、すでに利用しているClaude CodeやCodex CLIの認証をそのまま利用するため、独自のAPIキー設定は不要です。

なぜ重要か

既存のAIスライド生成サービスの多くは、決められたテンプレートの出力にとどまり、細かなデザイン修正が困難でした。open-slideはスライドを通常のReact資産として扱い、開発者がすでに日常的に使っているコーディングエージェントの能力をそのまま引き出しています。

エンジニア向けの勉強会発表や製品デモなど、コードベースで思い通りにスライドを管理したい人にとって、今すぐ試す価値のある実践的なツールです。