はじめに
この記事は、OpenAI の「Codex IDE extension」に関する内容です。
8月末に以下のポストをしてたものの、その後は試さずにいた「Codex IDE extension」を、VS Code上で軽く試してみた話になります。
今回の内容をやろうと思ったきっかけ
今回の内容をやろうとしたきかっけは、2025/9/14の夜に開催となった ↓こちらの （AI道場の）Codex もくもく会に参加したことです。
上記に申し込んだ後に、もくもく会でやる内容を考えた流れだったのですが、「いつかやろうと思っていたものの、手をつけていないこと」をやろうと考えました。
それで、いくつかの候補があった中で、冒頭に書いていた「Codex IDE extension」のお試しをやってみることにしました。
※ もくもく会の中で「Codex IDE extension」を試しつつ、この記事を書き進めてましたが、最終的には、もくもく会の中で書き上げるところまではできず、もくもく会後に記事を仕上げました
さっそく試す
早速、公式の情報を見つつ試していきます。
その前に、Codex で使っているプランについて少し触れておきます。
紐付けているアカウント
今回のお試し・記事執筆をしている時点で、ChatGPT の Proプラン（個人用プラン）を使っていて、それを Codex に紐付けています。
なお、普段は Plusプランなのですが、直近で GPT-5 の Pro を試したり、deep research をガッツリ試したりというのをやろうとして、一時的に Proプランにしていた状況です。
プランの話については、今回の内容を試すくらいの利用量なら Plusプランで十分な分量と思われるところです。
VS Code に拡張機能をインストールする
ここからは、ブラウザ・VS Code を使った作業などに入っていきます。
マーケットプレイスで拡張機能のページを確認する
「Codex IDE extension（ https://developers.openai.com/codex/ide ）のページ」で、以下の部分に拡張機能（Codex IDE extension）へのリンクが掲載されています。
上記の Set up the extension のページに書いてあるリンクから、以下のページ（マーケットプレイスのページ）を開きます。
●Codex – OpenAI’s coding agent - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=openai.chatgpt
さらに上記の「Install」ボタンを押して VS Code で開くのを許可して、VS Code側でインストールの操作を行います。
VS Code側の上記で、「Install」ボタンを押してインストールを実行すれば、インストール作業は完了です。
VS Code上の拡張機能の画面（設定用のメニューなど）を見てみる
ここで VS Code上の拡張機能の画面で、設定用メニューなどを軽く見てみます。本当に見てみるだけで、設定変更などは行っていないので、「Codex IDE extension ＋ VS Code」を使ってみる話を見たい場合は、この部分はとばしてしまってください（⇒ こちらへ）。
左側メニューのアイコンを選ぶ
上記のインストール後に VS Code の左側メニューを見ると、導入済みの拡張機能が並んでいる中に「Codex IDE extension」のアイコンも出てきていました。
左メニュー内の「Codex IDE extension」のアイコンをクリックしてみると、以下の画面が出て、その中に 36日前の履歴が表示されていました（おそらく、自分が Codex CLI を試した時のもの？）。
今回の内容には影響しなそうなので、ひとまず気にせずに進めていきます。
なお、自分は既にログインした状態になっていましたが、未ログインの状態では、この「Codex IDE extension」のアイコンをクリックした画面で、ログインの操作を行えるようになっています。
下部のメニュー（横並びで 3つあるもの）
下のほうにメニューが出ていますが、3つ横並びのものを選ぶと、以下のような選択肢が出てくるようです。
下部のメニュー（テキスト入力を行う部分の左下）
またテキストを入力する部分の「Auto」と書かれた部分や「＋」マークにカーソルを合わせると、それぞれ以下のようなメニューが出てきました。
とりあえず、設定を色々変えられそうですが、今はデフォルトのままで進めてみます。
上部の設定アイコン
上部の歯車マークのような設定アイコンを選ぶと、以下のメニューが展開されます。
設定項目を見てみると、以下のような感じでした。
これらも、今回は手を加えずに進めてみます。
とりあえず動かす
とりあえず、適当なプロンプトで実行をしてみます。
プロンプト
最初は、プロンプトは以下の内容で試してみることにしました。
【プロンプト】
以下のページと同じ見た目のものを、HTML＋CSS＋JavaScriptで作って
https://developers.openai.com/codex/ide#set-up-the-extension
ワークスペースにフォルダを登録
しかし、現状だと実行ができない状況です。以下を見ると、どうやら VS Code でワークスペースにフォルダが指定されていない（処理の実行対象のフォルダが不明な状況）となっているためのようです。
とりあえず適当なフォルダを作って、それを以下から登録します。
そうすると、以下のようにワークスペースにフォルダが登録された状態になりました。
あらためて処理を実行してみる
あらためて、実行画面のボタンを見てみます。今度は以下のように、処理が実行できるようになっていました。
実行してみると、以下のように処理が進んでいきます。そして、何やらコマンドの実行許可を求められました。
危険ではない、ただのデータ取得だったので許可したのですが、どうやら HTML をそのまま読みに行っているような感じでした。
特に改変の指示もないプロンプトなので、元にするページのコードを取得してしまうと、わざわざコーディングをしてもらう意味がなさそうに思ったので、方針を変更します。
（というのを、一通り、ページを作ってもらった後に気づきました...）
画像を元にしたコーディングを依頼
上記のプロンプトの内容を少し変えて、ある見た目と同じになるようなコーディングをやってもらうことにします。具体的には、元になるページのキャプチャ画像を用意して、その見た目になるような HTML＋CSS を作ってもらうというものです。
VS Code上で依頼した内容は、以下になります。
実行された処理
上記んプロンプトにそって、以下のように処理が進みました。
今回は、特に途中で許可を求められることはなく、以下のファイルができあがりました。
（1つ目は Mac の Finder上の表示で、2つ目は VS Code上での表示です）
元画像と作成されたページ
ここで、元画像と作成されたページを見てみます。
まず、以下は元のプロンプトに添付した画像です。
そして、以下は作成された HTML をブラウザで表示したもの（のキャプチャ）です。
元ページでは画像素材で作られている冒頭部分などは、その素材を使わず似た見た目を作っていて差異がありますが（グラデーションの背景の部分に文字入れしてあるところなどが特に）、全体的には似たような見た目になっているかと思います。
ページの下部もレイアウトの部分で見た目の違いが出ていますが、追加の依頼で修正をかけてもらえば良い、というくらいの差異かと思われます。
生成されたコード
最後に、生成されたコード（HTML、CSS）を掲載します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Codex IDE extension</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="topbar">
<div class="container nav">
<a class="brand" href="#">Codex</a>
<nav class="links">
<a href="#">Resources</a>
<a href="#" class="active">Codex</a>
<a href="#">Blog</a>
<a href="#">Docs</a>
<a href="#">Dashboard</a>
</nav>
</div>
</header>
<main class="container">
<section class="hero">
<h1>Codex IDE extension</h1>
<p class="subtitle">Pair with Codex in your IDE</p>
<div class="gradient-card">
<div class="ide-pill">
<svg class="laptop" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="4" width="18" height="12" rx="2" ry="2"></rect>
<path d="M2 18h20"></path>
</svg>
<span class="ide-text">IDE</span>
</div>
</div>
</section>
<section class="content">
<p>
Codex is OpenAI's coding agent that can read, modify, and run code. It helps you build faster,
squash bugs, and understand unfamiliar code. With the Codex VS Code extension you can use
Codex side-by-side in your IDE, or delegate tasks to the cloud.
</p>
<h2>Set up the extension</h2>
<p>
The Codex IDE extension works with VS Code forks such as Insiders, Cursor, or Windsurf.
</p>
<p>
You can get the Codex extension from the <a href="#">Visual Studio Code marketplace</a>, or download it for your IDE:
</p>
<ul class="downloads">
<li><a href="#">Download for Visual Studio Code</a></li>
<li><a href="#">Download for Cursor</a></li>
<li><a href="#">Download for Windsurf</a></li>
<li><a href="#">Download for Visual Studio Code Insiders</a></li>
</ul>
</section>
</main>
<footer class="spacer"></footer>
</body>
</html>
/* Base */
:root {
--text: #111827; /* slate-900 */
--muted: #6b7280; /* gray-500 */
--border: #e5e7eb; /* gray-200 */
--badge-bg: #eef2f7; /* light pill */
--bg: #ffffff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
width: min(1040px, 92%);
margin-inline: auto;
}
/* Header */
.topbar {
border-bottom: 1px solid var(--border);
background: #fff;
position: sticky;
top: 0;
z-index: 10;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 16px;
}
.brand {
text-decoration: none;
font-weight: 700;
color: var(--text);
letter-spacing: 0.2px;
}
.links { display: flex; align-items: center; gap: 18px; }
.links a {
color: #374151; /* gray-700 */
text-decoration: none;
font-size: 14px;
padding: 8px 10px;
border-radius: 8px;
}
.links a:hover { color: #111827; }
.links a.active {
background: var(--badge-bg);
color: #111827;
font-weight: 600;
}
/* Hero */
.hero { text-align: center; padding: 48px 0 28px; }
.hero h1 {
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
margin: 0 0 10px;
}
.subtitle {
color: var(--muted);
margin: 0 0 22px;
}
.gradient-card {
border-radius: 16px;
padding: 16px;
background: radial-gradient(1200px 300px at 20% 40%, rgba(0, 200, 255, 0.18), rgba(0,0,0,0) 60%),
radial-gradient(900px 260px at 80% 30%, rgba(168, 85, 247, 0.35), rgba(0,0,0,0) 60%),
linear-gradient(90deg, #5bc0ff 0%, #b58cff 55%, #d3a6ff 100%);
filter: saturate(1.1) hue-rotate(-5deg);
}
.ide-pill {
background: #fff;
border-radius: 24px;
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}
.laptop { color: #6b7280; }
.ide-text { font-size: clamp(40px, 6vw, 64px); color: #4b5563; font-weight: 600; letter-spacing: 1px; }
/* Content */
.content { padding: 28px 0 60px; }
.content p {
color: #1f2937; /* gray-800 */
line-height: 1.75;
margin: 14px 0;
}
.content h2 { font-size: 28px; margin: 28px 0 8px; }
.downloads { margin: 8px 0 0 18px; padding: 0; }
.downloads li { margin: 10px 0; }
.downloads a { color: #1d4ed8; text-underline-offset: 2px; }
.downloads a:hover { text-decoration: underline; }
.spacer { height: 48px; }
/* Responsive tweaks */
@media (max-width: 520px) {
.links { gap: 10px; }
.links a { padding: 6px 8px; }
.ide-pill { min-height: 140px; }
}
おわりに
今回、OpenAI の「Codex IDE extension」を VS Code と組み合わせて、少し試してみました。
今回の内容は、「Codex IDE extension ＋ VS Code」のとりあえずの動作確認・利用の流れの確認という感じでやりましたが、タスクの内容的には Web版・アプリ版の ChatGPTや、Codex CLI で依頼して完了させられる内容でした。
「Codex IDE extension ＋ VS Code」を使うからこそできることや、効率的に行えることというのは、探っていって別途見ていければと思っています。
（ただ、「単純な機能のお試し」をもう少しやってみて、その後にという感じでやっていこうと思っています）
【追記】
とりあえず、IDE に統合されていることにより Web版・アプリ版より実行しやすくなりそうな内容などを、いくつかメモしてみようと思います。
- @ を使ったファイル参照
- 複数ファイルを対象にした編集
- コマンド実行をまじえたテストを行いつつ、エラーを直すループをまわす
- クラウド側でも処理を走らせて、クラウド側の処理結果をローカルへ適用する
あと、GitHub内の Codex利用も組み合わせられると良さそうかと思いました。
●Code Review
https://developers.openai.com/codex/cloud/code-review