Composer

Multi-file editing with full project context using List Coder's Composer.

Composer

Composer is List Coder's multi-file editing mode. It gives you an AI chat interface that understands your entire project structure, allowing you to make changes across multiple files simultaneously.

How It Works

Composer maintains context of your entire codebase. When you ask it to make changes, it can:

  • Create new files from scratch
  • Modify existing files across your project
  • Update imports and dependencies automatically
  • Maintain consistency across related changes

Example

User: Add a new API endpoint for user preferences with GET, PUT, and DELETE methods.
      Follow the same pattern as the existing user endpoints.

AI: I'll create the preferences endpoint following your existing patterns.

Changes:
  - Created src/api/preferences.ts
  - Updated src/routes/index.ts to register the new routes
  - Added TypeScript types in src/types/preferences.ts

Opening Composer

  1. Press Ctrl + L (or Cmd + L on macOS)
  2. Or click the Composer icon in the sidebar
  3. Start describing your changes

Use Cases

Adding New Features

"Add a dark mode toggle to the settings page. Store the preference in localStorage.
Update the theme provider to respect this setting."

Refactoring

"Extract all API calls from the components into a separate api/ directory.
Create individual files for each resource (users, posts, comments)."

Bug Fixes

"The form validation is broken on the registration page.
Fix it to validate email, password strength, and password match.
Add appropriate error messages for each field."

Code Cleanup

"Remove all unused imports across the project.
Consolidate duplicate utility functions in src/utils/.
Update all references to use the consolidated functions."

Context Window

Context Window:

Composer uses a larger context window than Tab completion. This means it can "see" more of your project at once, leading to more accurate and contextually appropriate suggestions.

The context includes:

  • Open files in your editor
  • Project structure and configuration
  • Recent file changes
  • Related imports and dependencies

Tips for Better Results

Be Specific About Patterns

"Add a new component following the same pattern as UserProfile.tsx.
Include TypeScript props interface, default export, and CSS module styling."

Reference Existing Code

"Create a new hook similar to useAuth.ts but for user preferences.
Follow the same structure with loading state and error handling."

Break Down Complex Tasks

For large changes, break them into smaller steps:

  1. First: "Create the data model for the new feature"
  2. Then: "Add the API endpoints"
  3. Finally: "Create the UI components"

Reviewing Changes

Composer shows you all changes before applying them:

  1. Review each file modification
  2. Check the diff for each change
  3. Accept or reject individual changes
  4. Apply all accepted changes at once