sf-agent-framework

# Tutorial: Web UI Direct Commands ## Overview The Web UI Direct Commands feature provides an interactive command system for controlling AI agents directly within web interfaces like ChatGPT, Claude, or Gemini. This tutorial will guide you through using slash commands to control agent behavior, manage sessions, and track progress. ## Prerequisites - SF-Agent Framework installed - Web bundles built (`sf-agent build`) - Access to a web-based AI interface (ChatGPT, Claude, Gemini, etc.) ## What You'll Learn - How to use slash commands in web bundles - Managing agent transformations - Tracking session state and artifacts - Discovering agent capabilities ## Step 1: Build Web Bundles with Commands First, ensure your web bundles include the command processor: ```bash # Build the web bundles sf-agent build # Check that bundles were created ls dist/agents/ ``` The command processor is automatically embedded in each bundle. ## Step 2: Upload Bundle to Web Interface 1. Navigate to your AI web interface (e.g., ChatGPT) 2. Upload a bundle file from `dist/agents/` (e.g., `sf-orchestrator.txt`) 3. The AI will load the bundle with command support ## Step 3: Basic Command Usage ### Getting Help Start by exploring available commands: ``` *help ``` This displays all available commands grouped by category: - Core Commands - Agent Management - Phase Management - Workflow & Tasks - Artifacts & Resources - Session Management - Discovery ### Check Current Status View your current session state: ``` *status ``` This shows: - Current agent - Active phase (planning/development) - Session duration - Context usage - Created artifacts - Transform history ## Step 4: Agent Transformation ### List Available Agents See all agents in the bundle: ``` *list-agents ``` ### Transform to a Specialist Transform the orchestrator into a specific agent: ``` *transform sf-architect ``` The system will: - Switch to the architect agent - Maintain session context - Adjust to current phase mode (rich/lean) ### Return to Orchestrator Go back to orchestrator mode: ``` *orchestrator ``` ## Step 5: Phase Management ### Switch Between Phases Change from planning to development phase: ``` *phase development ``` This switches to: - Development phase (32k token limit) - Lean agent mode for efficiency - Context optimization ### Monitor Context Usage Check your token usage: ``` *context ``` Shows: - Current phase context usage - Available tokens - Usage percentage - Phase comparison ## Step 6: Workflow Commands ### Start Interactive Workflow Begin a guided workflow: ``` *workflow ``` You'll see choices like: 1. Requirements Gathering 2. Technical Planning 3. Story Creation 4. Implementation 5. Testing ### Execute Specific Task Run a named task: ``` *task create-story ``` This loads and executes the task definition. ## Step 7: Managing Artifacts ### Track Created Artifacts List all artifacts from your session: ``` *artifacts ``` ### Save an Artifact Mark an artifact as saved: ``` *save requirements.md ``` ### Load Embedded Resources Load a resource from the bundle: ``` *load .sf-core/templates/apex-class ``` ## Step 8: Session Management ### Create Checkpoint Save your current state: ``` *checkpoint ``` Creates a checkpoint with: - Timestamp - Current agent - Phase - Artifact count ### Generate Summary Get a summary of work done: ``` *summary ``` Provides: - Session duration - Work completed - Artifacts created - Agents used - Next recommended actions ### Get Next Steps Get AI suggestions for what to do next: ``` *next-steps ``` ## Step 9: Discovery Commands ### Show Agent Capabilities See what the current agent can do: ``` *capabilities ``` ### List Dependencies View loaded dependencies: ``` *dependencies ``` ### Show Available Templates See templates you can use: ``` *templates ``` ### Show Checklists View available checklists: ``` *checklists ``` ## Step 10: Advanced Usage ### Command Chaining You can chain commands in a conversation: ``` User: *transform sf-developer AI: ✅ Transformed to sf-developer User: *phase development AI: ✅ Switched to development phase User: *task implement-apex-trigger AI: ✅ Executing task: implement-apex-trigger ``` ### Creating Custom Workflows 1. Start with orchestrator 2. Transform to analyst for requirements 3. Create artifacts 4. Transform to architect for design 5. Hand off to developer 6. Track with checkpoints ## Example Session Here's a complete example session: ``` 1. *help # Learn available commands 2. *status # Check initial state 3. *transform sf-analyst # Become analyst 4. *task gather-requirements # Gather requirements 5. *save requirements.md # Save artifact 6. *checkpoint # Create checkpoint 7. *transform sf-architect # Become architect 8. *task design-architecture # Design system 9. *save architecture.md # Save artifact 10. *handoff sf-developer # Prepare handoff 11. *summary # Review work done 12. *next-steps # Get recommendations ``` ## Command Reference ### Essential Commands | Command | Description | Example | | -------------------- | -------------------- | ------------------------- | | `*help` | Show all commands | `*help` | | `*status` | Current session info | `*status` | | `*transform <agent>` | Become specialist | `*transform sf-developer` | | `*phase <phase>` | Switch phase | `*phase development` | | `*task <name>` | Execute task | `*task create-story` | | `*artifacts` | List artifacts | `*artifacts` | | `*checkpoint` | Save state | `*checkpoint` | | `*summary` | Session summary | `*summary` | ### Phase-Specific Commands | Phase | Token Limit | Best For | | ------------- | ----------- | ----------------------------------- | | `planning` | 128k | Requirements, architecture, stories | | `development` | 32k | Implementation, testing, deployment | ## Troubleshooting ### Command Not Working If a command doesn't work: 1. Check spelling (commands are case-sensitive) 2. Verify required parameters 3. Use `*help` to see correct syntax ### Lost Session State If you lose state: 1. Use `*status` to check current state 2. Use `*artifacts` to see what was created 3. Use `*checkpoint` regularly to save progress ### Context Limit Reached If you hit context limits: 1. Use `*context` to check usage 2. Switch to development phase for smaller context 3. Use `*summary` to consolidate work 4. Start a new session if needed ## Best Practices 1. **Start with \*help** - Always begin by understanding available commands 2. **Use checkpoints** - Create checkpoints after major milestones 3. **Track artifacts** - Mark important artifacts with `*save` 4. **Monitor context** - Check `*context` regularly in long sessions 5. **Transform wisely** - Use the right agent for each task 6. **Document handoffs** - Use `*handoff` when switching agents 7. **Summarize often** - Use `*summary` to track progress ## Next Steps - Learn about [Interactive Workflows](./05-interactive-workflows.md) - Explore [Agent Collaboration](./06-agent-collaboration.md) - Master [Context Memory](./07-context-memory.md) ## Conclusion Web UI Direct Commands provide powerful control over AI agents in web interfaces. By mastering these commands, you can efficiently manage complex development workflows, track progress, and maintain context across long sessions.