OpenAI Model Checker

A minimal web app (webpack + TypeScript) to try multiple OpenAI models using the Responses API.
Select a model from the header, type your prompt, and read/copy the answer below.

⚠️ Demo-only: For simplicity this app embeds your API key at build time with DefinePlugin.
Do not deploy with a real key in public. Put a server in front for production.

Features

• Model selector in the header (center) with the following options:
  • gpt-5, gpt-5-mini, gpt-5-nano, gpt-5-chat-latest, gpt-4.1, gpt-4o
  • o3, o3-deep-research, o3-pro, o3-mini, o4-mini, o4-mini-deep-research
• Chat-like UI (input area + output area)
• Calls OpenAI Responses API (/v1/responses)
• Copy button under output area
• Switching the model applies to the next query (no page reload needed)

File structure

your-app ├─ package.json ├─ tsconfig.json ├─ webpack.config.js ├─ .env.sample ├─ src/ │ ├─ index.ts │ └─ env.d.ts ├─ web/ │ ├─ index.html │ └─ css/ ├─ styles.css ├─ dist/ ├─ README.md └─ .gitignore

Setup

1. Install

   npm i
   

cp .env.sample .env

then edit .env:

OPENAI_API_KEY=sk-xxxx...

npm run dev

-> http://localhost:5173

npm run build

Artifacts in /dist (HTML is injected, CSS copied)

Usage Choose a model in the header (center). The right side shows “Using: ”.

Type your prompt in the central textarea and click Send.

Answers appear in the output panel. Use Copy to copy all model outputs.

Notes This project uses the Responses API. Minimal request body:

json Copy Edit { "model": "gpt-5", "input": "Hello!" } The app first reads response.output_text if present, and otherwise aggregates text from response.output.

Some models (e.g., o3 / o3-pro / deep-research variants) may have special behaviors or access requirements on your account/plan. If you get an error, switch to another model that your key can access.

References OpenAI Responses API reference (endpoint /v1/responses). OpenAI プラットフォーム

Text generation guide (instructions, input formats, and output_text helper context). OpenAI プラットフォーム +1

your-app/.gitignore

Node node_modules/ npm-debug.log* yarn.lock pnpm-lock.yaml

Build output dist/

Env .env .env.local .DS_Store

IDE .vscode/ .idea/

補足（要件との対応）

• webpack ビルド & dev-server: webpack.config.js / scripts 完備
• TS エントリ: src/index.ts
• .env の利用: dotenv で読み込み → webpack.DefinePlugin で process.env をビルド時に埋め込み
• HTML への JS インジェクト: HtmlWebpackPlugin
• CSS は HTML から読み込み: web/index.html が styles.css を <link> で参照（CopyWebpackPlugin で dist へコピー）
• GitHub 公開向け .gitignore: 追加済み
• UI レイアウト: ヘッダー左：アプリ名／中央：モデル選択、下に入力→出力→コピーアイコン配置
• 機能 (1)〜(6): すべて src/index.ts で実装（モデル変更は即、次の送信から反映）

必要なら、ストリーミング対応や会話履歴管理、ツール利用（web 検索など）も拡張できます。気軽に言ってください。 ::contentReference[oaicite:3]{index=3}