Skip to content
The Terminal

AI-Assisted Workflows

import { Aside } from ‘@astrojs/starlight/components’;

The combination of The Terminal and Gee-Code enables workflows that aren’t possible with traditional tools. Here are the most common patterns.

The Debug Loop

Section titled “The Debug Loop”

Scenario: Something is broken in your web app.

Layout:

┌────────────────────┬────────────────────┐
│   Terminal          │   Browser          │
│   (dev server)     │   (your app)       │
├────────────────────┴────────────────────┤
│   Terminal (Gee-Code)                    │
└──────────────────────────────────────────┘

Workflow:

  1. Describe the problem to Gee-Code: “The signup form submits but nothing happens”
  2. Gee-Code connects to the browser and reads the console
  3. Finds: POST /api/signup → 500 Internal Server Error
  4. Reads the response body for the error message
  5. Searches your codebase for the signup handler
  6. Identifies the bug and fixes it
  7. Your dev server hot-reloads
  8. Gee-Code verifies the fix by submitting the form again

The entire cycle happens without you switching windows or copying error messages.

Visual Verification

Section titled “Visual Verification”

Scenario: You’re making CSS changes and want AI feedback.

Workflow:

  1. Make a style change in your code
  2. Ask Gee-Code: “Does the header look right now?”
  3. Gee-Code takes a screenshot of the browser panel
  4. Analyzes the layout: “The header is rendering, but the logo is overlapping the nav links. The logo container needs flex-shrink: 0.”
  5. Makes the fix, takes another screenshot to confirm

API-First Development

Section titled “API-First Development”

Scenario: Building a frontend that consumes an API.

Workflow:

  1. Point the browser at your frontend
  2. Gee-Code watches network requests in real time
  3. When an API call fails, it reads the request and response
  4. Identifies mismatches between what the frontend sends and what the API expects
  5. Fixes either side as needed

Form Testing

Section titled “Form Testing”

Scenario: Verifying form validation and submission.

Workflow:

  1. Ask Gee-Code: “Test the contact form with various inputs”
  2. Gee-Code fills the form fields using the DevTools API
  3. Submits the form and observes the response
  4. Tests edge cases: empty fields, invalid email, long text
  5. Reports which validation rules work and which don’t

Accessibility Review

Section titled “Accessibility Review”

Scenario: Checking your app for accessibility issues.

Workflow:

  1. Ask Gee-Code: “Check the current page for accessibility issues”
  2. Gee-Code inspects the DOM for:
    • Missing alt text on images
    • Missing ARIA labels on interactive elements
    • Color contrast issues
    • Keyboard navigation problems
    • Heading hierarchy
  3. Reports findings with specific element references
  4. Offers fixes for each issue

Multi-Page Testing

Section titled “Multi-Page Testing”

Scenario: Verifying a user flow across multiple pages.

Workflow:

  1. Ask Gee-Code: “Walk through the checkout flow”
  2. Gee-Code navigates to the cart page
  3. Clicks “Checkout”, fills in shipping info, proceeds to payment
  4. At each step, it checks for errors, validates the UI, and reports status
  5. Confirms the entire flow works end-to-end

Tips for Effective Workflows

Section titled “Tips for Effective Workflows”
  1. Keep the browser panel visible — Gee-Code uses it for screenshots and interaction
  2. Run your dev server with hot reload — fixes apply instantly
  3. Use descriptive error messages in your code — Gee-Code reads them
  4. Point the browser at the right page before asking Gee-Code to debug it

Next Steps

Section titled “Next Steps”