前書き
こちらの続き
一旦完成。
最初は指示文を作ってもらって、Github Copilotに渡していたが、いまいち思った通りの修正にならなかった。
なので、AIと相談しながら試行錯誤する方が楽だった。
以下生成AIの成果物。
この記事では、
自然文 → Structured Task → コード生成 → プロジェクト化 → 実行
という一連の流れを自動化する「vibecoding」という仕組みを構築した過程をまとめます。
- Python（FastAPI）
- Next.js（UI）
- Ollama（LLM）
- Qwen2.5-Coder
を使って、自然文から実行可能な Python プロジェクトを生成する仕組みを作りました。
🎯 目標
- 自然文を解析して Structured Task を生成
- LLM に 3 セクション形式でコード生成させる
- 生成物をフォルダ単位で管理
- UI からフォルダを指定して実行できる
- 実行時に自動で
generated.pyを検出して実行
🧩 全体アーキテクチャ
Next.js UI
↓ /parse
FastAPI → Structured Task 生成
↓ /generate
Ollama → コード生成（3セクション）
↓ 保存
generated/<uuid>/generated.py
generated/<uuid>/requirements.txt
generated/<uuid>/README.md
↓ /run
FastAPI → generated.py を実行
🧠 1. Structured Task の生成 (/parse)
自然文を受け取り、
LLM に「タスクの構造化」をさせる。
const res = await fetch("/parse", {
method: "POST",
body: JSON.stringify({ text }),
});
🧠 2. コード生成 (/generate)
LLM に対して 3 セクション形式で出力させる。
=== ENVIRONMENT SETUP ====== REQUIREMENTS ====== PYTHON CODE ===
この形式にすることで、
後段の処理が安定する。
📁 3. 生成物をフォルダ単位で保存
generated/<uuid>/
generated.py
requirements.txt
README.md
code_generator.py の保存処理：
def save_generated_files(sections, base_dir):
base_dir.mkdir(parents=True, exist_ok=True)
(base_dir / "generated.py").write_text(sections["python_code"])
(base_dir / "requirements.txt").write_text(sections["requirements"])
(base_dir / "README.md").write_text(make_readme(sections))
🧹 4. LLM 出力の揺れを吸収する split_sections()
LLM が Markdown を混ぜても壊れないように、
正規表現で 3 セクションを抽出する。
pattern = re.compile(
r"=== ENVIRONMENT SETUP ===\s*(.*?)\s*=== REQUIREMENTS ===\s*(.*?)\s*=== PYTHON CODE ===\s*(.*)",
re.DOTALL
)
さらに ``` を除去するフィルタも追加。
▶ 5. /run をフォルダ対応にする
フォルダが渡されたら generated.py を自動検出して実行。
if path.is_dir():
entry = path / "generated.py"
path = entry
🖥 6. UI 側でフォルダパスを渡す
python_file からフォルダパスを抽出：
const getFolderPath = (pythonFilePath: string) =>
pythonFilePath.replace(/\\generated\.py$/, "").replace(/\/generated\.py$/, "");
実行ボタン：
const folderPath = getFolderPath(generateResult.files.python_file);
await fetch("/run", {
method: "POST",
body: JSON.stringify({ file_path: folderPath }),
});
🎉 できあがったもの
- 自然文からプロジェクトを生成
- 生成物はフォルダ単位で管理
- UI からワンクリックで実行
- LLM の揺れにも強い
- 拡張性の高い構造
🚀 今後の拡張予定
- requirements.txt の自動インストール
- README.md のコマンド自動実行
- zip ダウンロード機能
- 実行ログのリアルタイムストリーム
- Dockerfile 生成
✨ まとめ
今回の vibecoding の構築で、
- LLM の出力を安定させる方法
- プロジェクト生成のベストプラクティス
- UI とバックエンドの連携
- フォルダ単位の実行フロー
が一通り揃いました。
AI を使ったコード生成の実践例として、
かなり応用の効く構成になっています。