🤖

自作ライブラリで編集可能なPowerPoint生成AIを作る

に公開
AI
個人開発
PowerPoint
Claude
Mastra
tech

はじめに

先日、PowerPoint を JSON で宣言的に記述するライブラリ pom を紹介しました。

https://zenn.dev/hirokisakabe/articles/d9fa38f21376e2

そこで今回は pom を活用して、編集可能な PowerPoint ファイルを生成してくれる AI エージェントアプリ prompt2pptx を作成してみました。

https://prompt2pptx.vercel.app/

prompt2pptx の機能

一般的なチャット形式の UI で、AI と対話することで、PowerPoint を生成できます。


「TSKaigi についての 2 ページのスライドを作成して」の例



生成された PowerPoint

「2 枚目はオレンジ色を基調にして欲しい」 のように追加で指示することで、ページ単位で PowerPoint を修正することも可能です。

生成された PowerPoint の表やグラフは、PowerPoint ネイティブ（not 図形で描画された表やグラフに似せたもの）です。ダウンロードしたファイルは、表やグラフを含めて PowerPoint アプリで編集することができます。

PowerPoint ネイティブのメリット

昨今、スライドを生成できる様々な AI アプリが登場しています。その中には、PowerPoint 形式をサポートしておらず、AI アプリ上で編集を完結させるアプローチのアプリも多いです。

ただ個人的には、PowerPoint ファイルで社内レビューや知見共有する文化の企業はまだまだ多いと感じています。例えば、社内レビューで「この数字だけ直したい」「表の列を 1 つ足したい」といった修正を、AI を介さず PowerPoint 上で直接行いたいというケースでは PowerPoint ネイティブは重要です。

実装

技術スタック

分野 技術スタック
PowerPoint ツール pom, LibreOffice
AI ツール Mastra, AI SDK, AI Elements
AI モデル Claude, Gemini
フレームワーク Next.js, Hono
データベース IndexedDB(Dexie)

AI エージェント構成

ユーザと対話するメインエージェント（Claude Sonnet 4）が、ツールを介してタスクを実行する構成です。ツールには対応するサブエージェントが存在し、ツール内で呼び出されます。

ツールの一覧

ツール 処理内容 サブエージェントのモデル
PowerPoint 生成ツール PowerPoint データを生成する Claude Opus 4.5
PowerPoint 編集ツール 既存の PowerPoint データを編集する Claude Sonnet 4
レイアウトチェックツール プレビュー画像でレイアウトを確認し、必要に応じて PowerPoint データを修正する Gemini 2.5 Pro

PowerPoint データ定義と.pptx ファイル出力

PowerPoint データ定義と.pptx ファイル出力には、自作の「PowerPoint を JSON で宣言的に記述するライブラリ」pom を利用しています。

https://github.com/hirokisakabe/pom

pom では次のような JSON で PowerPoint のレイアウトを書くことができます。

// 縦方向にテキストを積むだけのシンプルなスライド定義例
const page: POMNode = {
  type: "vstack",
  padding: 40,
  backgroundColor: "0F172A",
  children: [
    {
      type: "text",
      text: "ほげほげ株式会社",
      fontPx: 48,
      color: "FFFFFF",
    },
    {
      type: "text",
      text: "ふがふが事業本部",
      fontPx: 28,
      color: "E2E8F0",
    },
    {
      type: "text",
      text: "Confidential",
      fontPx: 24,
      color: "FDE68A",
    },
  ],
};

事前に AI にシステムプロンプトで pom の仕様を伝えておきます。そして、ユーザの要求に応じて、適切な pom 形式の JSON を出力させます。

基本的にはその pom JSON データをプライマリなデータとしてアプリ内で引き回します。

PowerPoint ファイルのダウンロード時には、pom JSON データをバックエンドに送り、バックエンドにて pom のbuildPptxを呼び出し、.pptx ファイルを作成しフロントエンドに返します。

pom を採用することで、AI による安定したレイアウトの PowerPoint の生成を実現しています。

プレビュー画像生成

prompt2pptx の右ペインには PowerPoint のプレビュー画像が表示されます。

この画像生成は、LibreOffice を利用した別 API サーバを立てて実現しています。
prompt2pptx から PowerPoint ファイルが送られると、サーバは次のように処理して最終的に PNG ファイルを返します。

Claude との比較

資料生成に使えるアプリは様々ありますが、今回作成した prompt2pptx と最も挙動が似ているのは Claude です。

Claude では Anthropic 公式が提供している pptx スキルを介して、PowerPoint ファイルを生成することができます。

内部では PptxGenJS や python-pptx が使われています。

https://github.com/anthropics/skills/tree/main/skills/pptx

比較のため、両者に同じプロンプトで PowerPoint を出力させてみました。

例 1: TypeScript の紹介スライド

プロンプト
初学者に TypeScript を紹介するスライドを 3 ページで作成して

prompt2pptx Claude (Opus 4.5)

例 2: 案件の提案スライド

プロンプト
模擬的な提案資料を作成して欲しい。

受託企業のA社が、ヘルスケア企業のB社に、システム開発の提案を行う想定。
諸々の数値などは、ダミーデータを生成して。
3ページで。
深い青のトンマナで。背景は白で。

prompt2pptx Claude (Opus 4.5)

例 3: 大企業の決算資料スライド

プロンプト
日本の大企業が作るような、情報量が多い決算資料風のスライドを1ページ作成してください。
以下の要件を厳密に守ること：

スタイル
- 全体のトーンは**深い青（#0E0D6A 付近）**を基調
- 日本の大企業資料でよくある「情報詰め込み感」を再現
- レイアウトは細かい枠線やボックスを多用して整理された印象にする

内容（ダミーデータでOK）
- タイトル：2025年度 第3四半期 決算サマリー（ダミー）
- 左側に KPI ボックス（売上高 / 営業利益 / 経常利益 / 当期純利益）
- 右側に前年同期比の棒グラフ
- 下部にハイライト項目（3〜4点）
  例：新規事業の収益寄与、コスト最適化、主要プロダクトの成長　など

表現
- 図・表・テキストを1ページに詰め込む
- 情報過多になってもよい（むしろ歓迎）
- ダミー数値は現実味がある範囲でランダム生成してよい

prompt2pptx Claude (Opus 4.5)

所感

prompt2pptx でも Claude Opus や Sonnet を利用しているためか、出力される内容は似通っているように感じます。

Claude の pptx スキル相当のものであれば、自前実装でも同様のものが作れることがわかりました。

(Claude の方が内部で html 経由で生成しているためかオシャレな感じがしますが...)

おわりに

自作ライブラリ pom を用いて、資料生成 AI prompt2pptx を作成してみました。
pomを用いることで、安定したレイアウトかつ PowerPoint ネイティブな出力ができる AI アプリになりました。

まだまだ追加したい機能があるので、今後も開発を続けたいです！！

Discussion