VERSALIST GUIDES

Async Coding Agents

Share on XShare on LinkedIn

Async coding agents help teams move faster by letting human developers plan, monitor, and refine autonomous work while staying in control. This guide covers universal patterns for working with AI coding assistants, then provides specific workflows for Claude Code, OpenAI Codex, Google Gemini, and Google Jules.

đź’ˇ Related: See our Vibe Coding guide for configuration examples, AI Agents guide for foundations, and practice with hands-on challenges.

Table of Contents

1. Part I: Universal Principles

These patterns apply to all async coding agents, regardless of the specific tool you're using. Master these principles first, then adapt them to your chosen platform.

1.1 Planning & Intent Gathering

Before any code generation, establish shared understanding between you and the agent. Async agents work best when they can reason about the full scope of work before taking action.

âś… Best Practices:

  • Start conversations with explicit planning requests: "Let's plan this step-by-step before writing code"
  • Ask agents to outline requirements, risks, and success criteria upfront
  • Review and edit plans collaboratively—don't accept first drafts blindly
  • Exit planning mode only when each step is specific enough to execute without clarification

Why this matters: Planning separates intent from implementation. You catch scope issues, architectural mismatches, and security concerns before wasting time on code that won't ship.

1.2 Context Management

Agents are only as good as the context you provide. Think of context as the agent's working memory—relevant files, documentation, constraints, and examples that guide decision-making.

Context Hierarchy (Priority Order):

  1. Current Task Files: The specific files being modified
  2. Related Examples: Similar patterns already in the codebase
  3. Documentation: API docs, style guides, architecture decisions
  4. Constraints: Security policies, performance requirements, dependencies
  5. Historical Context: Related PRs, issues, design discussions

Pro Tip: Use explicit reference syntax (@file, @docs, @codebase) rather than relying on agents to "figure it out." Explicit is better than implicit.

1.3 Configuration as Code

Store project-specific instructions in configuration files so every conversation starts with consistent context. This prevents having to re-explain coding standards, architectural constraints, and team conventions.

Example Configuration Template:

# Project Guidelines

## Tech Stack
- Framework: Next.js 14+ (App Router)
- Language: TypeScript (strict mode)
- Database: Supabase (PostgreSQL)
- UI: React 18 + TailwindCSS

## Code Style
- Functional components with hooks
- Named exports over default exports
- PascalCase for components/types
- camelCase for variables/functions

## Architecture
- Server Components by default
- Client Components only when needed (interactivity, hooks)
- API routes in app/api/*/route.ts
- Supabase RLS for data access control

## Testing
- E2E tests with Playwright (e2e/*.spec.ts)
- Run: npm run test:e2e
- User-visible text for selectors

## Security
- Never expose service role keys client-side
- Always validate user input
- Use RLS for multi-tenant data isolation
- Sanitize user-generated content

Name your configuration file based on your tool: .cursorrules, .claude.md, windsurfruler.claude.md, or .ai-instructions.md for generic use.

1.4 Multimodal Collaboration

Modern agents can process images, diagrams, and screenshots. Use visuals to communicate design intent, flag UI bugs, or explain complex architecture that's hard to describe in text.

  • UI/UX: Share mockups or screenshots with annotations pointing out specific elements
  • Bugs: Attach before/after screenshots showing visual regressions
  • Architecture: Include diagrams (sequence, component, data flow) for complex systems
  • Data: Share sample JSON, database schemas, or API response examples

Caption everything: Don't assume agents will infer what to focus on. Add explicit captions like "Notice the misaligned button in the top-right corner" or "This sequence diagram shows the OAuth flow we need to implement."

1.5 Thread Management

Keep conversations focused and auditable by managing thread scope deliberately. Each thread should represent a single logical unit of work.

âś… Good Thread Scope:

  • Single feature implementation
  • One bug fix with tests
  • Refactoring a specific module
  • Adding documentation for a feature

❌ Poor Thread Scope:

  • Multiple unrelated features
  • Mix of bugs and new features
  • Entire module rewrite
  • "Fix everything wrong with X"

When to start a new thread: Scope change, ownership change, blocked on external dependency, or when context gets too large (100+ messages).

Thread Handoffs: When continuing work in a new thread, reference the previous thread ID and summarize key decisions/progress to maintain continuity.

1.6 Review & Validation

You are the final arbiter of code quality. Agents draft, you review and refine. Never merge agent-generated code without validation—AI can hallucinate, introduce bugs, or miss edge cases.

🔍 Review Checklist:

  1. Correctness: Does it solve the actual problem?
  2. Security: Any injection risks, exposed secrets, or auth bypasses?
  3. Performance: N+1 queries, unnecessary re-renders, blocking operations?
  4. Maintainability: Clear naming, proper abstractions, reasonable complexity?
  5. Testing: Are edge cases covered? Do tests actually validate behavior?
  6. Standards: Follows team conventions, linting rules, accessibility guidelines?

Checkpointing: Create checkpoints (git commits, branches, or platform-specific snapshots) before major changes. This gives you rollback points if the agent takes work in an unproductive direction.

2. Part II: Tool-Specific Workflows

Now that you understand universal principles, here's how to apply them in specific tools. Each platform has unique features—leverage them to maximize productivity.

2.1 Claude Code

Claude Code (Anthropic's coding assistant) excels at understanding complex codebases and maintaining context across long conversations. Available via Claude.ai, API, and Cursor integration.

🎯 Strengths:

  • 200K token context window - Can process entire medium-sized codebases
  • Project-aware - Remembers files, conventions, and past conversations within a project
  • Excellent reasoning - Strong at planning, architecture discussions, and debugging complex issues
  • Artifacts - Generates standalone code artifacts you can iterate on independently

Setup:

  1. Create a Project in Claude.ai or Claude Desktop app
  2. Add your codebase documentation and key files to Project Knowledge
  3. Create a .claude.md file in your repo with project guidelines (see Part I, section 1.3)
  4. Reference this file in conversations: "@.claude.md follow these guidelines"

Workflow Tips:

  • Start planning conversations with: "Let's create a detailed implementation plan before writing code"
  • Use Artifacts for complete files—Claude will track versions and let you switch between iterations
  • For debugging: Paste full error stack traces and relevant file contents, then ask: "Explain the root cause and suggest 2-3 solutions with trade-offs"
  • For refactoring: "Review [file] for code smells, then propose a refactoring plan prioritizing readability"

Best Practices:

  • Use Projects consistently: Keep related work in the same project so Claude remembers context
  • Leverage long context: Don't hesitate to paste multiple related files—Claude can handle it
  • Iterate on Artifacts: Ask Claude to update existing artifacts rather than regenerating from scratch
  • Save important responses: Bookmark key architectural decisions or examples for future reference

Example Claude Workflow:

You: "@.claude.md I need to add user authentication with Supabase. Let's plan the implementation."

Claude: [Generates detailed plan with steps, files to modify, security considerations]

You: "Looks good. Let's start with step 1: Create the auth service. Use existing patterns from @lib/api/users.ts"

Claude: [Generates auth service code in Artifact]

You: "Update the artifact to add rate limiting and better error handling"

Claude: [Updates same artifact with improvements]

2.2 OpenAI Codex (ChatGPT)

OpenAI's Codex powers ChatGPT's coding capabilities and GitHub Copilot. Available via ChatGPT web/app, API, and integrated tools like Cursor.

🎯 Strengths:

  • Fast iteration - Quick responses for rapid prototyping
  • Broad language support - Trained on massive code corpus across languages
  • Web search integration - Can look up current docs, API changes, and solutions
  • Canvas mode - Side-by-side editing for iterative refinement

Setup:

  1. Use ChatGPT Plus or Team for access to GPT-4 and Canvas
  2. Create a Custom GPT for your project with instructions and key files
  3. Alternatively, use Memory feature to persist project context across conversations
  4. Store coding standards in a gist/doc and reference via URL in conversations

Workflow Tips:

  • Use Canvas mode for iterative code editing—it's perfect for refactoring and debugging
  • Enable web search when working with new libraries or checking current API docs
  • For complex tasks: Break into subtasks and tackle one at a time in sequence
  • Paste error messages with surrounding code context for faster debugging

Best Practices:

  • Use Custom GPTs: Create project-specific GPTs with coding standards pre-loaded
  • Leverage web search: Ask it to verify current API versions or check recent docs
  • Canvas for files: Use Canvas when editing complete files; regular chat for snippets/planning
  • Short context window: Keep conversations focused—start new threads for new topics

Example Codex Workflow:

You: "Create a React hook for debounced search with TypeScript. Use 300ms delay."

ChatGPT: [Generates useDebounce hook code]

You: "Open in Canvas. Add cleanup for unmounted components and JSDoc comments."

ChatGPT: [Opens Canvas, updates code with improvements]

You (in Canvas): "Add unit test using Vitest"

ChatGPT: [Adds test file in Canvas]

2.3 Google Gemini

Google Gemini (via AI Studio, Vertex AI, or integrated tools) offers multimodal capabilities and deep integration with Google's ecosystem.

🎯 Strengths:

  • 1M token context window (Gemini 1.5 Pro) - Process entire large codebases
  • Multimodal native - Excellent at processing images, videos, and audio alongside code
  • Google Workspace integration - Access Docs, Sheets, Drive directly in conversations
  • Function calling - Can directly interact with APIs and tools

Setup:

  1. Access via Google AI Studio (free tier) or Vertex AI (production)
  2. Create a System Instruction with your coding standards and project context
  3. For teams: Use Vertex AI with shared system instructions and prompt templates
  4. Enable Grounding with Google Search for up-to-date technical information

Workflow Tips:

  • Upload entire repositories as context (up to 1M tokens)—Gemini can handle it
  • Use multimodal inputs: Screenshot UIs, paste architecture diagrams, record video walkthroughs
  • Leverage Google Search grounding to verify current library versions and best practices
  • For data processing: Share Google Sheets directly and ask Gemini to analyze/generate code

Best Practices:

  • Maximize context window: Don't hold back—paste full files and dependencies
  • Use System Instructions: Set up persistent project context that applies to all conversations
  • Multimodal debugging: Share screenshots of errors, UI issues, or network traces
  • Grounding for accuracy: Enable Google Search when working with recently updated APIs

Example Gemini Workflow:

You: [Uploads entire codebase + screenshots of UI bug] "This button is misaligned on mobile. Find the issue and fix it."

Gemini: [Analyzes all files, identifies CSS issue] "Found in components/Button.tsx line 45. The flexbox alignment is missing responsive breakpoints."

You: "Fix it following our TailwindCSS conventions. Show me the full updated component."

Gemini: [Generates fixed component with proper responsive classes]

2.4 Google Jules (Project Mariner)

Google Jules (formerly Project Mariner) is an experimental autonomous coding agent that can perform multi-step tasks with minimal supervision. Currently in limited preview.

🎯 Strengths:

  • Autonomous execution - Can complete multi-step tasks independently
  • Tool use - Directly interacts with browser, terminal, and IDE
  • Self-correction - Detects and fixes errors without human intervention
  • Task decomposition - Automatically breaks complex requests into subtasks

⚠️ Experimental Status: Jules is in early preview. Expect breaking changes, limited availability, and evolving capabilities. Not recommended for production workflows yet.

Setup:

  1. Request access via Google Labs or Vertex AI preview
  2. Define clear task boundaries and validation criteria upfront
  3. Set up monitoring/logging to track autonomous actions
  4. Configure approval gates for critical operations (deployments, database changes)

Workflow Tips:

  • Start with well-defined tasks: "Build a login form with email validation and error handling"
  • Provide success criteria: "Tests must pass, no TypeScript errors, follows our component patterns"
  • Use checkpoints: Ask Jules to pause after major milestones for human review
  • Monitor in real-time: Watch Jules' actions via the interface; intervene if it goes off track

Best Practices:

  • Sandboxed environment first: Test Jules on non-critical projects before production use
  • Clear stop conditions: Define when Jules should stop and ask for help
  • Human review gates: Require approval before deploying, merging, or modifying databases
  • Learn from sessions: Review Jules' action logs to understand decision-making patterns

Example Jules Workflow:

You: "Build a user profile page with avatar upload, bio editing, and save functionality. Follow patterns in @components/users/. Tests required."

Jules: [Analyzes existing patterns] "I'll create ProfilePage.tsx, ProfileForm.tsx, and useProfileUpdate hook. Setting up tests with React Testing Library. Starting now..."

Jules: [Creates files, writes code, runs tests, fixes errors autonomously]

Jules: "Task complete. 3 components created, 12 tests passing, 0 TypeScript errors. Ready for review."

You: [Reviews code, tests functionality] "Approved. Create PR."

Next Steps

Ready to put these workflows into practice? Here's how to level up: