Update web UI documentation for current implementation
- Replace API tokens with Connections/app pairing flow in Publishing section - Add moderation process documentation - Update Visual Builder section to describe PySide6 desktop GUI - Replace old TUI references (cmdforge ui, urwid, etc.) with desktop app - Update keyboard shortcuts for Qt application - Fix various outdated references throughout docs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d66446672b
commit
50ba841a62
|
|
@ -28,7 +28,7 @@ Create tools that work with any AI provider and compose them like Unix pipes.</p
|
|||
pip install cmdforge
|
||||
|
||||
# Create your first tool (choose your style)
|
||||
cmdforge ui # Visual builder with menus
|
||||
cmdforge # Desktop application with visual builder
|
||||
cmdforge create # CLI wizard
|
||||
|
||||
# Or install a tool from the registry
|
||||
|
|
@ -39,7 +39,7 @@ cat article.txt | summarize</code></pre>
|
|||
|
||||
<div class="bg-cyan-50 border-l-4 border-cyan-500 p-4 my-4">
|
||||
<p class="font-semibold text-cyan-800">Two Ways to Build</p>
|
||||
<p class="text-cyan-700"><code>cmdforge ui</code> launches a visual builder with menus and forms.
|
||||
<p class="text-cyan-700"><code>cmdforge</code> launches the desktop application with a visual builder.
|
||||
<code>cmdforge create</code> uses a command-line wizard. Both create the same YAML config files.</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ output: "{summary}"</code></pre>
|
|||
<h2 id="next-steps">Next Steps</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/installation">Installation Guide</a> - Detailed setup instructions</li>
|
||||
<li><a href="/docs/visual-builder">Visual Builder</a> - Build tools with menus (no YAML required)</li>
|
||||
<li><a href="/docs/visual-builder">Visual Builder</a> - Build tools visually (no YAML required)</li>
|
||||
<li><a href="/docs/first-tool">Your First Tool</a> - Step-by-step YAML tutorial</li>
|
||||
<li><a href="/docs/providers">Providers</a> - Configure AI providers</li>
|
||||
<li><a href="/tools">Browse Tools</a> - Discover community tools</li>
|
||||
|
|
@ -246,29 +246,66 @@ cat complex_algorithm.py | explain --level expert</code></pre>
|
|||
<h2 id="create-account">Create an Account</h2>
|
||||
<p>Register at <a href="/register">the registry</a> to get your publisher namespace.</p>
|
||||
|
||||
<h2 id="get-token">Get an API Token</h2>
|
||||
<h2 id="connect-account">Connect Your Account</h2>
|
||||
<p>Link your CLI or GUI to your registry account with a simple pairing flow:</p>
|
||||
|
||||
<h3>Option 1: From the Command Line</h3>
|
||||
<pre><code class="language-bash"># Start the connection flow
|
||||
cmdforge config connect yourusername</code></pre>
|
||||
<p>This opens your browser to approve the connection. Once approved, you're ready to publish!</p>
|
||||
|
||||
<h3>Option 2: From the Desktop GUI</h3>
|
||||
<ol>
|
||||
<li>Go to your <a href="/dashboard/tokens">Dashboard → Tokens</a></li>
|
||||
<li>Click "Create New Token"</li>
|
||||
<li>Copy the token (shown only once!)</li>
|
||||
<li>Launch <code>cmdforge</code> (the desktop app)</li>
|
||||
<li>Go to the <strong>Registry</strong> page</li>
|
||||
<li>Click the <strong>Connect</strong> button</li>
|
||||
<li>Enter your username and approve in the browser</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="publish">Publish Your Tool</h2>
|
||||
<pre><code class="language-bash"># Navigate to your tool directory
|
||||
cd ~/.cmdforge/my-tool/
|
||||
<div class="bg-cyan-50 border-l-4 border-cyan-500 p-4 my-4">
|
||||
<p class="font-semibold text-cyan-800">No More Tokens!</p>
|
||||
<p class="text-cyan-700">The connection flow replaces the old API token system. Your devices stay
|
||||
connected until you disconnect them from your <a href="/dashboard/connections">Dashboard → Connections</a> page.</p>
|
||||
</div>
|
||||
|
||||
# First time: enter your token when prompted
|
||||
cmdforge registry publish
|
||||
<h2 id="publish">Publish Your Tool</h2>
|
||||
<pre><code class="language-bash"># Publish from CLI
|
||||
cmdforge registry publish mytool
|
||||
|
||||
# Dry run to validate without publishing
|
||||
cmdforge registry publish --dry-run</code></pre>
|
||||
cmdforge registry publish mytool --dry-run
|
||||
|
||||
# Check your published tools
|
||||
cmdforge registry my-tools</code></pre>
|
||||
|
||||
<p>Or use the desktop GUI:</p>
|
||||
<ol>
|
||||
<li>Open the <strong>My Tools</strong> page</li>
|
||||
<li>Right-click on your tool and select <strong>Publish</strong></li>
|
||||
<li>Confirm the version and publish</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="moderation">Moderation Process</h2>
|
||||
<p>Submitted tools go through a brief moderation review to ensure quality:</p>
|
||||
<ul>
|
||||
<li><strong>Pending</strong> - Your tool is in the queue for review</li>
|
||||
<li><strong>Approved</strong> - Your tool is live in the registry</li>
|
||||
<li><strong>Changes Requested</strong> - A moderator has feedback for you</li>
|
||||
</ul>
|
||||
|
||||
<p>Check your moderation status anytime:</p>
|
||||
<pre><code class="language-bash"># See status of your submissions
|
||||
cmdforge registry status
|
||||
|
||||
# Sync moderator feedback to your local tool
|
||||
cmdforge registry status --sync</code></pre>
|
||||
|
||||
<h2 id="versioning">Versioning</h2>
|
||||
<p>Published versions are <strong>immutable</strong>. To update a tool:</p>
|
||||
<ol>
|
||||
<li>Make your changes</li>
|
||||
<li>Bump the version in <code>config.yaml</code></li>
|
||||
<li>Run <code>cmdforge registry publish</code></li>
|
||||
<li>Run <code>cmdforge registry publish mytool</code></li>
|
||||
</ol>
|
||||
|
||||
<h2 id="best-practices">Best Practices</h2>
|
||||
|
|
@ -278,13 +315,15 @@ cmdforge registry publish --dry-run</code></pre>
|
|||
<li><strong>Document arguments</strong> - Describe each flag in the help text</li>
|
||||
<li><strong>Include examples</strong> - Show real usage in your README</li>
|
||||
<li><strong>Choose the right category</strong> - Help users discover your tool</li>
|
||||
<li><strong>Respond to feedback</strong> - If changes are requested, address them promptly</li>
|
||||
</ul>
|
||||
""",
|
||||
"headings": [
|
||||
("before-publishing", "Before Publishing"),
|
||||
("create-account", "Create an Account"),
|
||||
("get-token", "Get an API Token"),
|
||||
("connect-account", "Connect Your Account"),
|
||||
("publish", "Publish Your Tool"),
|
||||
("moderation", "Moderation Process"),
|
||||
("versioning", "Versioning"),
|
||||
("best-practices", "Best Practices"),
|
||||
],
|
||||
|
|
@ -2085,193 +2124,247 @@ output: "{formatted}"</code></pre>
|
|||
|
||||
"visual-builder": {
|
||||
"title": "The Visual Builder",
|
||||
"description": "Build tools without touching YAML using the terminal UI",
|
||||
"description": "Build tools visually with the CmdForge desktop GUI",
|
||||
"content": """
|
||||
<p class="lead">Not everyone wants to write YAML by hand. CmdForge includes a full-featured
|
||||
terminal UI that lets you create, edit, and test tools with menus and forms—no text editor required.</p>
|
||||
<p class="lead">Not everyone wants to write YAML by hand. CmdForge includes a modern desktop
|
||||
application that lets you create, edit, and manage tools with a visual interface—no text editor required.</p>
|
||||
|
||||
<div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 my-6">
|
||||
<p class="font-semibold text-indigo-800">What You'll Learn</p>
|
||||
<ul class="mt-2 text-indigo-700">
|
||||
<li>How to launch and navigate the visual builder</li>
|
||||
<li>Creating tools with point-and-click menus</li>
|
||||
<li>Managing providers without editing config files</li>
|
||||
<li>How to launch and navigate the desktop application</li>
|
||||
<li>Creating and editing tools with the visual builder</li>
|
||||
<li>Browsing and installing tools from the registry</li>
|
||||
<li>Managing AI providers</li>
|
||||
<li>Testing tools before deploying them</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 id="launching">Launching the Visual Builder</h2>
|
||||
<h2 id="launching">Launching the Application</h2>
|
||||
|
||||
<p>Start the UI with a single command:</p>
|
||||
<p>Start the desktop application with a single command:</p>
|
||||
|
||||
<pre><code class="language-bash">cmdforge ui</code></pre>
|
||||
<pre><code class="language-bash">cmdforge</code></pre>
|
||||
|
||||
<p>You'll see a menu-driven interface that works in any terminal:</p>
|
||||
<p>The application opens with a clean, modern interface featuring a sidebar for navigation and a main content area:</p>
|
||||
|
||||
<div class="bg-gray-900 text-gray-100 rounded-lg p-4 my-6 font-mono text-sm">
|
||||
<pre>┌─────────────────────────────────────────────────────────┐
|
||||
│ CmdForge Manager │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [ List all tools ] │
|
||||
│ [ Create new tool ] │
|
||||
│ [ Edit existing tool ] │
|
||||
│ [ Delete tool ] │
|
||||
│ [ Test tool ] │
|
||||
│ [ Manage providers ] │
|
||||
│ [ Exit ] │
|
||||
│ │
|
||||
│ Use ↑↓ to navigate, Enter to select │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘</pre>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
|
||||
<div class="bg-white border-2 border-indigo-200 rounded-lg p-4">
|
||||
<p class="font-bold text-indigo-800">Sidebar Navigation</p>
|
||||
<ul class="text-sm text-indigo-700 mt-2">
|
||||
<li><strong>My Tools</strong> - View and manage your tools</li>
|
||||
<li><strong>Registry</strong> - Browse and install community tools</li>
|
||||
<li><strong>Providers</strong> - Configure AI backends</li>
|
||||
<li><strong>Profiles</strong> - Manage account connections</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border-2 border-green-200 rounded-lg p-4">
|
||||
<p class="font-bold text-green-800">Features</p>
|
||||
<ul class="text-sm text-green-700 mt-2">
|
||||
<li>Light and dark themes</li>
|
||||
<li>Keyboard shortcuts for power users</li>
|
||||
<li>One-click registry connection</li>
|
||||
<li>Real-time status syncing</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-cyan-50 border-l-4 border-cyan-500 p-4 my-6">
|
||||
<p class="font-semibold text-cyan-800">Pro Tip: Mouse Support</p>
|
||||
<p class="text-cyan-700">If you have <code>urwid</code> installed (<code>pip install urwid</code>),
|
||||
the UI supports mouse clicks! Just click on menu items instead of using arrow keys.</p>
|
||||
<p class="font-semibold text-cyan-800">Pro Tip: Theme Switching</p>
|
||||
<p class="text-cyan-700">Use the <strong>View</strong> menu to switch between light and dark themes.
|
||||
Your preference is saved automatically.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="creating-tools">Creating Tools Visually</h2>
|
||||
<h2 id="my-tools">The My Tools Page</h2>
|
||||
|
||||
<p>Select "Create new tool" to open the tool builder. It has two main sections:</p>
|
||||
<p>The My Tools page shows all your installed tools organized by category in a tree view:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Category grouping</strong> - Tools are organized under categories like Text Processing, Developer, Data, etc.</li>
|
||||
<li><strong>Tool details panel</strong> - Select a tool to see its description, arguments, and processing steps</li>
|
||||
<li><strong>Publish status</strong> - Icons indicate whether a tool is published, pending review, or local-only</li>
|
||||
</ul>
|
||||
|
||||
<p>From this page you can:</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-3 my-6 text-sm">
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 text-center">
|
||||
<p class="font-bold text-blue-800">Create</p>
|
||||
<p class="text-blue-700">New tool</p>
|
||||
</div>
|
||||
<div class="bg-green-50 border border-green-200 rounded-lg p-3 text-center">
|
||||
<p class="font-bold text-green-800">Edit</p>
|
||||
<p class="text-green-700">Existing tool</p>
|
||||
</div>
|
||||
<div class="bg-purple-50 border border-purple-200 rounded-lg p-3 text-center">
|
||||
<p class="font-bold text-purple-800">Publish</p>
|
||||
<p class="text-purple-700">To registry</p>
|
||||
</div>
|
||||
<div class="bg-red-50 border border-red-200 rounded-lg p-3 text-center">
|
||||
<p class="font-bold text-red-800">Delete</p>
|
||||
<p class="text-red-700">Remove tool</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="creating-tools">Creating Tools with the Visual Builder</h2>
|
||||
|
||||
<p>Click <strong>New Tool</strong> to open the tool builder. It has a form-based interface split into sections:</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-6">
|
||||
<div class="bg-white border-2 border-green-200 rounded-lg p-4">
|
||||
<p class="font-bold text-green-800">1. Info & Arguments</p>
|
||||
<p class="font-bold text-green-800">Basic Information</p>
|
||||
<ul class="text-sm text-green-700 mt-2">
|
||||
<li>Set tool name and description</li>
|
||||
<li>Add custom flags (--format, --max, etc.)</li>
|
||||
<li>Define the output template</li>
|
||||
<li><strong>Name</strong> - Unique identifier (lowercase, hyphens allowed)</li>
|
||||
<li><strong>Description</strong> - Brief summary for listings</li>
|
||||
<li><strong>Category</strong> - Select or create a category</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bg-white border-2 border-blue-200 rounded-lg p-4">
|
||||
<p class="font-bold text-blue-800">2. Processing Steps</p>
|
||||
<p class="font-bold text-blue-800">Arguments</p>
|
||||
<ul class="text-sm text-blue-700 mt-2">
|
||||
<li>Add prompt steps (with provider selection)</li>
|
||||
<li>Add code steps (Python processing)</li>
|
||||
<li>Reorder steps with move up/down</li>
|
||||
<li>Add custom flags (--format, --max, etc.)</li>
|
||||
<li>Set default values and help text</li>
|
||||
<li>Arguments become variables in your prompts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border-2 border-purple-200 rounded-lg p-4 my-6">
|
||||
<p class="font-bold text-purple-800">Processing Steps</p>
|
||||
<p class="text-sm text-purple-700 mt-2">Build your tool's logic by adding steps:</p>
|
||||
<ul class="text-sm text-purple-700 mt-2">
|
||||
<li><strong>Prompt Steps</strong> - Send input to an AI provider with a template</li>
|
||||
<li><strong>Code Steps</strong> - Process data with Python code</li>
|
||||
<li>Reorder steps by dragging or using move buttons</li>
|
||||
<li>Each step can pass its output to the next via variables</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3>Step-by-Step: Creating a Summarizer</h3>
|
||||
|
||||
<ol class="space-y-3">
|
||||
<li><strong>Launch:</strong> Run <code>cmdforge ui</code></li>
|
||||
<li><strong>Select:</strong> Choose "Create new tool"</li>
|
||||
<li><strong>Info:</strong> Go to "Info & Args", set name to <code>summarize</code></li>
|
||||
<li><strong>Add Argument:</strong> Click "Add Argument", set flag to <code>--length</code>, default to <code>100</code></li>
|
||||
<li><strong>Add Step:</strong> Go to "Steps", select "Add Prompt Step"</li>
|
||||
<li><strong>Provider:</strong> Choose your AI provider (or create one)</li>
|
||||
<li><strong>Prompt:</strong> Enter your prompt template with <code>{input}</code> and <code>{length}</code></li>
|
||||
<li><strong>Save:</strong> Select "Save Tool" from the main menu</li>
|
||||
<li><strong>Launch:</strong> Run <code>cmdforge</code> to open the application</li>
|
||||
<li><strong>Navigate:</strong> Click <strong>My Tools</strong> in the sidebar</li>
|
||||
<li><strong>Create:</strong> Click the <strong>New Tool</strong> button</li>
|
||||
<li><strong>Basic Info:</strong> Enter name <code>summarize</code> and a description</li>
|
||||
<li><strong>Add Argument:</strong> Click <strong>Add Argument</strong>, set flag to <code>--length</code> with default <code>100</code></li>
|
||||
<li><strong>Add Step:</strong> Click <strong>Add Step</strong> and choose <strong>Prompt Step</strong></li>
|
||||
<li><strong>Configure Step:</strong> Select your AI provider and enter the prompt template</li>
|
||||
<li><strong>Save:</strong> Click <strong>Save</strong> to create your tool</li>
|
||||
</ol>
|
||||
|
||||
<h2 id="registry">Browsing the Registry</h2>
|
||||
|
||||
<p>The <strong>Registry</strong> page lets you discover and install tools created by the community:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Search</strong> - Find tools by name or keyword</li>
|
||||
<li><strong>Filter by category</strong> - Browse Text Processing, Developer, Data tools, etc.</li>
|
||||
<li><strong>Sort</strong> - Order by downloads, newest, or alphabetically</li>
|
||||
<li><strong>Tool details</strong> - View description, author, version history, and download count</li>
|
||||
<li><strong>One-click install</strong> - Install any tool to your local machine</li>
|
||||
</ul>
|
||||
|
||||
<div class="bg-amber-50 border-l-4 border-amber-500 p-4 my-6">
|
||||
<p class="font-semibold text-amber-800">Version Selection</p>
|
||||
<p class="text-amber-700">When installing a tool, you can choose a specific version or get the latest.
|
||||
This is useful when you need a particular version for compatibility.</p>
|
||||
</div>
|
||||
|
||||
<h2 id="managing-providers">Managing Providers</h2>
|
||||
|
||||
<p>The UI makes it easy to add, edit, and delete AI providers without touching config files:</p>
|
||||
|
||||
<div class="bg-gray-900 text-gray-100 rounded-lg p-4 my-6 font-mono text-sm">
|
||||
<pre>┌─────────────────────────────────────────────────────────┐
|
||||
│ Manage Providers │
|
||||
├─────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ claude claude -p │
|
||||
│ opencode opencode │
|
||||
│ mock echo '[MOCK RESPONSE]' │
|
||||
│ ──────────────────────────────────────── │
|
||||
│ [ + Add New Provider ] │
|
||||
│ [ ← Back to Main Menu ] │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────┘</pre>
|
||||
</div>
|
||||
|
||||
<p>Select a provider to edit or delete it. Adding a new provider shows a form:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Name:</strong> Short identifier (e.g., <code>claude</code>)</li>
|
||||
<li><strong>Command:</strong> The CLI command (e.g., <code>claude -p</code>)</li>
|
||||
<li><strong>Description:</strong> What this provider does</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="testing">Testing Tools</h2>
|
||||
|
||||
<p>Before deploying a tool, test it with the built-in mock provider:</p>
|
||||
|
||||
<ol>
|
||||
<li>Select "Test tool" from the main menu</li>
|
||||
<li>Choose the tool you want to test</li>
|
||||
<li>Enter test input in the text editor</li>
|
||||
<li>See the result (uses mock provider by default)</li>
|
||||
</ol>
|
||||
|
||||
<p>This lets you verify your prompts and variable substitution without making real API calls.</p>
|
||||
|
||||
<h2 id="keyboard-shortcuts">Keyboard Shortcuts</h2>
|
||||
<p>The <strong>Providers</strong> page shows all configured AI backends in a table view:</p>
|
||||
|
||||
<table class="w-full my-4">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left">Key</th>
|
||||
<th class="px-4 py-2 text-left">Column</th>
|
||||
<th class="px-4 py-2 text-left">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2"><strong>Name</strong></td>
|
||||
<td class="px-4 py-2">Provider identifier used in tool configs</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2"><strong>Command</strong></td>
|
||||
<td class="px-4 py-2">The CLI command that's executed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2"><strong>Description</strong></td>
|
||||
<td class="px-4 py-2">What this provider does</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>From this page you can:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Add Provider</strong> - Create a new provider with name, command, and description</li>
|
||||
<li><strong>Edit</strong> - Modify an existing provider's configuration</li>
|
||||
<li><strong>Delete</strong> - Remove a provider you no longer need</li>
|
||||
<li><strong>Test</strong> - Send a test prompt to verify the provider works</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="testing">Testing Tools</h2>
|
||||
|
||||
<p>Test your tools before deploying them using the step-by-step test feature:</p>
|
||||
|
||||
<ol>
|
||||
<li>In the <strong>Tool Builder</strong>, click <strong>Test</strong> on any step</li>
|
||||
<li>Enter sample input text</li>
|
||||
<li>Set any argument values</li>
|
||||
<li>Run the test to see the output</li>
|
||||
</ol>
|
||||
|
||||
<p>This lets you verify prompts and variable substitution. For quick tests without API calls, configure a
|
||||
<code>mock</code> provider that echoes input back.</p>
|
||||
|
||||
<h2 id="keyboard-shortcuts">Keyboard Shortcuts</h2>
|
||||
|
||||
<p>Power users can navigate quickly with these shortcuts:</p>
|
||||
|
||||
<table class="w-full my-4">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left">Shortcut</th>
|
||||
<th class="px-4 py-2 text-left">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2"><code>↑</code> / <code>↓</code></td>
|
||||
<td class="px-4 py-2">Navigate menu items</td>
|
||||
<td class="px-4 py-2"><code>Ctrl+1</code> to <code>Ctrl+4</code></td>
|
||||
<td class="px-4 py-2">Switch to page (Tools, Registry, Providers, Profiles)</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2"><code>Enter</code></td>
|
||||
<td class="px-4 py-2">Select / confirm</td>
|
||||
<td class="px-4 py-2"><code>Ctrl+N</code></td>
|
||||
<td class="px-4 py-2">Create new tool</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2"><code>Esc</code></td>
|
||||
<td class="px-4 py-2"><code>Ctrl+S</code></td>
|
||||
<td class="px-4 py-2">Save current tool</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2"><code>Escape</code></td>
|
||||
<td class="px-4 py-2">Cancel / go back</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2"><code>Tab</code></td>
|
||||
<td class="px-4 py-2">Move to next field (in forms)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2"><code>q</code></td>
|
||||
<td class="px-4 py-2"><code>Ctrl+Q</code></td>
|
||||
<td class="px-4 py-2">Quit the application</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="ui-backends">UI Backends</h2>
|
||||
|
||||
<p>CmdForge automatically uses the best available terminal UI library:</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-6 text-sm">
|
||||
<div class="bg-green-50 border border-green-200 rounded-lg p-3">
|
||||
<p class="font-bold text-green-800">urwid (Best)</p>
|
||||
<p class="text-green-700">Mouse support, smooth</p>
|
||||
<p class="text-xs text-green-600 mt-1"><code>pip install urwid</code></p>
|
||||
</div>
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
||||
<p class="font-bold text-blue-800">snack</p>
|
||||
<p class="text-blue-700">BIOS-style dialogs</p>
|
||||
<p class="text-xs text-blue-600 mt-1"><code>apt install python3-newt</code></p>
|
||||
</div>
|
||||
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3">
|
||||
<p class="font-bold text-gray-800">dialog/whiptail</p>
|
||||
<p class="text-gray-700">Fallback option</p>
|
||||
<p class="text-xs text-gray-600 mt-1"><code>apt install dialog</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="cli-vs-ui">CLI vs Visual Builder</h2>
|
||||
<h2 id="cli-vs-gui">CLI vs Visual Builder</h2>
|
||||
|
||||
<p>When should you use each?</p>
|
||||
|
||||
<table class="w-full my-4">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left">Use the UI when...</th>
|
||||
<th class="px-4 py-2 text-left">Use YAML when...</th>
|
||||
<th class="px-4 py-2 text-left">Use the Visual Builder when...</th>
|
||||
<th class="px-4 py-2 text-left">Use CLI/YAML when...</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
|
@ -2281,37 +2374,43 @@ terminal UI that lets you create, edit, and test tools with menus and forms—no
|
|||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2">Building your first few tools</td>
|
||||
<td class="px-4 py-2">Making quick edits</td>
|
||||
<td class="px-4 py-2">Making quick edits to configs</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2">Managing providers</td>
|
||||
<td class="px-4 py-2">Browsing the registry</td>
|
||||
<td class="px-4 py-2">Scripting tool installation</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="px-4 py-2">Managing providers visually</td>
|
||||
<td class="px-4 py-2">Copying tools between machines</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-2">Testing interactively</td>
|
||||
<td class="px-4 py-2">Version control integration</td>
|
||||
<td class="px-4 py-2">Publishing tools to the registry</td>
|
||||
<td class="px-4 py-2">CI/CD integration</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="next-up">Next Up</h2>
|
||||
|
||||
<p>Now that you know both ways to build tools:</p>
|
||||
<p>Now that you know how to use the Visual Builder:</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="/tutorials/yaml-config">YAML Configuration</a> - Deep dive into the config format</li>
|
||||
<li><a href="/tutorials/arguments">Adding Arguments</a> - Custom flags and options</li>
|
||||
<li><a href="/docs/providers">Providers</a> - Configure AI backends</li>
|
||||
<li><a href="/docs/publishing">Publishing Tools</a> - Share your tools with the community</li>
|
||||
</ul>
|
||||
""",
|
||||
"headings": [
|
||||
("launching", "Launching the Visual Builder"),
|
||||
("creating-tools", "Creating Tools Visually"),
|
||||
("launching", "Launching the Application"),
|
||||
("my-tools", "The My Tools Page"),
|
||||
("creating-tools", "Creating Tools with the Visual Builder"),
|
||||
("registry", "Browsing the Registry"),
|
||||
("managing-providers", "Managing Providers"),
|
||||
("testing", "Testing Tools"),
|
||||
("keyboard-shortcuts", "Keyboard Shortcuts"),
|
||||
("ui-backends", "UI Backends"),
|
||||
("cli-vs-ui", "CLI vs Visual Builder"),
|
||||
("cli-vs-gui", "CLI vs Visual Builder"),
|
||||
("next-up", "Next Up"),
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue