LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Maki-HamarukiLab(Maki Sunwood AI Labs.)

今日からはじめる！OpenAI Codex CLIを使ったGradio MCPのgMalフルオート開発

Last updated at Posted at 2025-05-15

はじめに

前回の記事「Gradio MCP as a Language (gMaL): 自然言語からMCPサーバーを生成する新手法」では、自然言語による指示書からGradioベースのMCP（Model Context Protocol）サーバーを自動生成する手法について紹介しました。今回は、その実践編として、OpenAI Codex CLIを使って実際にgMaLベースのアプリケーションをフルオートで開発する方法を解説します。

この組み合わせにより、簡単な自然言語の指示だけで、Web UIとMCP SSEエンドポイントの両方を備えたアプリケーションを数分で構築できるようになります。AIツール開発の新時代が、まさに私たちの手元に到達しています！

OpenAI Codex CLIとは

OpenAI Codex CLIは、ターミナル上で動作する軽量なコーディングエージェントです。開発者が普段使っているターミナル環境でChatGPTレベルの推論と、コードを実行し、ファイルを操作し、イテレーションする能力を組み合わせたツールとなっています。

主な特徴：

  • ゼロセットアップ - OpenAI APIキーを用意するだけで動作します
  • フルオート承認 - ネットワーク無効化とディレクトリサンドボックス化による安全性確保
  • マルチモーダル - スクリーンショットや図表を渡して機能実装が可能✨
  • 完全オープンソース - 開発過程を確認し貢献することができます

Gradio MCP as a Language (gMaL)の概要

gMaL (Gradio MCP as a Language)は、自然言語による指示書からGradioベースのMCPサーバーを自動実装する開発手法です。開発者は自然言語で記述した要件から、機能的なMCPサーバーを直接生成できます。

Gradioとの統合により、各APIエンドポイントは自動的にMCPツールに変換され、対応する名前、説明、入力スキーマを持ちます。最もシンプルな例として、mcp_server=Trueを.launch()に追加するだけでMCPサーバー機能が有効になります。

セットアップ手順

開発環境の準備

本記事で紹介する手法は、以下の環境で動作確認を行っています：

  • Ubuntu 22.04.5 LTS
  • Node.js v20.19.0
  • uv 0.6.10 (Pythonパッケージマネージャ)
  • Python 3.12.8

簡単セットアップ: CodeXInstaller.shの活用

Ubuntu/WSL環境では、Sunwood-ai-labsが提供する「CodeXInstaller.sh」スクリプトを使って開発環境を一括セットアップできます。このスクリプトは必要なツールやライブラリを自動的にインストールし、Codex CLIの実行環境を整えてくれます。

# インストーラーのダウンロードと実行
curl -sSL https://raw.githubusercontent.com/Sunwood-ai-labs/MysticLibrary/main/prompts/coding/codex/CodeXInstaller.sh -o CodeXInstaller.sh
chmod +x CodeXInstaller.sh
./CodeXInstaller.sh

このスクリプトは以下のセットアップを自動的に行います：

  • Node.jsとnpmのインストール
  • OpenAI Codex CLIのインストール
  • 必要な依存関係の設定
  • 環境変数の設定サポート
  • Pythonの仮想環境設定

一度このスクリプトを実行しておけば、以降はCodex CLIをすぐに使い始めることができます。

テンプレートリポジトリの活用

開発をさらに効率化するために、Sunwood-ai-labsが提供するテンプレートリポジトリを使用することをお勧めします：

# テンプレートリポジトリのクローン
git clone https://github.com/Sunwood-ai-labs/gradio-mcp-codex-template.git my-gradio-mcp-app
cd my-gradio-mcp-app

# 仮想環境のセットアップ（uvを使用）
uv venv
source .venv/bin/activate
uv pip install -r requirements.txt

このテンプレートリポジトリには、以下の利点があります：

  • GitHubからHugging Face Spacesへの自動デプロイが設定済み
  • 必要なディレクトリ構造とファイルが用意されている
  • 最小限の修正でカスタマイズ可能

Codex CLIとcodex-rules.mdの活用

Codex CLIでは、プロジェクト内にcodex-rules.mdファイルを配置し、プロンプト内で参照することでシステムプロンプトとして使用することができます。codex-rules.mdは特別なフラグで指定するのではなく、プロンプト内で直接参照することで効果を発揮します。

Sunwood-ai-labsが提供するcodex-rules.mdは、「Claude Hands」プロジェクトの日本語プロンプト（prompt.ja.md）を参考に作成されています。このプロンプトはタスク管理と系統的な問題解決アプローチに重点を置いており、AIがより構造的に作業を進めるよう設計されています。

codex-rules.mdの主な特徴は以下の通りです：

# タスク管理
・ユーザから依頼された際、ユーザは何を求めているのかよく考え、これからやるべきことをtodo.mdにマークダウン形式に書き起こす   
・タスクとサブタスクの数は依頼内容によって判断してください   

