たった 1 つのプロンプトとボタンで、システムを完全デプロイ。これが 2026 年の AI エンジニアリング

@0xWast3
英語2 日前 · 2026年7月15日
129K
111
15
20
263

TL;DR

生成 AI アプリケーションアーキテクチャに関する包括的なガイド。 Claude と Obsidian を使用して、 AI エージェントがどのようにソフトウェアシステム全体を構築、デプロイ、管理するのかを詳述します。

半年前、これにはバックエンド開発者、DevOps エンジニア、そして 2 週間が必要でした。今日では、たった一文と Claude で済みます。これが完全なアーキテクチャです。そして、なぜほとんどの開発者がまだこれに気づいていないのか、その理由です。

ほとんどの人が持つ AI のメンタルモデルは間違っています。

彼らはこう考えます:AI アシスタント → 質問する → 答えが返ってくる。

2026 年の現実:AI エージェント → システムを説明する → それが構築、デプロイ、そしてそのシステムを環境に接続する。プロトタイプではありません。コードスニペットでもありません。動作するアプリケーションです。

この変化には名前があります:Generative App Architecture(生成型アプリケーションアーキテクチャ)。そして、それを実現するスタック、Claude + Obsidian + MCP は、今すぐ誰でも利用可能です。

1. Generative App Architecture の実際の意味

従来のソフトウェア開発:

text
1アイデア → 仕様 → 設計 → フロントエンド開発 → バックエンド開発
2→ データベース構築 → API 統合 → テスト → デプロイ
3期間:数週間。コスト:数十万円。

Generative App Architecture:

text
1アイデア → プロンプト → 動作するシステム
2期間:数分。コスト:API トークン。

AI エージェントはコードを書くだけではありません。内部で完全な Agentic Loop(エージェントループ)を実行します:

ステップ 1 - 分解

あなたの抽象的なリクエスト(「洗車場向けの CRM を構築して」)は、数十のアトミックなサブタスクに分解されます:データベーススキーマ、UI コンポーネント、通知ロジック、認証フロー、API エンドポイント。

ステップ 2 - MCP による環境マッピング

Model Context Protocol を通じて、エージェントは利用可能なツール(ファイルシステム、インストール済みパッケージ、実行中のサービス、利用可能な API)を即座に把握します。

ステップ 3 - 反復的な構築とテスト

エージェントはコードを書き、実行し、コンパイルエラーをキャッチし、修正し、再テストします。これを自律的に、システムが正しく動作するまで繰り返します。

ステップ 4 - コンテキストに応じたデプロイ

出力はコードが書かれたテキストファイルではありません。動作するローカル環境、またはデプロイ可能な Web アプリケーションです。

これが、開発者を支援するツールと、ビルドパイプライン全体を置き換えるシステムの違いです。

2. エンジンとしての Claude - 3 つのデプロイモード

モード 1 - Claude Artifacts

プロンプトから動作するアプリケーションへの最速のパスです。Claude に何か構築するよう依頼すると、インタラクティブな Artifact ウィンドウが開き、完全な Web アプリケーション(React、HTML、JavaScript)をリアルタイムで組み立て、コンパイルし、実行します。その様子を見ていることができます。

Artifact 内で動作中のアプリを操作し、自然言語で反復的に改善し、完全なアーカイブをエクスポートできます。

本番利用可能なファイナンストラッカーを生成するプロンプト:

text
1個人財務管理アプリケーションを構築してください。
2
3機能:
4- 取引ログ(カテゴリ付きで追加/編集/削除)
5- 進捗バー付きの月次予算ビュー
6- CoinGecko API からリアルタイム価格を取得する暗号通貨ポートフォリオトラッカー
7- リアルタイム更新される純資産計算
8- ダークモード切り替え
9
10技術要件:
11- 単一ファイルの React アプリケーション
12- useState + useEffect のみ使用(外部状態管理は不要)
13- スタイリングに Tailwind CSS
14- 公開 API からのフェッチ(認証不要)
15- モバイル対応
16
17データ:
18- セッション間の永続化は localStorage
19- 取引を CSV としてエクスポート
20
21出力:デプロイ可能な完全な自己完結型アプリケーション。

Claude Artifacts が返すもの - 完全な React アプリケーション:

javascript
1import { useState, useEffect } from "react";
2
3const CATEGORIES = ["Housing","Food","Transport","Entertainment","Health","Savings","Income","Crypto","Other"];
4const CRYPTO_IDS = { BTC: "bitcoin", ETH: "ethereum", SOL: "solana" };
5
6export default function FinanceTracker() {
7 const [transactions, setTransactions] = useState(() =>
8 JSON.parse(localStorage.getItem("transactions") || "[]")
9 );
10 const [cryptoPrices, setCryptoPrices] = useState({});
11 const [form, setForm] = useState({ description:"", amount:"", category:"Other", type:"expense", date:"" });
12 const [darkMode, setDarkMode] = useState(false);
13
14 useEffect(() => {
15 const ids = Object.values(CRYPTO_IDS).join(",");
16 fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd`)
17 .then(r => r.json())
18 .then(data => {
19 const prices = {};
20 Object.entries(CRYPTO_IDS).forEach(([sym, id]) => { prices[sym] = data[id]?.usd || 0; });
21 setCryptoPrices(prices);
22 });
23 }, []);
24
25 useEffect(() => {
26 localStorage.setItem("transactions", JSON.stringify(transactions));
27 }, [transactions]);
28
29 const addTransaction = () => {
30 if (!form.description || !form.amount) return;
31 setTransactions(prev => [...prev, { ...form, id: Date.now(), amount: parseFloat(form.amount),
32 date: form.date || new Date().toISOString().split("T")[0] }]);
33 setForm({ description:"", amount:"", category:"Other", type:"expense", date:"" });
34 };
35
36 const totalIncome = transactions.filter(t => t.type === "income").reduce((s,t) => s + t.amount, 0);
37 const totalExpenses = transactions.filter(t => t.type === "expense").reduce((s,t) => s + t.amount, 0);
38 const netWorth = totalIncome - totalExpenses;
39
40 const bg = darkMode ? "#0D0D0D" : "#F9F7F4";
41 const card = darkMode ? "#1A1A1A" : "#FFF";
42 const text = darkMode ? "#F0F0F0" : "#1A1A1A";
43 const border = darkMode ? "#2A2A2A" : "#E8E8E8";
44
45 return (
46 <div style={{ minHeight:"100vh", background:bg, color:text, fontFamily:"system-ui, sans-serif" }}>
47 <div style={{ maxWidth:800, margin:"0 auto", padding:"24px 16px" }}>
48
49 <div style={{ display:"flex", justifyContent:"space-between", marginBottom:24 }}>
50 <div>
51 <h1 style={{ fontSize:22, fontWeight:500, margin:0 }}>Finance Tracker</h1>
52 <p style={{ margin:"4px 0 0", fontSize:13, color: netWorth >= 0 ? "#22C55E" : "#EF4444" }}>
53 Net worth: ${netWorth.toFixed(2)}
54 </p>
55 </div>
56 <button onClick={() => setDarkMode(!darkMode)}
57 style={{ padding:"8px 14px", borderRadius:8, border:`1px solid ${border}`,
58 background:card, color:text, cursor:"pointer" }}>
59 {darkMode ? "Light" : "Dark"}
60 </button>
61 </div>
62
63 <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:20 }}>
64 {[["Income","#22C55E",totalIncome],["Expenses","#EF4444",totalExpenses]].map(([label,color,val]) => (
65 <div key={label} style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:14 }}>
66 <p style={{ margin:0, fontSize:12, color:"#999" }}>{label}</p>
67 <p style={{ margin:"4px 0 0", fontSize:20, fontWeight:600, color }}>${val.toFixed(2)}</p>
68 </div>
69 ))}
70 </div>
71
72 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:16, marginBottom:20 }}>
73 <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:8, marginBottom:8 }}>
74 <input placeholder="Description" value={form.description}
75 onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
76 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />
77 <input type="number" placeholder="Amount" value={form.amount}
78 onChange={e => setForm(p => ({ ...p, amount: e.target.value }))}
79 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />
80 <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))}
81 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>
82 <option value="expense">Expense</option>
83 <option value="income">Income</option>
84 </select>
85 </div>
86 <div style={{ display:"grid", gridTemplateColumns:"2fr auto", gap:8 }}>
87 <select value={form.category} onChange={e => setForm(p => ({ ...p, category: e.target.value }))}
88 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>
89 {CATEGORIES.map(c => <option key={c}>{c}</option>)}
90 </select>
91 <button onClick={addTransaction}
92 style={{ padding:"9px 20px", borderRadius:8, background:"#E8692A",
93 color:"#fff", border:"none", cursor:"pointer", fontSize:13, fontWeight:500 }}>
94 Add
95 </button>
96 </div>
97 </div>
98
99 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, overflow:"hidden" }}>
100 <p style={{ margin:0, padding:"12px 16px", borderBottom:`1px solid ${border}`, fontSize:13, fontWeight:500 }}>
101 Transactions ({transactions.length})
102 </p>
103 {transactions.slice().reverse().map(t => (
104 <div key={t.id} style={{ display:"flex", justifyContent:"space-between",
105 alignItems:"center", padding:"11px 16px", borderBottom:`1px solid ${border}` }}>
106 <div>
107 <p style={{ margin:0, fontSize:13, fontWeight:500 }}>{t.description}</p>
108 <p style={{ margin:"2px 0 0", fontSize:12, color:"#999" }}>{t.category} · {t.date}</p>
109 </div>
110 <span style={{ fontSize:14, fontWeight:600, color: t.type==="income" ? "#22C55E" : "#EF4444" }}>
111 {t.type==="income" ? "+" : "-"}${t.amount.toFixed(2)}
112 </span>
113 </div>
114 ))}
115 </div>
116 </div>
117 </div>
118 );
119}

これが完全なアプリケーションです。ひとつのプロンプト。Claude Artifacts 内で即座に動作します。

モード 2 - Claude + MCP(ローカルデプロイ)

MCP(Model Context Protocol)は、Claude にあなたのローカル環境への直接アクセスを提供します。ひとつのプロンプトがコードを生成するだけでなく、ハードドライブ上にフォルダを作成し、ターミナル経由でパッケージをインストールし、設定ファイルを書き込み、ローカルサーバーを起動します。

Claude をファイルシステムに接続する MCP 設定:

json
1{
2 "mcpServers": {
3 "filesystem": {
4 "command": "npx",
5 "args": [
6 "-y",
7 "@modelcontextprotocol/server-filesystem",
8 "/Users/yourname/Projects"
9 ]
10 },
11 "terminal": {
12 "command": "npx",
13 "args": ["-y", "@modelcontextprotocol/server-terminal"]
14 },
15 "sqlite": {
16 "command": "npx",
17 "args": [
18 "-y",
19 "@modelcontextprotocol/server-sqlite",
20 "--db-path",
21 "/Users/yourname/Projects/app.db"
22 ]
23 }
24 }
25}

この設定がアクティブな状態で、たったひとつのプロンプト:

text
1洗車ビジネス向けのローカル CRM システムを構築してデプロイしてください。
2
3プロジェクトを ~/Projects/carwash-crm/ に作成してください。
4依存関係を自動的にインストールしてください。
5以下のテーブルを持つ SQLite データベースをセットアップしてください:
6- customers(名前、電話番号、メール、車両、メモ)
7- visits(顧客 ID、日付、サービス、価格、ステータス)
8- staff(名前、役割、スケジュール)
9
10以下の機能を持つ Web インターフェースを構築してください:
11- 顧客検索とプロフィール
12- 顧客ごとの来店履歴
13- 月別売上ダッシュボード
14- SMS リマインダーシステム(Twilio 統合、設定のみ)
15
16完了したら開発サーバーを起動してください。
17準備ができたら localhost URL を報告してください。

Claude はこれを MCP を通じてエンドツーエンドで実行します。ディレクトリ構造の作成、Node パッケージのインストール、データベーススキーマの作成、UI の構築、サーバーの起動まで。あなたは localhost URL を受け取ります。

モード 3 - 企業標準を組み込んだ Claude Projects

UI キット、デザイントークン、API ドキュメント、セキュリティ要件を一度 Claude Project にアップロードします。それ以降、Claude が生成するすべてのシステムは、自動的にあなたの内部スタックに準拠します。

text
1[Claude Project のコンテキストに含まれるもの:]
2- design-system.md(色、タイポグラフィ、スペーシング)
3- api-standards.md(認証パターン、エラーコード)
4- security-policy.md(入力検証ルール、CORS 設定)
5- stack.md(React 18、TypeScript、Tailwind、Prisma、PostgreSQL)
6
7プロンプト:
8「メール認証と、送信時の自動 Notion データベース入力機能を備えた
9クライアントオンボーディングフォームを構築してください」
10
11出力:あなたのスタックに完全に一致する、
12修正不要なプロダクション対応コード。

3. AI コマンドセンターとしての Obsidian

2026 年の Obsidian は、メモ作成アプリではありません。それは個人用の AI コマンドセンターであり、あなたの蓄積された知識ベースが、構築するすべてのシステムのコンテキストレイヤーとなります。

アーキテクチャの変化:あなたの Vault はもはやストレージではありません。それは RAG(Retrieval Augmented Generation、検索拡張生成)です。AI エージェントがタスクを実行する前に問い合わせる、生きた知識ベースです。

これを機能させるプラグインスタック:

Smart Connections - Vault 全体をインデックス化し、関連するノートを AI 呼び出しのたびにコンテキストとして送信します。

Obsidian Copilot - Vault を Claude API に直接接続します。一度設定するだけ:

javascript
1
2 "provider": "anthropic",
3 "model": "claude-opus-4-8",
4 "apiKey": "YOUR_ANTHROPIC_KEY",
5 "systemPrompt": "あなたはシステムアーキテクトです。ユーザーの完全な知識 Vault をコンテキストとして利用できます。システムを構築する際は、既存のノート、過去の決定、確立されたパターンを参照してください。出力:動作するコード + Obsidian ファイル構造。",
6 "contextWindow": {
7 "includeActiveFile": true,
8 "includeLinkedFiles": true,
9 "includeRecentFiles": 10,
10 "includeFolders": ["Projects", "Systems", "Decisions"]
11 }
12}

システムデザインインターフェースとしての Canvas

ひとつのプロンプトで、Claude がシステム全体のアーキテクチャを接続されたブロックとして配置する、インタラクティブな Obsidian Canvas を作成します。

text
1Obsidian Canvas でのプロンプト:
2「私の Twitter アカウント向けのコンテンツ制作パイプラインを設計してください。
3週に 3 本の記事を公開し、5 件のスポンサー案件を管理しています。
4既存のコンテンツカレンダーノートを参照してください。」
5
6出力:以下の接続されたブロックを持つ Canvas:
7→ コンテンツアイデア出し(あなたの興味ノートから取得)
8→ 下書き → レビュー → 公開のワークフロー
9→ 期限アラート付きスポンサー管理
10→ 分析ダッシュボード
11→ 自動クロス投稿ロジック
12→ 各ブロックは関連する Obsidian ファイルにリンク

Claude が生成する Canvas 出力(構造化ファイル):

json
1{
2 "nodes": [
3 {
4 "id": "ideation",
5 "type": "file",
6 "file": "Systems/ContentPipeline/Ideation.md",
7 "x": 0, "y": 0, "width": 300, "height": 200,
8 "color": "1"
9 },
10 {
11 "id": "draft",
12 "type": "file",
13 "file": "Systems/ContentPipeline/Draft.md",
14 "x": 400, "y": 0, "width": 300, "height": 200,
15 "color": "3"
16 },
17 {
18 "id": "sponsors",
19 "type": "file",
20 "file": "Systems/ContentPipeline/SponsorTracker.md",
21 "x": 0, "y": 300, "width": 300, "height": 200,
22 "color": "5"
23 },
24 {
25 "id": "analytics",
26 "type": "file",
27 "file": "Systems/ContentPipeline/Analytics.md",
28 "x": 400, "y": 300, "width": 300, "height": 200,
29 "color": "6"
30 }
31 ],
32 "edges": [
33 {
34 "id": "e1",
35 "fromNode": "ideation", "fromSide": "right",
36 "toNode": "draft", "toSide": "left",
37 "label": "承認されたコンセプト"
38 },
39 {
40 "id": "e2",
41 "fromNode": "sponsors", "fromSide": "right",
42 "toNode": "draft", "toSide": "bottom",
43 "label": "ブリーフィングの統合"
44 }
45 ]
46}

4. 完全なプライバシーのためのローカル LLM

機密データ(クライアントシステム、金融ツール、内部ツール)の場合、クラウド API ではなくローカルモデルを経由します。データがマシンから出ることはありません。

bash
1# Ollama をインストール
2curl -fsSL https://ollama.com/install.sh | sh
3
4# コーディング可能なモデルをプル
5ollama pull llama3.2:latest
6# または、より強力なコード生成のために:
7ollama pull qwen2.5-coder:32b
8
9# ローカルサーバーを起動
10ollama serve
11# localhost:11434 で実行

Obsidian Copilot をローカルエンドポイントを使用するように設定:

javascript
1{
2 "provider": "ollama",
3 "model": "qwen2.5-coder:32b",
4 "baseUrl": "http://localhost:11434",
5 "systemPrompt": "あなたは MCP を介してユーザーのファイルシステムにアクセスできるローカルシステムビルダーです。完全に動作するシステムを構築してください。明示的な指示がない限り、外部 API にデータを送信しないでください。"
6}

ローカルモデル + MCP ブリッジ:

python
1import requests
2import json
3from pathlib import Path
4from watchdog.observers import Observer
5from watchdog.events import FileSystemEventHandler
6
7OBSIDIAN_INBOX = Path.home() / "Obsidian" / "AI-Inbox"
8PROJECTS_DIR = Path.home() / "Projects"
9OLLAMA_URL = "http://localhost:11434/api/generate"
10
11class InboxWatcher(FileSystemEventHandler):
12 """
13 Obsidian の AI-Inbox フォルダを監視します。
14 新しい .md ファイルが表示されたら、それをビルドプロンプトとして扱います。
15 ローカル LLM に渡し -> MCP 経由で実行し -> 結果を報告します。
16 """
17
18 def on_created(self, event):
19 if not event.src_path.endswith(".md"):
20 return
21
22 prompt_file = Path(event.src_path)
23 prompt = prompt_file.read_text()
24
25 print(f"[Inbox] 新しいプロンプト: {prompt_file.name}")
26 self.execute_prompt(prompt, prompt_file.stem)
27
28 def execute_prompt(self, prompt: str, project_name: str):
29 response = requests.post(OLLAMA_URL, json={
30 "model": "qwen2.5-coder:32b",
31 "prompt": f"""あなたはシステムビルダーです。
32 このシステムを構築してください:{prompt}
33
34 以下の JSON プランを出力してください:
35 {{
36 "project_dir": "相対パス",
37 "files": [
38 {{"path": "相対パス", "content": "ファイル内容"}}
39 ],
40 "commands": ["npm install", "など"],
41 "summary": "構築された内容の概要"
42 }}""",
43 "stream": False
44 })
45
46 plan = json.loads(response.json()["response"])
47 project_dir = PROJECTS_DIR / plan["project_dir"]
48 project_dir.mkdir(parents=True, exist_ok=True)
49
50 for file_spec in plan["files"]:
51 file_path = project_dir / file_spec["path"]
52 file_path.parent.mkdir(parents=True, exist_ok=True)
53 file_path.write_text(file_spec["content"])
54 print(f"[Build] 作成しました: {file_path}")
55
56 result_file = OBSIDIAN_INBOX / f"{project_name}-result.md"
57 result_file.write_text(
58 f"# ビルド完了: {project_name}\n\n"
59 f"**場所:** {project_dir}\n\n"
60 f"**概要:** {plan['summary']}\n\n"
61 f"**作成されたファイル数:** {len(plan['files'])}\n"
62 )
63 print(f"[完了] 結果を Obsidian に書き込みました")
64
65if __name__ == "__main__":
66 OBSIDIAN_INBOX.mkdir(exist_ok=True)
67 observer = Observer()
68 observer.schedule(InboxWatcher(), str(OBSIDIAN_INBOX), recursive=False)
69 observer.start()
70 print(f"[監視中] {OBSIDIAN_INBOX}")
71
72 try:
73 while True:
74 import time; time.sleep(1)
75 except KeyboardInterrupt:
76 observer.stop()
77 observer.join()

ビルドプロンプトを書いた .md ファイルを Obsidian の AI-Inbox にドロップします。ブリッジがそれを拾い、ローカルモデルにルーティングし、Projects フォルダにシステムを構築し、完了通知を Obsidian に書き戻します。

5. 完全なワークフロー - アイデアからデプロイされたシステムへ

text
1ステップ 1 - 入力
2Obsidian の AI パネルで、次のように書きます:
3「暗号通貨統合と月次予算追跡機能を備えた
4個人財務システム」
5生成ボタンを押します。
6
7ステップ 2 - コンテキストのアセンブル
8Smart Connections プラグインが Vault をスキャンします。
9過去 3 ヶ月分の財務関連ノートを見つけます。
10それらをコンテキストとして Claude API に送信します。
11
12ステップ 3 - アーキテクチャ設計
13Claude(Opus 4.8)がシステムを設計します:
14- データベーススキーマ
15- UI コンポーネント
16- API 統合
17- ファイル構造
18
19ステップ 4 - ビルド
20Claude(Sonnet 5)が MCP 経由で実装します:
21- ~/Projects/finance-tracker/ を作成
22- 依存関係をインストール
23- すべてのファイルを書き込み
24- localhost:3000 で開発サーバーを起動
25
26ステップ 5 - 結果
27Obsidian がフォルダを作成:Finance System/
28内部:リンクされたダッシュボード、設定ノート、
29そして動作中のアプリケーションへの直接リンク。

ステップ 1 から動作するアプリケーションまでの総時間:4 〜 12 分。

これが示す変化

これは、コードを書くためのより速い方法ではありません。

それは、アイデアと実行の間の、異なる関係です。

構築できるものの制約は、かつては技術的なスキルと時間でした。非開発者は CRM を構築できませんでした。ひとりの開発者が同時に 5 つのシステムを構築することはできませんでした。チームが数週間ではなく数時間でリリースすることはできませんでした。

これら 3 つの制約はすべてなくなりました。

新しい制約は思考の明瞭さです。つまり、自分が何を必要としているかを正確に記述し、良い出力とはどのようなものかを理解し、それを反復的に改善する能力です。それは技術スキルではなく、思考スキルです。

Generative App Architecture は開発者を不要にするものではありません。それは、システムとして考える能力、つまり構築する前に自分に何が必要かを推論する能力を、それを実装するコードを書く能力よりも、劇的に価値のあるものにします。

スタックはここにあります。モデルは能力を備えています。残された唯一の変数は、あなたがこれを使って構築しているのか、それを使っている人々について読んでいるだけなのか、ということです。

この記事は、2026 年 7 月時点の Claude、Obsidian、MCP で利用可能な機能について説明しています。具体的なプラグインのバージョンや API 設定は変更される可能性があります。実装前に必ず最新のドキュメントを確認してください。

お読みいただきありがとうございました。

YouMindで再制作

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
クリエイターのために

あなたの Markdown をきれいな 𝕏 記事に

自分の長文を投稿するとき、画像・表・コードブロックを 𝕏 向けに整形するのは手間がかかります。YouMind は Markdown 全体を、そのまま投稿できるきれいな 𝕏 記事に変換します。

Markdown → 𝕏 を試す

解読すべきパターンをもっと

最近のバイラル記事

バイラル記事をもっと見る