Add proof-of-concept and before/after sections to philosophy page
- Added "Proof of Concept" section showcasing Orchestrated Discussions as a real-world example of the composable system (21 tools, 0 deps) - Added "Before vs After" code comparison showing traditional Python approach vs CmdForge pipes/composition - Visual flow diagram showing how tools chain together in practice Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
97be7e7b2d
commit
15943f251c
|
|
@ -443,6 +443,183 @@ flowchart LR
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Proof of Concept: Orchestrated Discussions -->
|
||||||
|
<div class="py-16 bg-white">
|
||||||
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center mb-4">Proof of Concept</h2>
|
||||||
|
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
|
||||||
|
Orchestrated Discussions: A complete multi-agent AI system built entirely from CmdForge tools.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-2xl p-8 border border-purple-100">
|
||||||
|
<div class="flex flex-col lg:flex-row gap-8 items-center">
|
||||||
|
<!-- Left: Description -->
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-12 h-12 bg-purple-600 rounded-xl flex items-center justify-center mr-4">
|
||||||
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-xl font-bold text-gray-900">Orchestrated Discussions</h3>
|
||||||
|
<p class="text-sm text-gray-500">21 tools working together</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-gray-600 mb-4">
|
||||||
|
Multiple AI personas debate topics, vote on outcomes, and synthesize conclusions.
|
||||||
|
The entire system is built from small, focused CmdForge tools that call each other.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-3 mb-6">
|
||||||
|
<div class="bg-white rounded-lg p-3 border border-purple-100">
|
||||||
|
<div class="text-2xl font-bold text-purple-600">21</div>
|
||||||
|
<div class="text-xs text-gray-500">Composable Tools</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-lg p-3 border border-purple-100">
|
||||||
|
<div class="text-2xl font-bold text-purple-600">0</div>
|
||||||
|
<div class="text-xs text-gray-500">External Dependencies</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="{{ url_for('web.collections') }}"
|
||||||
|
class="inline-flex items-center text-purple-600 hover:text-purple-800 font-medium">
|
||||||
|
View Collection
|
||||||
|
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Tool Flow -->
|
||||||
|
<div class="flex-1 w-full">
|
||||||
|
<div class="bg-white rounded-xl p-4 border border-purple-200">
|
||||||
|
<div class="text-xs text-gray-500 mb-3 text-center">Example flow: Multi-agent debate</div>
|
||||||
|
<div class="space-y-2 font-mono text-xs">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-4 h-4 bg-purple-500 rounded mr-2 flex-shrink-0"></span>
|
||||||
|
<span class="text-gray-700">discussion-start</span>
|
||||||
|
<span class="text-gray-400 ml-auto">→ topic</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center pl-6">
|
||||||
|
<span class="w-4 h-4 bg-indigo-500 rounded mr-2 flex-shrink-0"></span>
|
||||||
|
<span class="text-gray-700">persona-respond</span>
|
||||||
|
<span class="text-gray-400 ml-auto">× 5</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center pl-6">
|
||||||
|
<span class="w-4 h-4 bg-cyan-500 rounded mr-2 flex-shrink-0"></span>
|
||||||
|
<span class="text-gray-700">vote-collect</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center pl-6">
|
||||||
|
<span class="w-4 h-4 bg-green-500 rounded mr-2 flex-shrink-0"></span>
|
||||||
|
<span class="text-gray-700">consensus-check</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="w-4 h-4 bg-amber-500 rounded mr-2 flex-shrink-0"></span>
|
||||||
|
<span class="text-gray-700">discussion-summarize</span>
|
||||||
|
<span class="text-gray-400 ml-auto">→ output</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-center text-gray-500 text-sm mt-6">
|
||||||
|
This is what "composable capabilities" looks like in practice.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Before vs After: Code Comparison -->
|
||||||
|
<div class="py-16 bg-gray-50">
|
||||||
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center mb-4">Before vs After</h2>
|
||||||
|
<p class="text-center text-gray-600 mb-12">
|
||||||
|
The same task: summarize a document and email the key points.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
<!-- Before: Traditional -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<span class="text-red-600 font-bold text-sm">1</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900">Traditional Approach</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-900 rounded-lg p-4 font-mono text-xs overflow-x-auto">
|
||||||
|
<pre class="text-gray-300"><span class="text-gray-500"># Step 1: Install dependencies</span>
|
||||||
|
<span class="text-green-400">pip install openai python-dotenv smtplib</span>
|
||||||
|
|
||||||
|
<span class="text-gray-500"># Step 2: Write the code (40+ lines)</span>
|
||||||
|
<span class="text-blue-400">import</span> os
|
||||||
|
<span class="text-blue-400">import</span> smtplib
|
||||||
|
<span class="text-blue-400">from</span> openai <span class="text-blue-400">import</span> OpenAI
|
||||||
|
<span class="text-blue-400">from</span> email.mime.text <span class="text-blue-400">import</span> MIMEText
|
||||||
|
|
||||||
|
client = OpenAI(api_key=os.getenv(<span class="text-yellow-400">"OPENAI_KEY"</span>))
|
||||||
|
|
||||||
|
<span class="text-blue-400">def</span> <span class="text-cyan-400">summarize</span>(text):
|
||||||
|
response = client.chat.completions.create(
|
||||||
|
model=<span class="text-yellow-400">"gpt-4"</span>,
|
||||||
|
messages=[{<span class="text-yellow-400">"role"</span>: <span class="text-yellow-400">"user"</span>,
|
||||||
|
<span class="text-yellow-400">"content"</span>: <span class="text-yellow-400">f"Summarize: {text}"</span>}]
|
||||||
|
)
|
||||||
|
<span class="text-blue-400">return</span> response.choices[0].message.content
|
||||||
|
|
||||||
|
<span class="text-blue-400">def</span> <span class="text-cyan-400">send_email</span>(to, subject, body):
|
||||||
|
msg = MIMEText(body)
|
||||||
|
msg[<span class="text-yellow-400">'Subject'</span>] = subject
|
||||||
|
msg[<span class="text-yellow-400">'To'</span>] = to
|
||||||
|
<span class="text-gray-500"># ... 15 more lines of SMTP setup</span>
|
||||||
|
|
||||||
|
<span class="text-gray-500"># Step 3: Handle errors, env vars, etc.</span></pre>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 flex items-center text-sm text-red-600">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
40+ lines, API keys, dependencies, error handling
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- After: CmdForge -->
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<span class="text-green-600 font-bold text-sm">2</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-semibold text-gray-900">CmdForge Approach</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-900 rounded-lg p-4 font-mono text-xs overflow-x-auto">
|
||||||
|
<pre class="text-gray-300"><span class="text-gray-500"># Option A: Unix pipes</span>
|
||||||
|
<span class="text-green-400">cat document.txt | summarize | send-email</span>
|
||||||
|
|
||||||
|
<span class="text-gray-500"># Option B: Compose into a new tool</span>
|
||||||
|
<span class="text-yellow-400">name:</span> doc-to-email
|
||||||
|
<span class="text-yellow-400">steps:</span>
|
||||||
|
- <span class="text-yellow-400">tool:</span> summarize
|
||||||
|
<span class="text-yellow-400">output_var:</span> summary
|
||||||
|
|
||||||
|
- <span class="text-yellow-400">tool:</span> send-email
|
||||||
|
<span class="text-yellow-400">input_template:</span> <span class="text-green-400">"{summary}"</span>
|
||||||
|
|
||||||
|
<span class="text-gray-500"># Now use it:</span>
|
||||||
|
<span class="text-green-400">cat document.txt | doc-to-email</span></pre>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 flex items-center text-sm text-green-600">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
6 lines. Reusable. Provider-agnostic. Shareable.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- What CmdForge Is / Isn't -->
|
<!-- What CmdForge Is / Isn't -->
|
||||||
<div class="py-16">
|
<div class="py-16">
|
||||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue