Python で実装する Slidev オンライン PPT 生成 MCP サーバー

本チュートリアルのコード

はじめに

2022年12月にChatGPTが登場して以来、AI技術の進歩を目の当たりにし、同時に非常に重要な問題について考えさせられました：

どうすればAIを活用して労働時間を削減し、作業効率を向上させられるのか？

自然言語のみで対話するWeb版の大規模モデルでは、明らかに能力に限界があります。まさにこの時、AI Agent技術が大規模モデルを基盤として、上記の問題に対するより多くの可能性を示しました。

PPTの作成は、エンジニアであれ学者であれ、誰もが自分の仕事を報告し、考えを発表するために必要な一般的な作業です。そこで、皆さんはこんなことを考えたことはありませんか：どうすればPPTの内容にのみ集中し、AIにスタイルや文字サイズなど内容に関係ない部分（いわゆる単純作業）を任せられるのか？

Web版の大規模モデルだけでは明らかに能力不足です。なぜなら、Web版の大規模モデルはテキストしか出力できないからです。市場にはGamma、WPS AI、MindShowなど多くのAI PPT製品がありますが、これらの製品は十分に普及しておらず、一定の操作ハードルがユーザーと優れた機能の間の「最後の1キロ」を阻んでいます。しかし今、完全に自然言語のみで対話できる大規模モデルが登場したことで、新たな可能性を生み出せるのではないでしょうか？

答えは「イエス」です。この記事では、Slidev PPTの開発を支援するMCPを開発し、OpenMCPを利用して機能モジュールの検証とテストを行う方法をデモンストレーションします。テストが完了したMCPを任意のMCPクライアントにプラグインとしてロードすれば、アウトラインに基づいて自動的にWeb上で閲覧可能なオンラインPPTを作成するAI Agentになります。

環境準備

この記事を進めるには、以下の開発環境を準備する必要があります：

• Python 3.10以上
• Node.js 18.0.0以上
• VSCode、Trae、またはCursor
• OpenMCPプラグインのインストール

本記事のコードは以下にあります：https://github.com/LSTM-Kirigaya/slidev-mcp

Slidevとは

Slidevは、開発者向けに設計されたモダンで、MarkdownとVue.jsを基盤とするオープンソースのスライド作成ツールです。シンプルなテキスト構文を使用して、高度にカスタマイズ可能でインタラクティブなプレゼンテーションを作成することを目的としています。以降の内容を始める前に、まずSlidevを実際に触って基本的なイメージを掴んでおきましょう。そうすることで、後ほどPPTを自動生成するインテリジェントエージェントを構築する際のロジックがより明確になります。

超簡単なWeb PPTを始める

まずコマンドラインを開き、Slidevをインストールします：

npm i -g @slidev/cli

インストールが完了したら、最初のSlidev PPTを作成します。ここではSlidev公式サイトの例を使用し、demo.mdを作成し、以下の内容を記入します：

# タイトル

こんにちは、**Slidev**！

---

# スライド2

コードブロックを使用してコードをハイライト：

```ts
console.log('Hello, World!')
```

次に、Slidevを起動して効果を確認します。コマンドラインで以下を入力：

slidev demo.md

このコマンドは、demo.mdをSlidevスライドのエントリファイルとしてコンパイルおよびレンダリングを実行します。実行が完了すると、コマンドラインに以下のようなメッセージが表示されます：

  public slide show   > http://localhost:3030/

この時、http://localhost:3030/をコピーし、ブラウザを開いてアドレスバーに貼り付け、Enterキーを押すと、レンダリングされたPPTが表示されます：

左下隅にカーソルを移動すると、隠れたツールバーが表示され、テーマカラーの切り替え、全画面表示、グリッドビューの確認ができます。左右の方向キーを押すと、異なるスライドに切り替わります。

トランジションアニメーションの追加

上記の例からもわかるように、Slidevは---区切り文字を使用して異なるページを定義します。---は新しいページを開始することを意味し、LaTeXの\newpageに似ています。

実際、---に加えて、Slidevはfrontmatterも区切り文字としてサポートしています。例えば：

---
value1: key1
value2: key2
---

ここでは、frontmatterと呼ばれる特殊な構文単位を使用して、現在のスライドのプロパティを定義しました。Slidevは多くの組み込みプロパティを提供しており、例えばtransition: slide-leftを設定して、このPPTページの入場アニメーションを設定できます。

---
transition: slide-left
---
# タイトル

こんにちは、**Slidev**！

---
transition: slide-left
---

# スライド2

コードブロックを使用してコードをハイライト：

```ts
console.log('Hello, World!')
```

効果は以下の通り：

