Codex-CLI導入・活用ガイド(Azure OpenAI対応)

はじめに

こんにちは。Givery AIラボ所属AIエンジニアの楊(ヨウ)です。

4月17日にOpenAIが発表したCodex-CLIは、自律的なプログラミング開発支援機能により大きな注目を集めました。私自身もいち早くこのツールを導入し、さまざまな場面でCodex-CLIの活用方法を模索してみました。

このブログでは、Codex-CLIの導入から実際の活用までの流れや、その過程で直面した課題について、詳しくご紹介します。皆さまの参考になれば幸いです。

なお、本ブログの内容ではCodex-CLIのソースコードの解説には触れていません。ソースコードにご興味のある方は、ぜひ下記の記事とCodex-CLIの公式GitHubリポジトリをご参照ください。

https://zenn.dev/givery_ai_lab/articles/796b6bf0edbdd6

https://github.com/openai/codex?tab=readme-ov-file

現時点でCodex-CLIはオープンソースかつ実験的なプロジェクトであり、今後も頻繁にアップデートされることが予想されます。本ブログは2025年4月25日時点のCodex-CLI公式GitHubリポジトリをもとに執筆しています。そのため、今後のアップデートによって内容が異なる場合があります。あらかじめご了承ください。

Codex-CLIとは

Codex-CLIは、OpenAI社が開発した軽量なオープンソースのAIコーディングエージェントであり、ターミナル上で動作し、自然言語による対話形式で操作できます。

ユーザーのターミナル上で動作するため、Codex-CLIはローカルファイルを直接操作できます。これにより、修正提案から「vibe coding」に至るまで、さまざまな面でプログラミング開発支援をしてくれます。

vibe codingとは？

出典：Andrejのツイータ

There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It's possible because the LLMs (e.g. Cursor Composer w Sonnet) are getting too good. Also I just talk to Composer with SuperWhisper so I barely even touch the keyboard. I ask for the dumbest things like "decrease the padding on the sidebar by half" because I'm too lazy to find it. I "Accept All" always, I don't read the diffs anymore. When I get error messages I just copy paste them in with no comment, usually that fixes it. The code grows beyond my usual comprehension, I'd have to really read through it for a while. Sometimes the LLMs can't fix a bug so I just work around it or ask for random changes until it goes away. It's not too bad for throwaway weekend projects, but still quite amusing. I'm building a project or webapp, but it's not really coding - I just see stuff, say stuff, run stuff, and copy paste stuff, and it mostly works.

Vibe codingとは、LLMの力を借りて「感覚に完全に身を委ね、指数関数的な進化を受け入れ、コードの存在すら忘れてしまう」ようなコーディングのやり方です。

本記事の文脈においては、「自然言語でコーディングする」と理解していただければと思います。

スタート（Codex-CLIコードベースを分析）

まずは一例として、Codex-CLIに自分のローカルコードベースについて簡単に説明してもらうことを試してみます。

ターミナルで次のコマンドを入力して実行します。

codex -m o4-mini "explain the codebase codex-cli/ in 2-3 sentences" 

-mパラメータは、OpenAIのo4-miniモデルを推論モデルとして利用することを意味します。
引用符""内の内容はモデルに入力するユーザープロンプトであり、codex-cli/はCodex-CLIのローカルディレクトリを指しています。

入力すると、モデルが以下のコマンドを実行しながら推論を行いました。

ls -R codex-cli
sed -n '1,200p' codex-cli/README.md
ls -1
ls -1 codex-cli
sed -n '1,200p' README.md
sed -n '1,200p' codex-cli/bin/codex.js
ls -1 codex-cli/src
sed -n '1,200p' codex-cli/src/cli.tsx

Codex-CLIは推論プロセスにおいてターミナル上でコマンドを実行し、ローカルのコードベース内のファイル内容を確認しました。推論全体にはおよそ1分半かかり、最終的に以下のような回答が得られました。

The codex‑cli/ directory is a standalone, TypeScript‑based Node.js CLI package
(published as @openai/codex) that turns the OpenAI API into an interactive,
Ink/React‑powered REPL for “chat‑driven” development.
Under the hood it implements a multi‑step agent loop (in src/utils/agent)
with configurable approval policies and sandboxed shell execution,
applies patch‑based file edits under Git control,
and is bundled via build.mjs into dist/cli.js with a bin shim,
alongside tests, examples, and a Dockerfile for end‑to‑end sandboxed runs.

