前書き

こちらの続き　
一旦完成。
最初は指示文を作ってもらって、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 を使ったコード生成の実践例として、
かなり応用の効く構成になっています。