これ以外にも、Slidevは様々なスタイルやfrontmatterを指定する必要がある多くの機能と特性を提供しています。これらはすべて公式ドキュメントで確認できます。

ここまで読んで、離脱したくなる気持ちはよくわかります。でも待ってください！私もSlidevの使用が非常に面倒だと思うからこそ、この記事を書いています。上記に挙げた例は、Slidevの使用方法を教えるためではなく、実際に体験することで、読者にSlidevの使用が簡単ではないことを理解してもらい、SlidevのAgent開発の論理的「正当性」を創出するためのものです。

Slidev MCPの作成

Slidevの作成は本当に面倒

先ほどのデモで、シンプルなMarkdownを使用すれば、簡潔でエレガントなPPTを作成できることがわかりました。しかし、Slidevは習得のハードルが高く、中長編のPPTの作成が煩雑で、作成者の負担が大きいなどの理由から、この技術は十分に普及していません。

もし実際に上記の手順を試し、公式ドキュメントにアクセスして大量の面倒なHTMLを見て、諦めたいと思ったなら、私がやろうとしていることを理解できるはずです。

大規模モデルで直接Slidevを生成する

正式に始める前に、疑問に思う方もいるでしょう：Slidevも純粋なテキストなのに、なぜ大規模モデルに直接生成させないのか？その理由は以下の通りです：

1. Slidevは特殊なMarkdown構文を使用しており、大規模モデルはこれらの構文単位を認識しないため、生成効果が悪くなります。
2. Slidevは---を使用して複数ページのPPTを定義します。大規模モデルに毎回各ページのPPTを再生成させると、効率が低下するだけでなく、生成範囲が広がるため、大規模モデルが間違える確率も高まります。

興味のある読者は、この記事の終わりに同じ問題を大規模モデルに入力して効果をテストしてみてください。大規模モデルを直接使用するだけでは問題を解決できないため、このプロセスを最適化するためにAgentを作成する必要があります。

Slidev Agentの作成

さて、PPTを自動的に作成するSlidev Agentの作成を始めましょう。AI AgentとMCPの基礎知識が不足している方は、以下の私のブログを強くお勧めします：

1. AI Agentの3大コアコンポーネントと現在の不足点
2. Agent時代のインフラストラクチャ｜MCPプロトコルの紹介

ステップ1：基本的なAgentスキルの確定

AI Agentを作成する最初のステップは、Agentがどのような基本的なスキルを持つかを確定することです。

私たち自身のSlidev開発経験に基づくと、以下の基本的なスキル（またはステップ）をまとめることができます：

• Node.jsとSlidev CLIがインストールされているかの確認（ない場合は自動インストール）
• 新しいSlidevプロジェクトの作成（ユーザー入力からタイトルと作者情報を取得）
• 既存のSlidevプロジェクトの読み込み
• 表紙ページの作成/更新（カスタムテンプレートと背景画像のサポート）
• 新しいスライドページの追加（多种レイアウトとコンテンツ形式のサポート）
• 既存のスライドコンテンツの変更
• 特定のスライドコンテンツの取得

ステップ2：基本スキルの実現

Agentの基本スキルは、mcpツールを使用して実現します。VSCode或其他のコードエディタを開き、まず上記のスキルのPython実装を完成させます。

ここでは、現在のSlidev PPTの状態（例えば、現在何ページあるか、各ページの内容など）を保存するためにグローバル変数を使用することに注意してください。

ここでは、Slidevに関する知識に基づいて対応するツールを作成する必要があります。例えば、通常のSlidevページのコードは以下のようになります：

---
layout: default
transition: slide-left
---

## Hello World !

そして、ユーザーの負担を軽減するために、すべてのトランジションアニメーションtransitionをslide-leftに指定し、レイアウトlayoutはAI自身に決定させることにしました。このような需求パターンを確定したと仮定すると、上記の例に対応するPythonの文字列テンプレートは以下のようになります：

template = f"""
---
layout: {layout}
transition: slide-left
---

{content}
"""

其中，layoutはdefault、contentは## Hello World !です。もちろん、これらのインターフェースはすべて大規模モデル用に予約されており、大規模モデルが生成を支援します。

したがって、PPTページを追加するmcpツールは以下のように作成できます：

@mcp.tool(
    description='新しいページを追加します。'
)
def add_page(content: str, layout: str = "default") -> SlidevResult:
    global SLIDEV_CONTENT
    
    if not ACTIVE_SLIDEV_PROJECT:
        return SlidevResult(False, "アクティブなSlidevプロジェクトがありません。まず作成または読み込んでください。")
    
    template = f"""
---
layout: {layout}
transition: slide-left
---

{content}

""".strip()

    SLIDEV_CONTENT.append(template)
    page_index = len(SLIDEV_CONTENT) - 1
    save_slidev_content()
    
    return SlidevResult(True, f"ページがインデックス {page_index} に追加されました", page_index)

ここで簡単なヒントをいくつか紹介します。これらのインターフェースを設定するには、いくつかの基本原則があります：

1. 関数のパラメータとして複雑なデータ構造を設定しないようにし、パラメータは文字列または数字にすることが最適です。
2. 入力されるパラメータが大規模モデルがほぼ確実に知っているものであることを確認する必要があります。例えば、上記ではSlidevのレイアウト文字とテキスト内容を入力します。テキスト内容はコンテキストに基づいて生成されたMarkdownであり、大規模モデルが知っていると考えられます。以下のmcpツールは反例です：

   # 誤った例：大規模モデルは最新のWindowsアクティベーションコードを知らない
   @mcp.tool(description='Windowsをアクティベートします')
   def activate_windows(activation_code: str):
       winapi.activate(activation_code)

上記の基本ロジックを知った後、最終的なコードを作成できます。完全なコードは https://github.com/LSTM-Kirigaya/slidev-mcp/blob/main/tutorial/step1.py にあります。

ステップ3：MCPツールフローのテスト

作成したmcpツールにエラーがなく、基本的な効果を達成できるかどうかをテストするために、MCPに対して2段階の基本的なテストを行う必要があります。

最初のテストは基本的なツールテストで、mcpツールに実行時エラーがあるかどうかを検出することを目的としています。まず、VSCodeアプリケーションストアをクリックし、openmcpを検索します：

ダウンロードをクリックし、先ほど作成したPythonファイルに入り、右上のopenmcpアイコンをクリックしてopenmcpデバッグエディタに入ります。初期化時には基本的なガイドインターフェースが表示されるので、注意深く完了してください。

エディタに入った後、まず大規模モデルのAPIを設定します。ここではDeepSeekのAPIを使用し、APIトークンを入力して保存をクリックします。APIトークンを持っていない方は、DeepSeekオープンプラットフォームに登録して取得できます。新規ユーザーにはデフォルトで20元のクレジットが付与されます。DeepSeek APIトークンを取得したら、トークンをopenmcpの大規模モデル設定欄に入力し、保存をクリックします。

もう一度テストをクリックすると、以下の結果が表示されれば、大規模モデルが直接使用できる状態です：

次に、最上部の「空白テスト」をクリックし、画面中央の「ツール」をクリックすると、定義したすべてのmcpツールが表示されます。ツールに実行時の問題があるかどうかを素早くテストするために、「ツールモジュール」の右側にある「ツール自己検査」をクリックすると、設定されたスケジュール順序を示すウィンドウがポップアップ表示されます。

ここで注意すべき点は、作成したmcpツールには通常一定のスケジュール順序が存在するということです。例えば、私たちが開発したslidev-mcpでは、大規模モデルはまずcreate_slidevまたはload_slidevを呼び出してから后续の操作を実行する必要があります。デフォルトで生成されるスケジュールグラフでは、この順序は正しいですが、読者が将来開発する他のMCPでは、mcpツールの順序が正しく配置されていない可能性があります。この時は、トポロジ構造を手動で調整する必要があります。この部分の使用方法については、openmcp 0.1.9のビデオ解説を参照してください：https://www.bilibili.com/video/BV1YpGHzcEs4

準備が整ったら、上部の「自己検査プログラムを開始」をクリックし、「確定」をクリックします。しばらく待つと、openmcpがすべてのツールの検査を自動的に完了し、以下のようにすべてがsuccessと表示される結果が表示されればテスト成功です：

このステップは、MCP開発の初期段階で非常に有用であり、インタラクティブテスト中の問題による時間の浪費の可能性を効果的に減らすことができます。

ステップ4：MCPのインタラクティブテスト

自己検査プログラムが完了すると、mcpツールに問題がないことがわかります。この時点で、「インタラクティブテスト」で、大規模モデルに接続した私たちのmcpが組み立てたAgentの効果をテストできます！

新しい空白テストを作成し、「インタラクティブテスト」を選択すると、見慣れたダイアログボックスが表示されます。このダイアログボックスは、通常使用する大規模モデルと変わりません。この機能を通じて、mcpをインストールすることなく、開発したagentの効果をテストできます。

ダイアログボックスに、事前に準備したスピーチのアウトラインを貼り付けます：

任意の長いテキストを大規模モデルに直接投げて、このようなアウトラインを生成させることができます。ここでは、WebサイトリンクをMarkdown

Contributors

LSTM-Kirigaya (锦恢)

Changelog

Last edited 8 minutes ago

View full history

1f3d85d-完成 seo 优化，所有页面