Cursor SDK × PptxGenJSで作るプレゼン資料生成エージェント

KyotoLT 第34回の発表資料です。

Transcript

1. Cursor SDK × PptxGenJSで作る プレゼン資料生成 エージェント Alakai — AIでPowerPoint資料を作成するWebアプリ 株式会社シーズ　中井 惇葵 X (Twitter) / @quail0323
2. 自己紹介 2 / 11 株式会社シーズ システム開発事業部 中井 惇葵 Nakai Atsuki X (Twitter) / @quail0323 仕事 Webアプリのサーバーサイド開発 (PHP, TypeScript, Python) 活動 2023 Japan AWS Jr. Champions 好きな AWSサービス AWS CloudFormation AWS Amplify
3. 課題 ─ 資料作成、ここが大変 • 構成をゼロから考える ─ 何を話すか決める • 文言・図表をスライドに落とし込む • 見た目・余白・配色の微調整 • 最終的なPPTX出力・共有 場面 つらさ 初回の構成 手が止まる 内容の肉付け 時間がかかる デザイン調整 繰り返し 形式変換 手間 内容整理 × 見やすさ ─ 両方そろえるのが大変 3 / 11
4. Alakai とは テーマを入れると、 AIがPowerPoint資料を作る Webアプリ 入力 AI生成 確認 PPTX AIが自動でやる • 全体の構成案を作成 • 各スライドの文案を生成 • プレビューを生成 • PPTXファイルを出力 テーマ入力 → AI生成 → プレビュー確認 → 修正 → PPTX出力までを支援 4 / 11 人が調整する • テーマ・目的・要点を入力 • レイアウト・トーンを決定 • プレビューで確認・修正指示
5. PptxGenJS ─ スライドファイル生成 編集可能な PPTX・細かなレイアウト制御・コード修正のしやすさが選定理由 5 / 11 技術的な特徴 • コードからPPTXを生成 • 図形・表・画像をプログラムで配置 • レイアウトを細かく制御 • AI生成コードと相性が良い なんのため？ ─ JavaScriptでPowerPointファイル (PPTX) をプログラムから生成する Alakaiでの役割 • Cursor SDKが生成したJSコードを実行する • テキスト・図形・表・画像を組み立てる • 編集可能なPPTXファイルを生成する 「実行エンジン」─ コードを実ファイルに変換
6. Cursor SDK ─ AI生成の中核 なんのため？ ─ AIエージェントとして、資料の構成・文案・実行コードを生成する Alakaiでの役割 • ユーザーの入力を AIに渡す窓口 • 資料構成・各スライド文案を考える • スライド生成用の JSコードを出力 • 修正指示で内容を更新し直す 入力 › 構成 › 文案 › コード 技術的な特徴 • Agent APIで対話型に生成 • 応答をストリーミング表示 • SkillsやMCPをそのまま利用可能 • コード編集に強い Cursor SDK ＝ 入力からコードまで。 PPTX化は PptxGenJS が担当 6 / 11
7. システム構成 役割ベースで見る全体構成と技術スタック Cursor SDK 構成・文案・JSコードを生成 → ストリーミングレスポンス PptxGenJS & LibreOffice 生成JSを実行してPPTX → PDF 7 / 11 フロントエンド ブラウザ Next.js テーマ・目的・要点を入力 ▼ Cursor SDK 構成・文案・JSコードを生成 ▼ Lambda PptxGenJS & LibreOffice PPTXを生成・PDFに変換 ▼ データ AppSync / DynamoDB / S3 成果物を保存 バックエンド
8. デモ 8 / 11
9. このアプリの価値 発表資料の初稿をすばやく生成 1 初動が速い 構成案が数分で出る 2 対話で直せる 修正指示で何度でも改善 3 PPTXで渡せる PowerPointでそのまま編集 なぜ嬉しいか • 構成・文案・スライド化までをまとめて進められる • PDFプレビューで確認しながら、すぐに修正できる • PPTXとして出力できるので、 PowerPointでそのまま仕上げられる 9 / 11
10. 今後の展望 スキル・テンプレ スキルやテンプレの活用 Anthropic公式pptxスキル 社内テンプレ対応 入力の拡張 より豊かな資料作成へ 画像を添付して生成 過去資料・ナレッジ参照 品質チェック 見た目の安心を自動化 はみ出し検出 枚数・分量の調整 より「使いやすく・安心して使える」資料作成へ 10 / 11
11. まとめ 1 PptxGenJSで編集可能な PPTXを生成 2 Cursor SDKで構成・文案・コードを生成 3 生成からプレビュー、修正、出力までを Web上で完結 ご清聴ありがとうございました 質問は @quail0323 へ