AI Agent Architecture Planner — Design Your Agent System

:root{–bg:#0f1117;–surface:#1a1d27;–border:#2a2d3a;–accent:#6366f1;–accent-light:#818cf8;–text:#e2e8f0;–muted:#94a3b8;–green:#34d399;–yellow:#fbbf24}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,’Segoe UI‘,Roboto,sans-serif;background:var(–bg);color:var(–text);line-height:1.6;padding:2rem 1rem}
.container{max-width:860px;margin:0 auto}
h1{font-size:1.8rem;font-weight:800;margin-bottom:0.3rem;background:linear-gradient(135deg,var(–accent-light),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(–muted);margin-bottom:2rem;font-size:0.95rem}
.section{background:var(–surface);border:1px solid var(–border);border-radius:10px;padding:1.5rem;margin-bottom:1.2rem}
.section-title{font-size:1.05rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:0.5rem}
.section-title .icon{font-size:1.3rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:550px){.row{grid-template-columns:1fr}}
label{display:block;font-size:0.82rem;font-weight:600;color:var(–muted);margin-bottom:0.35rem;text-transform:uppercase;letter-spacing:0.04em}
select{width:100%;padding:0.65rem 0.9rem;background:var(–bg);border:1px solid var(–border);border-radius:6px;color:var(–text);font-size:0.92rem}
select:focus{outline:none;border-color:var(–accent)}
.checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
@media(max-width:550px){.checklist-grid{grid-template-columns:1fr}}
.check-item{display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0;font-size:0.9rem}
.check-item input[type=checkbox]{accent-color:var(–accent);width:16px;height:16px;cursor:pointer}
.arch-diagram{background:var(–code-bg);border:1px solid var(–border);border-radius:10px;padding:1.5rem;margin:1rem 0;font-family:’SF Mono‘,’Fira Code‘,monospace;font-size:0.82rem;line-height:1.7;white-space:pre-wrap;color:var(–text);overflow-x:auto}
.arch-diagram .comment{color:var(–muted);font-style:italic}
.arch-diagram .keyword{color:var(–accent-light);font-weight:700}
.arch-diagram .component{color:var(–green)}
.arch-diagram .arrow{color:var(–yellow)}
.result{background:var(–surface);border:1px solid var(–green);border-radius:10px;padding:1.5rem;margin-top:1.5rem}
.result-title{font-size:1.1rem;font-weight:700;color:var(–green);margin-bottom:0.8rem}
.result-section{margin-bottom:1rem}
.result-section h4{font-size:0.95rem;font-weight:600;color:var(–accent-light);margin-bottom:0.4rem}
.result-section p,.result-section li{font-size:0.9rem;color:var(–text)}
.result-section ul{margin:0.3rem 0 0.8rem 1.2rem}
.result-section li{margin-bottom:0.2rem}
.tech-tag{display:inline-block;background:rgba(99,102,241,0.15);color:var(–accent-light);padding:0.15rem 0.5rem;border-radius:4px;font-size:0.8rem;font-weight:600;margin:0.15rem}
.generate-btn{background:linear-gradient(135deg,var(–accent),#4f46e5);color:#fff;border:none;padding:0.8rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;width:100%;margin-top:1rem;transition:opacity 0.2s}
.generate-btn:hover{opacity:0.9}

function getChecked(id) { return document.getElementById(id).checked; }
function getVal(id) { return document.getElementById(id).value; }

function generate() {
const purpose = getVal(‚purpose‘);
const complexity = getVal(‚complexity‘);
const pattern = getVal(‚pattern‘);
const deploy = getVal(‚deploy‘);

const mems = [];
if (getChecked(‚mem_short‘)) mems.push(‚Short-term‘);
if (getChecked(‚mem_long‘)) mems.push(‚Vector DB‘);
if (getChecked(‚mem_episodic‘)) mems.push(‚Episodic‘);
if (getChecked(‚mem_rag‘)) mems.push(‚RAG‘);
if (getChecked(‚mem_graph‘)) mems.push(‚Knowledge Graph‘);
if (getChecked(‚mem_shared‘)) mems.push(‚Shared‘);

const tools = [];
if (getChecked(‚tool_search‘)) tools.push(‚Search‘);
if (getChecked(‚tool_code‘)) tools.push(‚Code Exec‘);
if (getChecked(‚tool_db‘)) tools.push(‚Database‘);
if (getChecked(‚tool_api‘)) tools.push(‚APIs‘);
if (getChecked(‚tool_file‘)) tools.push(‚Files‘);
if (getChecked(‚tool_email‘)) tools.push(‚Messaging‘);
if (getChecked(‚tool_human‘)) tools.push(‚Human Review‘);
if (getChecked(‚tool_browser‘)) tools.push(‚Browser‘);

const safety = [];
if (getChecked(’safe_input‘)) safety.push(‚Input Validation‘);
if (getChecked(’safe_output‘)) safety.push(‚Output Filtering‘);
if (getChecked(’safe_rate‘)) safety.push(‚Rate Limiting‘);
if (getChecked(’safe_budget‘)) safety.push(‚Budget Controls‘);
if (getChecked(’safe_audit‘)) safety.push(‚Audit Logging‘);
if (getChecked(’safe_rollback‘)) safety.push(‚Rollback‘);

// Architecture diagram
let diagram = “;
if (pattern === ‚react‘ || pattern === ‚reflexion‘) {
diagram = `# Single-Agent ${pattern === ‚reflexion‘ ? ‚Reflexion‘ : ‚ReAct‘} Architecture

┌─────────────┐
│ User │
└──────┬──────┘
│
▼
┌─────────────┐ ┌──────────────┐
│ Agent │────▶│ Memory │
│ Core │ │ ${mems.length > 0 ? mems[0] : ‚Context‘} │
└──────┬──────┘ └──────────────┘
│
▼
┌─────────────┐ ┌──────────────┐
│ LLM │────▶│ Tools │
│ Engine │ │ ${tools.length > 0 ? tools.slice(0,3).join(‚ + ‚) : ‚None‘} │
└──────┬──────┘ └──────────────┘
│${pattern === ‚reflexion‘ ? ’n ▼n┌─────────────┐n│ Self-Critique│n│ Loop │n└──────┬──────┘n │‘ : “}
▼
┌─────────────┐
│ Guardrails │
│ ${safety.length > 0 ? safety[0] : ‚Basic‘} │
└──────┬──────┘
│
▼
┌─────────────┐
│ Response │
└─────────────┘`;
} else if (pattern === ‚hierarchical‘ || pattern === ‚crew‘) {
diagram = `# ${pattern === ‚crew‘ ? ‚Crew (Role-Based)‘ : ‚Hierarchical‘} Multi-Agent Architecture

┌─────────────┐
│ User │
└──────┬──────┘
│
▼
┌─────────────────────────────────┐
│ ${pattern === ‚crew‘ ? ‚Crew Manager‘ : ‚Manager Agent‘} │
│ (Task Decomposition) │
└──────┬──────────┬───────────┬───┘
│ │ │
▼ ▼ ▼
┌──────────┐┌──────────┐┌──────────┐
│ Worker 1 ││ Worker 2 ││ Worker 3 │
│ ${tools[0]||’Search‘} ││ ${tools[1]||’Code‘} ││ ${tools[2]||’Analysis‘} │
└────┬─────┘└────┬─────┘└────┬─────┘
│ │ │
└─────────┬─┴───────────┘
▼
┌─────────────────────────────────┐
│ Synthesizer / Aggregator │
└─────────────────────────────────┘`;
} else {
diagram = `# ${pattern === ‚graph‘ ? ‚Graph-Based (LangGraph)‘ : ‚Plan-and-Execute‘} Architecture

┌─────────────┐
│ User │
└──────┬──────┘
│
▼
┌─────────────┐ ┌──────────────┐
│ Planner │────▶│ State │
│ Node │ │ Graph │
└──────┬──────┘ └──────────────┘
│
▼
┌─────────────────────────────────┐
│ Execution Nodes │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │Step1│▶│Step2│▶│Step3│ │
│ └─────┘ └─────┘ └─────┘ │
└──────┬──────────────────────────┘
│
▼
┌─────────────┐
│ Output │
└─────────────┘`;
}

// Tech stack recommendations
const stacks = {
react: { framework: ‚LangChain / LlamaIndex‘, memory: ‚LangMem / Mem0‘, tools: ‚LangChain Tools / Function Calling‘, hosting: ‚FastAPI + Docker‘ },
plan: { framework: ‚LangGraph / CrewAI‘, memory: ‚Redis + Vector DB‘, tools: ‚Custom tool registry‘, hosting: ‚Kubernetes / ECS‘ },
reflexion: { framework: ‚Custom loop + LangChain‘, memory: ‚Episodic memory store‘, tools: ‚Self-evaluation tools‘, hosting: ‚FastAPI + Docker‘ },
hierarchical: { framework: ‚LangGraph / AutoGen‘, memory: ‚Shared state store (Redis)‘, tools: ‚Agent-to-agent messaging‘, hosting: ‚Kubernetes‘ },
crew: { framework: ‚CrewAI‘, memory: ‚Mem0 / Shared context‘, tools: ‚CrewAI Tools‘, hosting: ‚Docker Compose‘ },
graph: { framework: ‚LangGraph‘, memory: ‚LangGraph Store (SQLite/Postgres)‘, tools: ‚Typed tools with validation‘, hosting: ‚LangGraph Cloud / Self-hosted‘ },
};

const stack = stacks[pattern] || stacks.react;

const purposeLabels = {
assistant: ‚Personal Assistant‘, research: ‚Research & Analysis‘, coding: ‚Coding & Development‘,
support: ‚Customer Support‘, automation: ‚Task Automation‘, multi: ‚Multi-Agent Orchestration‘
};

document.getElementById(‚archContent‘).innerHTML = `

`;

document.getElementById(‚result‘).style.display = ‚block‘;
document.getElementById(‚result‘).scrollIntoView({ behavior: ’smooth‘ });
}