GPT-4.1による翻訳：
codex‑cli/ ディレクトリは、TypeScriptで作られた独立型のNode.js CLIパッケージ（@openai/codexとして公開）であり、OpenAI APIを対話型で操作できるInk/ReactベースのREPL（対話型実行環境）に変換します。これにより、「チャット駆動型」の開発が可能になります。内部的には、設定可能な承認ポリシーとサンドボックス化されたシェル実行を備えた複数ステップのエージェントループ（src/utils/agent内で実装）を持ち、Git管理下でパッチ方式によるファイル編集を行います。また、build.mjsによってdist/cli.jsにバンドルされ、binシム（実行用スクリプト）も付属しています。さらに、テストやサンプル、エンドツーエンドのサンドボックス実行用のDockerfileも同梱されています。

2～3文という制限があるため、回答はやや物足りなく感じられましたが、いかがでしょうか。

上記の例からも分かるように、Codex-CLIの使用において、ユーザーはターミナル上で自然言語を使って「やりたいこと」を説明するだけで済みます。たとえば、コードベースの機能を分析したい、使い方を知りたい、あるいはどのような機能やUIデザインを持つソフトウェアを実装したい、といった要望を伝えることができます（もちろん、言葉で正確に伝えるのは簡単ではありませんが）。すると、Codex-CLIが自律的にローカルファイルを閲覧・修正・作成し、ユーザーの要望を実現してくれます。

Codex-CLIの導入方法(MacOS + Azure OpenAI)

これから、MacOSでCodex-CLIを導入し、Azure OpenAIを通じてモデルを呼び出す方法をステップバイステップで解説していきます。

1. システム要件

まず、Codex-CLIを導入するためのシステム要件は以下の通りです。

Requirement	Details
Operating systems	macOS 12+, Ubuntu 20.04+/Debian 10+, or Windows 11 via WSL2
Node.js	22 or newer (LTS recommended)
Git(optional)	2.23+ for built-in PR helpers
RAM	4-GB minimum (8-GB recommended)

Tips：

• Codex-CLIは公式にmacOSおよびLinuxをサポートしており、Windowsでの利用は実験的なサポートとなっており、WSL（Windows Subsystem for Linux）の利用が必要です。
• Node.jsは公式サイトから直接ダウンロードしてインストールできます。

2. Codex-CLIのダウンロードとインストール

システム要件を整えたら、Codex-CLIをダウンロードしてインストールします。なお、公式GitHubレポジトリで公開されているバージョンでは、モデルの呼び出しはOpenAI API経由のみサポートされています。そのため、ここではOpenAI API経由の場合とAzure OpenAI API経由の場合に分けて、それぞれの手順を説明します。

公式バージョンでのAzure OpenAI APIのサポートについては、今後のバージョンで更新される可能性が高いため、今後のアップデートにご期待ください。

OpenAI API経由

Codex-CLIは公式にOpenAI API経由でのモデル呼び出しをサポートしているため、公式リポジトリのREADME.mdに従ってダウンロード・インストールすることで利用できます。

ターミナルで次のコマンドを入力して実行してください。

npm install -g @openai/codex

Tips：
npm install -gコマンドを実行する際、権限に関するエラーが発生することがあります。
この場合、sudo npm install -gのように管理者権限で実行するのは推奨されません。なぜなら、

• システムファイルの上書き
• セキュリティリスクの増加
• 権限の混乱
• アンインストールやクリーンアップが困難になる

といったリスクがあるためです。

そのため、npmのグローバルディレクトリをローカルユーザー用に移す方法がおすすめです。例えばzshユーザーの場合、以下のコマンドを実行してください。

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=$HOME/.npm-global/bin:$PATH' >> ~/.zshrc
source ~/.zshrc

このように設定することで、権限に関するエラーが発生しなくなります。

Azure OpenAI API経由

Microsoft Azureのユーザー数、特に企業レベルのユーザーが非常に多いため、Azure OpenAI経由のモデル呼び出しが求められています。Codex-CLIがオープンソースであることを活かして、コミュニティが公式バージョンを改良し、Azure OpenAIでも利用できるCodex-CLIを提供しています。
https://github.com/thegovind/codex/tree/gk/azure-openai

