Add Philosophy page and improve documentation
- Add /philosophy page explaining the paradigm shift from libraries to capabilities - Visual diagrams comparing traditional vs CmdForge approach (bin of circuits vs organized workshop) - Composition flow diagram showing tools chaining together - Link from About page and homepage - Update CLAUDE.md with accurate field names (output_schema not structured_output) - Add Provider Install dialog to GUI dialogs list Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
1087b65c50
commit
468a999b80
26
CLAUDE.md
26
CLAUDE.md
|
|
@ -56,7 +56,7 @@ python -m cmdforge.cli # Alternative CLI invocation
|
||||||
- **gui/**: PySide6 desktop GUI
|
- **gui/**: PySide6 desktop GUI
|
||||||
- **main_window.py**: Main application window with sidebar navigation
|
- **main_window.py**: Main application window with sidebar navigation
|
||||||
- **pages/**: Welcome page, Tools page, Tool Builder, Registry browser, Collections page, Providers management, Profiles
|
- **pages/**: Welcome page, Tools page, Tool Builder, Registry browser, Collections page, Providers management, Profiles
|
||||||
- **dialogs/**: Step editors (prompt/code/tool), Argument editor, Provider dialog, Connect/Publish dialogs, Test Step dialog, Settings dialog, System Dep dialog, Help dialogs, Review/Issue dialogs
|
- **dialogs/**: Step editors (prompt/code/tool), Argument editor, Provider dialog, Provider Install dialog, Connect/Publish dialogs, Test Step dialog, Settings dialog, System Dep dialog, Help dialogs, Review/Issue dialogs
|
||||||
- **widgets/**: Flow graph visualization (`flow_graph.py`), Icon utilities (`icons.py`)
|
- **widgets/**: Flow graph visualization (`flow_graph.py`), Icon utilities (`icons.py`)
|
||||||
|
|
||||||
### Key Paths
|
### Key Paths
|
||||||
|
|
@ -73,7 +73,7 @@ python -m cmdforge.cli # Alternative CLI invocation
|
||||||
Tools are YAML configs with:
|
Tools are YAML configs with:
|
||||||
- `name`, `description`, `category`
|
- `name`, `description`, `category`
|
||||||
- `arguments`: Custom flags with defaults (e.g., `--max` → `{max}`)
|
- `arguments`: Custom flags with defaults (e.g., `--max` → `{max}`)
|
||||||
- `steps`: Ordered list of `prompt` or `code` steps
|
- `steps`: Ordered list of `prompt`, `code`, or `tool` steps
|
||||||
- `output`: Template for final output (e.g., `"{response}"`)
|
- `output`: Template for final output (e.g., `"{response}"`)
|
||||||
|
|
||||||
### Step Types
|
### Step Types
|
||||||
|
|
@ -81,9 +81,11 @@ Tools are YAML configs with:
|
||||||
1. **Prompt Step**: Calls AI provider with template, stores result in `output_var`
|
1. **Prompt Step**: Calls AI provider with template, stores result in `output_var`
|
||||||
- `profile`: AI persona (system prompt prefix)
|
- `profile`: AI persona (system prompt prefix)
|
||||||
- `strip_fences`: Remove markdown code fences from output
|
- `strip_fences`: Remove markdown code fences from output
|
||||||
- `structured_output`: JSON schema for validated structured responses
|
- `output_schema`: JSON schema for validated structured responses
|
||||||
|
- `max_tokens`: Max output tokens (provider-dependent, e.g., 4096 for haiku)
|
||||||
|
- `plain_text`: Bypass structured output enforcement
|
||||||
2. **Code Step**: Executes Python code via `exec()`, captures specified variables (comma-separated for multiple outputs)
|
2. **Code Step**: Executes Python code via `exec()`, captures specified variables (comma-separated for multiple outputs)
|
||||||
3. **Tool Step**: Calls another tool (meta-tools), supports `args` dict and `provider` override. Dependencies resolved via `resolver.py`
|
3. **Tool Step**: Calls another tool (meta-tools), supports `input_template`, `args` dict, and `provider` override. Dependencies resolved via `resolver.py`
|
||||||
|
|
||||||
### Variable Flow
|
### Variable Flow
|
||||||
|
|
||||||
|
|
@ -104,12 +106,28 @@ Providers are CLI tools that accept prompts via stdin and output to stdout. Defi
|
||||||
providers:
|
providers:
|
||||||
- name: claude
|
- name: claude
|
||||||
command: "claude -p"
|
command: "claude -p"
|
||||||
|
description: "Anthropic Claude"
|
||||||
|
fallback: claude-haiku # Optional: try this provider if primary fails
|
||||||
- name: mock
|
- name: mock
|
||||||
command: "echo '[MOCK]'"
|
command: "echo '[MOCK]'"
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Provider fields:
|
||||||
|
- `name`: Provider identifier used in tool configs
|
||||||
|
- `command`: Shell command to invoke (prompt sent via stdin)
|
||||||
|
- `description`: Optional human-readable description
|
||||||
|
- `fallback`: Optional provider to try if this one fails (prevents infinite loops)
|
||||||
|
|
||||||
The `mock` provider is built-in for testing without API calls. Use `--provider mock` or `--dry-run` flags when testing tools.
|
The `mock` provider is built-in for testing without API calls. Use `--provider mock` or `--dry-run` flags when testing tools.
|
||||||
|
|
||||||
|
Provider CLI commands:
|
||||||
|
- `cmdforge providers list` - List all providers and their status
|
||||||
|
- `cmdforge providers add <name> <command>` - Add/update a provider
|
||||||
|
- `cmdforge providers remove <name>` - Remove a provider
|
||||||
|
- `cmdforge providers test <name>` - Test a provider
|
||||||
|
- `cmdforge providers install` - Interactive guide to install AI providers
|
||||||
|
- `cmdforge providers for-tools <tool> [tools...]` - List providers used by tools (with `--warm` to pre-load local models)
|
||||||
|
|
||||||
## Web UI & Registry
|
## Web UI & Registry
|
||||||
|
|
||||||
CmdForge includes a web interface and tool registry:
|
CmdForge includes a web interface and tool registry:
|
||||||
|
|
|
||||||
|
|
@ -869,6 +869,11 @@ def about():
|
||||||
return render_template("pages/about.html")
|
return render_template("pages/about.html")
|
||||||
|
|
||||||
|
|
||||||
|
@web_bp.route("/philosophy", endpoint="philosophy")
|
||||||
|
def philosophy():
|
||||||
|
return render_template("pages/philosophy.html")
|
||||||
|
|
||||||
|
|
||||||
@web_bp.route("/donate", endpoint="donate")
|
@web_bp.route("/donate", endpoint="donate")
|
||||||
def donate():
|
def donate():
|
||||||
return render_template("pages/donate.html")
|
return render_template("pages/donate.html")
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,13 @@
|
||||||
<p class="mt-6 text-xl text-gray-600">
|
<p class="mt-6 text-xl text-gray-600">
|
||||||
An open-source platform for building and sharing AI-powered command-line tools.
|
An open-source platform for building and sharing AI-powered command-line tools.
|
||||||
</p>
|
</p>
|
||||||
|
<a href="{{ url_for('web.philosophy') }}"
|
||||||
|
class="mt-6 inline-flex items-center text-indigo-600 hover:text-indigo-800 font-medium">
|
||||||
|
Read our philosophy: From Libraries to Capabilities
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
<!-- Mission -->
|
<!-- Mission -->
|
||||||
|
|
|
||||||
|
|
@ -49,9 +49,14 @@
|
||||||
<!-- Three Pillars Section -->
|
<!-- Three Pillars Section -->
|
||||||
<section class="py-16 bg-gray-50">
|
<section class="py-16 bg-gray-50">
|
||||||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<h2 class="text-3xl font-bold text-gray-900 text-center mb-12">
|
<h2 class="text-3xl font-bold text-gray-900 text-center mb-4">
|
||||||
Why CmdForge?
|
Why CmdForge?
|
||||||
</h2>
|
</h2>
|
||||||
|
<p class="text-center text-gray-600 mb-12">
|
||||||
|
<a href="{{ url_for('web.philosophy') }}" class="text-indigo-600 hover:text-indigo-800">
|
||||||
|
Read our philosophy →
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
<!-- Pillar 1: Easy -->
|
<!-- Pillar 1: Easy -->
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,418 @@
|
||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block title %}Philosophy - CmdForge{% endblock %}
|
||||||
|
|
||||||
|
{% block meta_description %}The philosophy behind CmdForge: from fragmented libraries to composable capabilities. Learn why we're building a new way to create software.{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<div class="bg-white">
|
||||||
|
<!-- Hero -->
|
||||||
|
<div class="bg-gradient-to-b from-slate-900 to-slate-800 text-white py-20">
|
||||||
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight">
|
||||||
|
From Libraries to Capabilities
|
||||||
|
</h1>
|
||||||
|
<p class="mt-6 text-xl text-slate-300 max-w-2xl mx-auto">
|
||||||
|
Software development is changing. CmdForge is our attempt to make it simpler,
|
||||||
|
more composable, and accessible to everyone.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Story -->
|
||||||
|
<div class="py-16">
|
||||||
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 mb-8">The Journey</h2>
|
||||||
|
<div class="prose prose-lg prose-indigo max-w-none">
|
||||||
|
<p>
|
||||||
|
I first learned to code on a Commodore VIC-20, writing BASIC before DOS existed.
|
||||||
|
I've watched computing evolve through every major shift: from single programs to
|
||||||
|
functions, from functions to libraries, from libraries to frameworks, from
|
||||||
|
frameworks to microservices.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Each evolution promised to make things easier. And in many ways, they did. But
|
||||||
|
something else happened too: <strong>fragmentation</strong>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Open source gave us everything we could ever want. Thousands of contributors
|
||||||
|
building solutions to every problem imaginable. But finding the right solution
|
||||||
|
became the problem itself.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Problem (Visual) -->
|
||||||
|
<div class="bg-gray-50 py-16">
|
||||||
|
<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-12">The Problem</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||||
|
<!-- Left: The Old Way -->
|
||||||
|
<div class="bg-white rounded-xl border-2 border-red-200 p-8">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900">Traditional Development</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Visual: Messy bin of circuits -->
|
||||||
|
<div class="bg-gray-100 rounded-lg p-6 mb-4">
|
||||||
|
<svg viewBox="0 0 200 120" class="w-full h-32">
|
||||||
|
<!-- Messy tangled wires -->
|
||||||
|
<path d="M20,60 Q50,20 80,60 T140,60 T180,40" stroke="#94a3b8" stroke-width="2" fill="none"/>
|
||||||
|
<path d="M30,40 Q60,80 100,30 T160,70" stroke="#64748b" stroke-width="2" fill="none"/>
|
||||||
|
<path d="M40,80 Q80,30 120,80 T170,50" stroke="#475569" stroke-width="2" fill="none"/>
|
||||||
|
<path d="M25,50 Q70,90 110,40 T150,80" stroke="#94a3b8" stroke-width="2" fill="none"/>
|
||||||
|
<!-- Scattered boxes (libraries) -->
|
||||||
|
<rect x="15" y="45" width="20" height="15" fill="#ef4444" rx="2" transform="rotate(-15 25 52)"/>
|
||||||
|
<rect x="55" y="55" width="25" height="12" fill="#f97316" rx="2" transform="rotate(10 67 61)"/>
|
||||||
|
<rect x="95" y="35" width="18" height="18" fill="#eab308" rx="2" transform="rotate(-5 104 44)"/>
|
||||||
|
<rect x="125" y="60" width="22" height="14" fill="#22c55e" rx="2" transform="rotate(20 136 67)"/>
|
||||||
|
<rect x="160" y="40" width="15" height="20" fill="#3b82f6" rx="2" transform="rotate(-10 167 50)"/>
|
||||||
|
<rect x="45" y="30" width="20" height="12" fill="#8b5cf6" rx="2" transform="rotate(25 55 36)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-gray-600 italic text-center mb-4">
|
||||||
|
"Like digging through a giant bin of tangled circuits..."
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul class="space-y-2 text-gray-600">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
Thousands of libraries to evaluate
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
Different philosophies and coding styles
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
Version conflicts and dependency hell
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-red-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
Reinventing the same solutions
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: The CmdForge Way -->
|
||||||
|
<div class="bg-white rounded-xl border-2 border-green-200 p-8">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
|
||||||
|
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900">The CmdForge Way</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Visual: Organized workshop -->
|
||||||
|
<div class="bg-gray-100 rounded-lg p-6 mb-4">
|
||||||
|
<svg viewBox="0 0 200 120" class="w-full h-32">
|
||||||
|
<!-- Shelves -->
|
||||||
|
<line x1="10" y1="35" x2="190" y2="35" stroke="#d1d5db" stroke-width="3"/>
|
||||||
|
<line x1="10" y1="70" x2="190" y2="70" stroke="#d1d5db" stroke-width="3"/>
|
||||||
|
<line x1="10" y1="105" x2="190" y2="105" stroke="#d1d5db" stroke-width="3"/>
|
||||||
|
<!-- Organized tools on shelves -->
|
||||||
|
<!-- Top shelf -->
|
||||||
|
<rect x="15" y="20" width="25" height="14" fill="#6366f1" rx="2"/>
|
||||||
|
<rect x="45" y="20" width="25" height="14" fill="#6366f1" rx="2"/>
|
||||||
|
<rect x="75" y="20" width="25" height="14" fill="#6366f1" rx="2"/>
|
||||||
|
<rect x="105" y="20" width="25" height="14" fill="#8b5cf6" rx="2"/>
|
||||||
|
<rect x="135" y="20" width="25" height="14" fill="#8b5cf6" rx="2"/>
|
||||||
|
<rect x="165" y="20" width="25" height="14" fill="#8b5cf6" rx="2"/>
|
||||||
|
<!-- Middle shelf -->
|
||||||
|
<rect x="15" y="55" width="25" height="14" fill="#06b6d4" rx="2"/>
|
||||||
|
<rect x="45" y="55" width="25" height="14" fill="#06b6d4" rx="2"/>
|
||||||
|
<rect x="75" y="55" width="25" height="14" fill="#06b6d4" rx="2"/>
|
||||||
|
<rect x="105" y="55" width="25" height="14" fill="#22c55e" rx="2"/>
|
||||||
|
<rect x="135" y="55" width="25" height="14" fill="#22c55e" rx="2"/>
|
||||||
|
<rect x="165" y="55" width="25" height="14" fill="#22c55e" rx="2"/>
|
||||||
|
<!-- Bottom shelf -->
|
||||||
|
<rect x="15" y="90" width="25" height="14" fill="#f59e0b" rx="2"/>
|
||||||
|
<rect x="45" y="90" width="25" height="14" fill="#f59e0b" rx="2"/>
|
||||||
|
<rect x="75" y="90" width="25" height="14" fill="#f59e0b" rx="2"/>
|
||||||
|
<rect x="105" y="90" width="25" height="14" fill="#ef4444" rx="2"/>
|
||||||
|
<rect x="135" y="90" width="25" height="14" fill="#ef4444" rx="2"/>
|
||||||
|
<rect x="165" y="90" width="25" height="14" fill="#ef4444" rx="2"/>
|
||||||
|
<!-- Labels -->
|
||||||
|
<text x="55" y="12" font-size="8" fill="#6b7280" text-anchor="middle">Text</text>
|
||||||
|
<text x="145" y="12" font-size="8" fill="#6b7280" text-anchor="middle">Developer</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-gray-600 italic text-center mb-4">
|
||||||
|
"Like an organized workshop with a knowledgeable shopkeeper..."
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul class="space-y-2 text-gray-600">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
Every tool has a clear purpose
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
AI helps you find what you need
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
Tools combine instantly
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<svg class="w-5 h-5 text-green-500 mr-2 mt-0.5 flex-shrink-0" 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>
|
||||||
|
Shared globally, improved together
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Insight -->
|
||||||
|
<div class="py-16">
|
||||||
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 mb-8">The Insight</h2>
|
||||||
|
<div class="prose prose-lg prose-indigo max-w-none">
|
||||||
|
<p>
|
||||||
|
What if we stopped thinking about <em>libraries</em> and started thinking
|
||||||
|
about <em>capabilities</em>?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
A library is code you integrate. A capability is something you <strong>ask for</strong>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Instead of searching through npm, pip, or crates.io for the right package,
|
||||||
|
what if you could just describe what you need?
|
||||||
|
</p>
|
||||||
|
<blockquote class="border-l-4 border-indigo-500 pl-4 italic">
|
||||||
|
"I need something that extracts key points from meeting transcripts."
|
||||||
|
</blockquote>
|
||||||
|
<p>
|
||||||
|
And the system either finds an existing tool that does exactly that, or
|
||||||
|
creates one for you—and shares it back so the next person doesn't have to ask.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- How It Works -->
|
||||||
|
<div class="bg-slate-900 text-white py-16">
|
||||||
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">How It Works</h2>
|
||||||
|
|
||||||
|
<!-- Composition Diagram -->
|
||||||
|
<div class="bg-slate-800 rounded-xl p-8 mb-8">
|
||||||
|
<h3 class="text-xl font-semibold mb-6 text-center">Tools Compose Into Systems</h3>
|
||||||
|
<div class="flex flex-col md:flex-row items-center justify-center gap-4">
|
||||||
|
<!-- Input -->
|
||||||
|
<div class="bg-slate-700 rounded-lg px-4 py-3 text-center">
|
||||||
|
<div class="text-xs text-slate-400 mb-1">Input</div>
|
||||||
|
<div class="font-mono text-sm">meeting.txt</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg class="w-8 h-8 text-slate-500 rotate-90 md:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Tool 1 -->
|
||||||
|
<div class="bg-indigo-600 rounded-lg px-4 py-3 text-center">
|
||||||
|
<div class="text-xs text-indigo-200 mb-1">Tool</div>
|
||||||
|
<div class="font-mono text-sm">extract-topics</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg class="w-8 h-8 text-slate-500 rotate-90 md:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Tool 2 -->
|
||||||
|
<div class="bg-cyan-600 rounded-lg px-4 py-3 text-center">
|
||||||
|
<div class="text-xs text-cyan-200 mb-1">Tool</div>
|
||||||
|
<div class="font-mono text-sm">summarize</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg class="w-8 h-8 text-slate-500 rotate-90 md:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Tool 3 -->
|
||||||
|
<div class="bg-green-600 rounded-lg px-4 py-3 text-center">
|
||||||
|
<div class="text-xs text-green-200 mb-1">Tool</div>
|
||||||
|
<div class="font-mono text-sm">format-email</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg class="w-8 h-8 text-slate-500 rotate-90 md:rotate-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<!-- Output -->
|
||||||
|
<div class="bg-slate-700 rounded-lg px-4 py-3 text-center">
|
||||||
|
<div class="text-xs text-slate-400 mb-1">Output</div>
|
||||||
|
<div class="font-mono text-sm">summary.md</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-slate-400 text-center mt-6 text-sm">
|
||||||
|
Each tool does one thing well. Combined, they create complex workflows.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Key Points -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-12 h-12 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold mb-2">Ask, Don't Search</h4>
|
||||||
|
<p class="text-slate-400 text-sm">
|
||||||
|
Describe what you need in natural language. AI finds or creates it.
|
||||||
|
</p>
|
||||||
|
<code class="block mt-2 text-xs bg-slate-800 rounded px-2 py-1">
|
||||||
|
cmdforge registry describe "analyze sentiment"
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-12 h-12 bg-cyan-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold mb-2">Compose, Don't Integrate</h4>
|
||||||
|
<p class="text-slate-400 text-sm">
|
||||||
|
Tools chain together with Unix pipes. No dependency management.
|
||||||
|
</p>
|
||||||
|
<code class="block mt-2 text-xs bg-slate-800 rounded px-2 py-1">
|
||||||
|
cat data.csv | analyze | report
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-semibold mb-2">Share, Don't Hoard</h4>
|
||||||
|
<p class="text-slate-400 text-sm">
|
||||||
|
Every tool you create can benefit others. Build on each other's work.
|
||||||
|
</p>
|
||||||
|
<code class="block mt-2 text-xs bg-slate-800 rounded px-2 py-1">
|
||||||
|
cmdforge registry publish
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The Belief -->
|
||||||
|
<div class="py-16 bg-gradient-to-b from-white to-indigo-50">
|
||||||
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 mb-8">The Belief</h2>
|
||||||
|
<blockquote class="text-2xl md:text-3xl font-light text-gray-700 leading-relaxed">
|
||||||
|
"If something has been built once, it should be
|
||||||
|
<span class="text-indigo-600 font-medium">reusable forever</span>.<br><br>
|
||||||
|
Not as a library. Not as a framework.<br>
|
||||||
|
But as a <span class="text-indigo-600 font-medium">capability</span> anyone can call."
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- What CmdForge Is / Isn't -->
|
||||||
|
<div class="py-16">
|
||||||
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center mb-12">What This Means</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div class="bg-red-50 rounded-xl p-6 border border-red-100">
|
||||||
|
<h3 class="text-lg font-semibold text-red-800 mb-4">CmdForge is NOT:</h3>
|
||||||
|
<ul class="space-y-3 text-red-700">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-red-500 mr-2">✗</span>
|
||||||
|
A package manager (like npm or pip)
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-red-500 mr-2">✗</span>
|
||||||
|
A framework to learn
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-red-500 mr-2">✗</span>
|
||||||
|
Just AI code generation
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-red-500 mr-2">✗</span>
|
||||||
|
A replacement for shell scripting
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-green-50 rounded-xl p-6 border border-green-100">
|
||||||
|
<h3 class="text-lg font-semibold text-green-800 mb-4">CmdForge IS:</h3>
|
||||||
|
<ul class="space-y-3 text-green-700">
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-2">✓</span>
|
||||||
|
A capability registry
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-2">✓</span>
|
||||||
|
A tool composition engine
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-2">✓</span>
|
||||||
|
An AI-assisted discovery layer
|
||||||
|
</li>
|
||||||
|
<li class="flex items-start">
|
||||||
|
<span class="text-green-500 mr-2">✓</span>
|
||||||
|
A shared execution ecosystem
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<div class="bg-indigo-600 py-16">
|
||||||
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h2 class="text-3xl font-bold text-white mb-4">Ready to Try It?</h2>
|
||||||
|
<p class="text-xl text-indigo-100 mb-8">
|
||||||
|
Start building composable tools in minutes.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a href="{{ url_for('web.docs', path='getting-started') }}"
|
||||||
|
class="w-full sm:w-auto inline-flex justify-center items-center px-8 py-4 text-lg font-medium text-indigo-600 bg-white rounded-md hover:bg-indigo-50 transition-colors">
|
||||||
|
Get Started
|
||||||
|
</a>
|
||||||
|
<a href="{{ url_for('web.tools_browse') }}"
|
||||||
|
class="w-full sm:w-auto inline-flex justify-center items-center px-8 py-4 text-lg font-medium text-white border-2 border-white rounded-md hover:bg-indigo-700 transition-colors">
|
||||||
|
Browse Tools
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
Loading…
Reference in New Issue