# 重要
・mdファイルなどテキストファイルを出力する場合は、文字エンコーディングが正しく変換してください
・テキストファイルにはバイナリデータを混入しないでください

~~~
例
# 〇〇タスク
## タスク名１
- [ ] サブタスク１
- [ ] サブタスク２
- [ ] サブタスク３
・そのタスクリストに沿ってタスクを実行してください、終わったタスクは
- [x] タスク　のようにtodo.mdを更新すること
~~~

・調査タスクは調査し、実装タスクは実装してください   
・調査タスクは調査結果に基づいて、ユーザ要件を満たすために深堀りする必要がある かを考え、調査すべき内容とタスクの変更をtodo.mdに更新すること   
・更新されたタスクに基づいて続けて実施してください

このルールファイルをプロジェクトに配置し、Codexを実行する際のプロンプトで「codex-rules.mdを参照して...」のように指示することで、Codexの振る舞いをカスタマイズできます。このアプローチにより、AIは単にコードを生成するだけでなく、タスクを体系的に分解し、問題を段階的に解決するようになります。

フルオート開発の実践

テンプレートリポジトリとcodex-rules.mdを使って、実際にアプリケーションを開発してみましょう：

# クローンしたディレクトリ内で
codex -a --full-auto -m o3 "codex-rules.md を参照して、gMaL.md を参考にして、app.py で色々なパターンのおみくじアプリ Gradio MCPを作成して"

このコマンドにより、Codexは以下の処理を行います：

  1. プロジェクト内のcodex-rules.mdを読み込んでタスク管理方法を理解
  2. todo.mdファイルを作成してタスクを分解
  3. app.pyを含む必要なファイルの生成・更新
  4. 依存関係の管理
  5. 実際のコードの実行とテスト

実際に使用されているコマンド例：

codex -a --full-auto -m o3 "gMaL.md を参考にして、app.py で色々なパターンのおみくじアプリ Gradio MCPを作成して"

このコマンドを実行すると、Codexはプロジェクト内のgMaL.mdを参照して、指示に基づいたアプリケーションを生成します。

実装例：おみくじアプリ

Codex CLIがgMaLベースプロンプトから自動生成したおみくじアプリのコードは、以下のリンクから確認できます：

このアプリは4つのタイプのおみくじ機能を提供し、それぞれがMCPツールとして利用可能です。クローンしたリポジトリをベースにすることで、GitHub Actionsの設定も含め、ほとんど変更なしでカスタムアプリケーションを構築できます。

Hugging Face Spacesへの自動デプロイ

テンプレートリポジトリの大きな利点は、GitHub ActionsによるHugging Face Spacesへの自動デプロイが設定済みであることです。以下の手順でセットアップできます：

  1. GitHubリポジトリのSecrets and variables > Actions設定からHF_TOKENを追加
  2. .github/workflows/sync-to-hf.ymlの設定を自分のユーザー名とリポジトリ名に更新
# .github/workflows/sync-to-hf.yml 内の部分を変更
git fetch https://MakiAi:$HF_TOKEN@huggingface.co/spaces/MakiAi/gradio-mcp-template main || true
git push --force https://MakiAi:$HF_TOKEN@huggingface.co/spaces/MakiAi/gradio-mcp-template main

# 変更後
git fetch https://YOUR-USERNAME:$HF_TOKEN@huggingface.co/spaces/YOUR-USERNAME/YOUR-REPO-NAME main || true
git push --force https://YOUR-USERNAME:$HF_TOKEN@huggingface.co/spaces/YOUR-USERNAME/YOUR-REPO-NAME main

これだけで、mainブランチへのプッシュ時に自動的にHugging Face Spacesへデプロイされるようになります。デプロイされたアプリは以下のURLでアクセス可能です：

https://YOUR-USERNAME-YOUR-REPOSITORY.hf.space/gradio_api/mcp/sse

Codex CLIとgMaLを組み合わせる利点

  1. 開発速度の飛躍的向上

    • 自然言語による指示だけでコード生成から実行まで自動化
    • タスク管理も含めた体系的な開発プロセス

  2. テンプレートによる効率化

    • クローンするだけで必要な設定が整う
    • GitHub Actions連携が最初から設定済み

  3. デュアルインターフェースの自動生成

    • Web UIとMCP APIの両方を一度に開発
    • 人間ユーザーとAIエージェントの両方にアクセス可能なサービス

  4. イテレーションの容易さ

    • 要件変更があれば、todo.mdを更新して追加開発
    • Codexのフルオートモードでコードの修正も自動化

まとめ

OpenAI Codex CLIとgMaL、そしてテンプレートリポジトリを組み合わせることで、AIツール開発のプロセスが劇的に簡素化されます。自然言語による指示だけで機能的なGradio MCPアプリケーションを開発し、LLMに新しい能力を提供できるようになりました。

参考資料

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?