具体的な導入手順は、以下の操作を実行してください。
まず、GitHubのリポジトリをローカル環境にクローンします。

git clone https://github.com/thegovind/codex.git

クローンした後、該当するブランチに切り替えます。

git checkout gk/azure-openai

Code-cliパッケージのディレクトリに移動します。

cd codex-cli

corepackを有効にします。

corepack enable

依存パッケージをインストールし、ビルドをします。

pnpm install
pnpm build

グローバルなシンボリックリンクを作成します。

pnpm link

シンボリックリンクpnpm linkを作成しない場合は、毎回Codex-CLIを呼び出したい際にプロジェクトディレクトリ内でnode ./dist/cli.js <arg>というコマンドを実行する必要があります。シンボリックリンクを作成しておけば、どこでもcodex <arg>コマンドで簡単にCodex-CLIを呼び出せるようになるので便利です。

以上で、両方のAPI経由のバージョンのCodex-CLIがダウンロードおよびインストールされ、ターミナルでcodex <arg>コマンドを実行して呼び出せるようになりました。ただし、現時点でこのコマンドを実行すると「OpenAI API keyがミスしている」と表示されます。これは、OpenAIの大規模言語モデル(LLM)を利用するために必要な認証情報をまだ設定していないためです。

3. OpenAI API(Azure OpenAI API) keyの設定

Codex-CLIのコア機能はOpenAIが提供するLLMによって実現されているため、モデルを利用するには認証情報の設定が必要です。バージョンに対応する認証情報を環境変数として設定するだけで利用できます。

OpenAI API経由

以下のコマンドを実行して、ご自身のAPIキーでOpenAI API keyという環境変数を設定してください。

export OPENAI_API_KEY="your-api-key-here"

Azure OpenAI API経由

Azure OpenAI経由のバージョンは、2種類の認証方法が用意されています。

• Entra IDで認証

ターミナルで「Azure CLI」を使ってAzureアカウントにログインします。

az login

必要な認証情報を環境変数として設定します。

export AZURE_OPENAI_ENDPOINT="your-azure-openai-endpoint-here"
export AZURE_OPENAI_API_VERSION="your-azure-openai-api-version-here"
export AZURE_OPENAI_DEPLOYMENT="your-deployment-name"

Azureの場合、環境変数OPENAI_API_KEYが未設定（unset）であることを確認してください！

• APIキーで認証

必要な認証情報を環境変数として設定します。

export AZURE_OPENAI_ENDPOINT="your-azure-openai-endpoint-here"
export AZURE_OPENAI_API_VERSION="your-azure-openai-api-version-here"
export AZURE_OPENAI_DEPLOYMENT="your-deployment-name"
export AZURE_OPENAI_API_KEY="your-azure-openai-api-key"

Azure OpenAI経由のバージョンを利用する場合は、事前にAzure AI Foundryでモデル（例：o3やo4-mini）をデプロイしておく必要があります。ここでの注意点は、AZURE_OPENAI_DEPLOYMENTにはモデルそのものの名前ではなく、デプロイした名前を設定することです。

これで、Codex-CLIの導入が無事に完了し、ターミナルでcodex <arg>コマンドを実行して利用できるようになりました。

codexコマンド

ターミナルでcodex --helpコマンドを実行すると、codexコマンドの詳しい使い方が表示されます。

Usage
    $ codex [options] <prompt>.    #codexを呼び出すためのコマンド
    $ codex completion <bash|zsh|fish>　　#シェル（ターミナル）用の自動補完スクリプトを生成

Options
    -h, --help                      ヘルプを表示
    -m, --model <model>             補完に使用するモデル（デフォルト: o4-mini）
    -i, --image <path>              入力として含める画像ファイルのパス
    -v, --view <rollout>            セッションを開始する代わりに、以前保存したロールアウトを確認する
    -q, --quiet                     アシスタントの最終出力のみを表示する非対話モード
    -c, --config                    エディタでインストラクションファイルを開く
    -w, --writable-root <path>      'full-auto'モードでサンドボックス用に書き込み可能なフォルダ（複数指定可）
    -a, --approval-mode <mode>      承認モードの切り替え：`suggest`、`auto-edit`、`full-auto`

    --auto-edit                     `auto-edit`モードに切り替え：ファイルの編集は自動的に承認するが、コマンドには承認を求める
    --full-auto                     `full-auto`モードに切り替え：サンドボックス内で実行される編集やコマンドは自動的に承認する

    --no-project-doc                リポジトリの「codex.md」を自動的に含めない
    --project-doc <file>            <file> にある追加のMarkdownファイルをコンテキストとして含める
    --full-stdout                   コマンドの出力（stdout/stderr）を省略せず、すべて表示する。
    --notify                        応答時にデスクトップ通知を有効にする

    --flex-mode                     リクエストの処理モードとして「flex-mode」を使用する（o3およびo4-miniモデルでのみ対応）

その中でよく使われるいくつかのオプションを解説します。

codex

codexコマンドを実行して、チャットインターフェースを起動します。

codex

入力すると、以下のチャットインターフェースが表示され、自由にプロンプトを入力できるようになります。

codex "<prompt>"

ユーザーはcodexコマンドを呼び出す際に、直接プロンプトを入力することも可能です。

codex “explain the codebase”

入力すると、チャットインターフェースが表示され、パラメータのプロンプトが自動的に入力されます

-m / --model <model>

オプション-mでCodex-CLIが呼び出すモデルを指定します。指定しない場合はデフォルトでo4-miniになります。なお、Azure OpenAI経由のバージョンでは、ここにはモデル名ではなくデプロイ名を入力する必要がある点にご注意してください

codex -m o3

実行すると、Codex-CLIの後続処理ではo3モデルが使用されます

-i / --image <path>

オプション-iを使うと、画像ファイルのパスを指定してCodex-CLIに画像情報を入力できます（マルチモーダル推論に対応）

codex -i ./figure_1.jpg

注意点として、-iオプションを付けずに画像のパスを入力することもできますが、その場合、Codex-CLIは画像の内容を解析しません。その違いは下図を参考にしてください。

codex ./figure_1.jpgを実行した際の回答

GPT-4.1による翻訳：
画像ファイル「figure.jpg」について、どのようにお手伝いしましょうか？
たとえば、以下のような対応が可能です：

• 画像内のテキストを抽出して翻訳する
• 画像の内容を説明する
• 特定の部分について注釈や説明を加える
• 画像を別の形式に変換したり、サイズを変更する
• レポートやコードに画像を組み込む方法を提案する

ご希望の作業内容を具体的に教えてください。

codex -i ./figure_1.jpgを実行した際の回答

GPT-4.1による翻訳：
「figure.jpg」は、ウルトラマンが必殺技「スペシウム光線」を放つポーズ（腕をクロスさせてエネルギー光線を発射する姿）をとっている画像なのですね。ウルトラマンは、日本の特撮ヒーロー「ウルトラシリーズ」の代表的なキャラクターです。

-a / --approval mode <mode>

Codex-CLIが行うローカル操作に対する認証方法は、オプション-aで次の3つの承認モードから設定できます。デフォルトはsuggestionモードです。

• suggest: ファイルの編集やコマンドの実行時に承認を求めます
• auto-edit: ファイルの編集は自動的に承認しますが、コマンドには承認を求めます
• full-auto: サンドボックス内で実行される編集やコマンドは自動的に承認します

イメージとして、Codex-CLIがリスクを伴うローカル操作（ファイルの編集やコマンドの実行）を行う際、上記の各モードに応じて、下の画面でユーザーの意思確認が求められます。

ユーザーはyと入力してCodex-CLIにコマンドを実行させることも、eと入力して自分でCodex-CLIが行うコマンドを編集することも、escと入力してCodex-CLIのコマンド実行を停止することもできます。

使用例

これから、いくつかの簡単な例を使って、Codex-CLIでどんなことができるのかを直感的に体験していただきます。

ヘビゲーム

普段からゲームに興味があるため、まずはCodex-CLIを使ってヘビゲームを実装してみようと思います。

ヘビゲーム(Snake Game)は、プレイヤーがヘビを操作して画面上のエサを食べさせるアクションゲームです。エサを食べるたびにヘビの体が長くなります。壁や自分自身の体にぶつかるとゲームオーバーになります。できるだけ長くヘビを伸ばすことが目標です。

Codex-CLIを起動し、o4-miniを呼び出して、次のプロンプトを入力して実行します。

Implement a simple Snake game web app using the "React" framework.

すると、o4-miniはおよそ7～8分間考えた後、自律的にターミナルで以下のコマンドを実行し、現在のディレクトリに2つのファイルを作成しました。

index.html

$ apply_patch << 'EOF'                                                       
*** Begin Patch                                                              
*** Add File: index.html                                                     
+<!DOCTYPE html>                                                             
+<html lang="en">                                                            
+<head>                                                                      
+  <meta charset="UTF-8" />                                                  
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>   
+  <title>Snake Game in React</title>                                        
+  <style>                                                                   
+    body {                                                                  
+      margin: 0;                                                            
+      display: flex;                                                        
+      justify-content: center;                                              
+      align-items: center;                                                  +      height: 100vh;                                                        
+      background: #000;                                                     
+    }                                                                       
+    canvas {                                                                
+      border: 1px solid #fff;                                               
+    }                                                                       
+  </style>                                                                  
+</head>                                                                     
+<body>                                                                      
+  <div id="root"></div>                                                     
+  <script src="https://unpkg.com/react@17/umd/react.development.js"         
crossorigin></script>                                                        
+  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" 
crossorigin></script>                                                        
+  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> +  <script type="text/babel" src="app.jsx"></script>                         
+</body>                                                                     
+</html>                                                                     
*** End Patch                                                                
EOF                                

app.jsx

$ apply_patch << 'EOF'
*** Begin Patch
*** Add File: app.jsx
+const { useEffect, useRef } = React;
+
+function SnakeGame() {
+  const canvasRef = useRef(null);
+  const gridSize = 20;
+  const tileSize = 20;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    let snake = [{ x: 10, y: 10 }];
+    let direction = { x: 1, y: 0 };
+    let food = getRandomFood();
+
+    function getRandomFood() {
+      let newFood;
+      while (true) {
+        newFood = {
+          x: Math.floor(Math.random() * gridSize),
+          y: Math.floor(Math.random() * gridSize),
+        };
+        if (!snake.some(s => s.x === newFood.x && s.y === newFood.y)) {
+          return newFood;
+        }
+      }
+    }
+
+    function draw() {
+      ctx.fillStyle = '#000';
+      ctx.fillRect(0, 0, gridSize * tileSize, gridSize * tileSize);
+
+      snake.forEach((segment, index) => {
+        ctx.fillStyle = index === 0 ? 'lime' : 'green';
+        ctx.fillRect(
+          segment.x * tileSize,
+          segment.y * tileSize,
+          tileSize - 1,
+          tileSize - 1
+        );
+      });
+
+      ctx.fillStyle = 'red';
+      ctx.fillRect(
+        food.x * tileSize,
+        food.y * tileSize,
+        tileSize - 1,
+        tileSize - 1
+      );
+    }
+
+    function update() {
+      const head = snake[0];
+      const newHead = { x: head.x + direction.x, y: head.y + direction.y };
+
+      const collidedWithWall =
+        newHead.x < 0 ||
+        newHead.x >= gridSize ||
+        newHead.y < 0 ||
+        newHead.y >= gridSize;
+      const collidedWithSelf = snake.some(
+        segment => segment.x === newHead.x && segment.y === newHead.y
+      );
+
+      if (collidedWithWall || collidedWithSelf) {
+        alert('Game Over');
+        snake = [{ x: 10, y: 10 }];
+        direction = { x: 1, y: 0 };
+        food = getRandomFood();
+        return;
+      }
+
+      snake.unshift(newHead);
+
+      if (newHead.x === food.x && newHead.y === food.y) {
+        food = getRandomFood();
+      } else {
+        snake.pop();
+      }
+    }
+
+    function gameLoop() {
+      update();
+      draw();
+    }
+
+    draw();
+    const intervalId = setInterval(gameLoop, 100);
+
+    function handleKeyDown(e) {
+      const { key } = e;
+      if (key === 'ArrowUp' && direction.y === 0) {
+        direction = { x: 0, y: -1 };
+      } else if (key === 'ArrowDown' && direction.y === 0) {
+        direction = { x: 0, y: 1 };
+      } else if (key === 'ArrowLeft' && direction.x === 0) {
+        direction = { x: -1, y: 0 };
+      } else if (key === 'ArrowRight' && direction.x === 0) {
+        direction = { x: 1, y: 0 };
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={gridSize * tileSize}
+      height={gridSize * tileSize}
+    />
+  );
+}
+
+ReactDOM.render(<SnakeGame />, document.getElementById('root'));
*** End Patch
EOF

同時に、Codex-CLIはターミナルでの操作が完了した後、各ファイルの役割やテスト方法について説明しました。

GPT-4.1による翻訳：
プロジェクトのルートディレクトリに2つのファイルを追加しました。

• index.html
  ー React、ReactDOM、BabelをCDN経由で読み込みます
  ー 画面全体を黒い背景にし、中央にキャンバスを配置します
  ー Reactアプリ（app.jsx）を読み込みます

• app.jsx
  ー SnakeGameコンポーネントを定義しています
  ー キャンバスと命令型の描画・更新ループ（setInterval）を使用
  ー ヘビの各セグメント、進行方向、エサの位置を管理
  ー 壁や自分自身との衝突を検知し、「ゲームオーバー」時にリセット
  ー 矢印キー入力で進行方向を変更
  ー #rootのdivにゲームを描画します

試す手順：

1. ReactやBabelのCDNを取得するため、インターネット接続が必要です
2. このディレクトリでHTTPサーバーを起動します（例：python3 -m http.server 8000）
3. ブラウザで http://localhost:8000/index.html を開きます
4. 矢印キーでヘビを操作し、赤いエサを食べて壁や自分にぶつからないようにしてください

速度調整、スコア表示、モバイル操作対応など、ご要望があればお知らせください！

説明通りにゲームを起動すると、イメージは下のようになりました。

UIは非常にシンプルで、速度調整などの一般的な機能はありませんが、実際に遊べるヘビゲームになっているのが嬉しいです。たとえこのゲームをどのように実装すれば良いか全くアイデアがなかったとしても上手く作れそうな気がします。プロンプトでさらに工夫すれば、機能追加など、より改善できるかもしれません。

ウェブページ

続いて、Codex-CLIのマルチモーダル機能を試してみたいと思います。
ChatGPTのUIのスクリーンショットをアップロードし、同じようなデザインのウェべページのHTMLファイルを生成させようとします。

下のスクリーンショットをアップロードします。

次のプロンプトを入力します。

およそ1分もかからずに、Codex-CLIはindex.htmlとstyle.cssの2つのファイルを生成しました。開くと下のデザインになりました。

アップロードした画像とは異なる部分もあり、機能もなくレイアウトだけですが、画像を大まかにコードで再現できた点は評価できると思います。

チャットアプリ

Codex-CLIがチャットアプリのUIを再現できるのであれば、さらに進んで簡単なチャットアプリも実現できるのではないかと思います。そこで、再びChatGPTのUIのスクリーンショットをアップロードし、次のプロンプトを入力します。

###Goal:
Create a web application that functions as an AI chatbot.

###Instructions: 
1. Implement the chatbot app using Python.
2. Use "azure-ai-inference" package to call the chat model. 
3. Use "fastapi" to build the backend application.
4. Use the design in the image to create the user intereface of the chat app. Add an input box for user to input there <azure_openai_endpoint>, <azure_openai_api_key>, <azure_openai_deployment>

およそ10分ほどで、Codex-CLIはいくつかのファイルを生成し、構成は以下の通りとなりました。

.sandbox/
├── main.py
├── requirements.txt
└── static/
    ├── index.html
    ├── css/
    │    └── style.css
    └── js/
         └── app.js

さらに、使い方の説明書も生成されました。

Here’s how to get up and running and use the little AI‐chat demo:

        1. Install dependencies
           In your project root you should have a `requirements.txt`. If not, create
    one with at least:

               fastapi
               uvicorn
               azure-ai-inference
               azure-core

           Then:

               pip install -r requirements.txt
        2. Launch the FastAPI server

               uvicorn main:app --reload

           By default it will serve on http://127.0.0.1:8000.
        3. Open the browser
           Point your browser at http://127.0.0.1:8000
        4. Configure your Azure OpenAI credentials
           • In the “Connect” panel at the top
             – Enter your Azure OpenAI *Endpoint*
    (e.g. `https://my-resource.openai.azure.com/`)
             – Enter your *API Key*
             – Enter your *Deployment Name* (the model deployment you created)
           • Click **Connect**.
           Once everything validates (all three fields non‐empty) the input box below
    will become active.
        5. Ask a question
           • Type your query in the “質問してみましょう” box and either press **Enter**
     or click **送信**.
           • Your question shows up on the right as a green bubble, and shortly
    thereafter the AI’s reply shows up as a gray bubble.
        6. Clearing or restarting
           • To start a fresh conversation you can simply refresh the page (which also
    clears the history in memory).

    That’s it! You can now iterate in the chat window just like ChatGPT—your front end
    sends your messages and credentials to the FastAPI backend, which instantiates
    ChatCompletionsClient, calls .complete(), and streams the reply back into the UI.

GPT-4.1による翻訳：
AIチャットデモを使い始める手順は以下の通りです。

1. 依存パッケージのインスロール
   プロジェクトのルートディレクトリに requirements.txt ファイルがあることを確認してください。もしなければ、以下の内容で作成してください：
   fastapi
uvicorn
azure-ai-inference
azure-core
   その後、次のコマンドを実行します：
   pip install -r requirements.txt

2. FastAPIサーバーの起動
   次のコマンドでサーバーを起動します：

uvicorn main:app --reload

デフォルトでは http://127.0.0.1:8000 でサービスが開始されます。

3. ブラウザでアクセス
   ブラウザで http://127.0.0.1:8000 にアクセスしてください。

4. Azure OpenAIの認証情報を設定

• 画面上部の「Connect」パネルで
  ー　Azure OpenAIの「エンドポイント」（例：https://my-resource.openai.azure.com/）を入力
  ー　「APIキー」を入力
  ー　「デプロイメント名」（作成したモデルのデプロイ名）を入力
• Connectボタンをクリック

全ての項目が正しく入力されると、下の入力ボックスが有効になります。

5. 質問を入力

• 「質問してみましょう」ボックスに質問を入力し、Enterキーを押すか送信ボタンをクリック
• 自分の質問が右側に緑色の吹き出しで表示され、少しするとAIの返答が灰色の吹き出しで表示されます。

6. 会話のリセットや再開

• 新しい会話を始めたい場合は、ページをリフレッシュしてください（これで履歴もクリアされます）。

以上です！
これでChatGPTのようにチャットウィンドウでやり取りができます。フロントエンドはあなたのメッセージと認証情報をFastAPIのバックエンドに送り、ChatCompletionsClientが .complete() を呼び出して、返答をUIにストリーミングします

実際にチェックしたところ、Codex-CLIが生成したコードにはモデルの呼び出し部分にバグが見つかりました（主にmessageの形式とapi_versionの問題です）。これらのバグを手動で修正し、説明通りにチャットアプリを起動したところ、UIは下の図のようになりました。

Azureの認証情報を入力して確認すると

認証情報が正しければ、そのままチャットを始めることができます。

---

これまでの例を通して、Codex-CLIでどんなことができるのかが分かり、vibe codingの雰囲気も少し感じていただけたのではないでしょうか。

感想・終わりに

全体として、Codex-CLIは「vibe coding tool」の一つであり、ユーザーに対して修正提案から自律的なフルスタックプログラミング支援まで、幅広い機能を提供しています。

個人の感想

最近は、さまざまな「vibe coding tool」が次々と登場しています。たとえば、Cursor、Copilot、Claude Codeなどがあります。
https://www.cursor.com/ja
https://docs.github.com/ja/copilot
https://docs.anthropic.com/ja/docs/agents-and-tools/claude-code/overview

ここからは、あくまで個人的な感想や展望です。

Codex-CLIの強みは、OpenAIが最新でリリースした推論モデル「o3」を利用できる点にあり、強力なマルチモーダル推論能力を持っています。また、オープンソースであるため、自分のワークフローにスムーズに組み込めるのも大きな魅力です（今回迅速にAzure経由でモデルを呼び出せたのも、オープンソースならではの利点です）。

今回の利用体験を通じて、コードの理解やデバッグなどの補助的な機能だけでなく、自然言語によるプログラミングの時代がさらに一歩進んだと実感しました。たとえば、

• フロントエンド開発において、今後はまず自由に自分の作りたいUIのイメージ図を作成し、それをもとにCodex-CLIでコードを生成する、といった使い方も現実的になってきているかもしれません。
• そして、フルスタックプロジェクト開発においても、将来的には自然言語でプロジェクトの構造や機能をテンプレートのように定義し、Codex-CLIが自動でコード化してくれるワークフローが登場するかもしれません。

コード言語と自然言語は、正確性・実行性と柔軟性・可読性のトレードオフの関係にありますが、Codex-CLIのようなAIツールの発展によって、両者の良さを兼ね備えた新しい言語が生まれる可能性もあると考えています（あくまで個人的な展望です）。

体験談

今回の体験からわかったこと

現時点でCodex-CLIの性能（今回の使用例では全てo4-miniを使用。o3ならさらに良い結果が期待できるかもしれません）では、より複雑なプロジェクトを自律的に実装する際に以下の課題が残っています。

• 生成されたコードのバグがある
• 存在しないパッケージをダウンロードしたり、インポートしようとする
• 生成物が期待と異なる

ここで、今回私がCodex-CLIでプロジェクトを構築する際に意識したポイントを共有します。

1. 要件を明確に伝える
   構造・機能・UIなど、生成物の要件をできるだけ具体的に定義して書くことで、期待通りの結果が得られやすくなります。
2. 実装手法を指定
   使用言語・フレームワーク・パッケージなどをプロンプトで明記すると、モデルの思考時間が短縮され、自分に対して生成コードの可読性も向上します。
3. プロンプトを工夫・微調整
   期待通りにコマンドが実行されない場合（例えば、プロジェクト全般を自律的に実装して欲しいのに、手順のテキストだけを提案されるなど）は、プロンプトの表現を変えて何度か試してみましょう。
4. バグはフィードバックする
   生成コードにバグがあり、実行できない場合、その要旨をプロンプトで伝え、修正を指示するのが有効です。
5. 安全性に注意する
   Codex-CLIはサンドボックス実行や三つの認証モードなど安全対策が施されていますが、生成コードの安全性は必ず自分でも確認することが大切です。理解できないコードや知らないパッケージは安易に受け入れないようにしましょう（現段階ではCodex-CLIはあくまで補助ツールです）。

---

最後までお読みいただき、ありがとうございました。
ここまでの紹介で、Codex-CLIの導入方法や使い方について全体像を掴んでいただけたのではないでしょうか。興味がある方や、これからCodex-CLIを導入したい方の一助けとなれば幸いです。

Givery AI Labが独自保有するフリーランス・副業の高単価AI案件や、随時開催しているセミナーやパーティなどのイベントにご興味ございましたら、ぜひTrack Worksのアカウント登録いただき、最新情報を受け取ってください！

https://job.tracks.run/track-works?utm_source=zenn&utm_medium=articles&utm_campaign=20250425

「Track Works」とは？
Givery AI Labの運営会社である株式会社ギブリーが提供する、AI時代のフリーランスエンジニアとして「スキル」と「実績」を強化できる実践的なAI案件を、ご経歴やスキルに合わせてご紹介するフリーランスエンジニア案件マッチングサービスです。Givery AI Labが独自保有するフリーランス・副業案件を紹介したり、AI関連技術やエンジニアのキャリアに関するイベントを随時開催しています。

また、Givery AI Labメンバーとして就職・転職をご検討いただく場合は、下記からご応募くださいませ！
https://hrmos.co/pages/givery/jobs?category=1688060102702190592
（運営会社である株式会社ギブリーのエンジニア向け求人一覧ページです）

【企業のご担当者様へ】
Givery AI Labでは、PoCで終わらせない「AIの社会実装」を実現するため、AI開発プロジェクトのPoCから本格実装・運用まで、幅広く伴走支援しております。ぜひお気軽にお問合せください。
・AI開発プロジェクト伴走支援サービス：https://givery.co.jp/services/ai-lab/
・生成AI技術に関するお悩み解決サービス「Givery AI 顧問」：https://givery.co.jp/services/ai_advisor/