Documentation/Web ↔ CLI Sync

Web ↔ CLI Sync Workflow

Work seamlessly between the browser and your terminal. Start coding anywhere, continue anywhere. Your projects stay in perfect sync.

Web IDE

Quick prototyping, visual editing, instant preview

Seamless Sync

Terminal CLI

Full power, your tools, local development

Why This is Revolutionary

✓Start anywhere: Prototype in the browser, build in your terminal
✓No context switching: Your AI understands your entire project history
✓True flexibility: Use web for quick edits, CLI for deep work

Quick Setup

Install Recoder CLI

First, install the Recoder CLI globally on your machine:

# Using npm

npm install -g @recoder/cli

# Or using yarn

yarn global add @recoder/cli

Link Your Account

Connect your terminal to your Recoder.xyz account:

recoder login

This will:

Open your browser to authenticate
Generate a secure device code
Link your terminal to your web account
Sync your projects and AI settings

One-Time Setup

You only need to do this once. Your CLI will stay authenticated across sessions.

Verify Connection

Check that everything is working:

recoder whoami

# Output:
# ✓ Logged in as: your.email@example.com
# ✓ Projects synced: 3
# ✓ AI providers configured: OpenRouter, Anthropic

✅ All Set!

Your terminal is now connected to your Recoder.xyz account. Let's explore the workflows!

Common Workflows

Workflow 1: Start in Web, Continue in Terminal

Perfect for prototyping quickly, then moving to your local environment for deep work.

Create project in Web IDE

Go to dashboard, click "New Project", build your initial prototype with AI assistance.

Pull to your local machine

# List your projects
recoder projects list

# Download specific project
recoder pull my-awesome-app

Continue development locally

Now you have the full project locally. Use your favorite IDE, run tests, commit to git:

cd my-awesome-app
code .
npm install && npm run dev

Push changes back

After making changes, sync back to the cloud:

recoder push

Your changes are now visible in the Web IDE! Chat history preserved.

Workflow 2: Start in Terminal, View in Web

Perfect for developers who prefer local development but want visual preview capabilities.

Create project with CLI

recoder create react-dashboard
cd react-dashboard

Build with AI in terminal

recoder chat
> Create a modern dashboard with charts

Push to cloud for visual preview

recoder push --open

The --open flag automatically opens the Web IDE with live preview!

Share and collaborate

Your project is now accessible via web URL. Share with team, demo to clients, or make quick visual tweaks in the browser.

Workflow 3: Hybrid Development (Pro Mode)

The ultimate workflow: leverage strengths of both environments simultaneously.

Use Web IDE For:

→Quick UI iterations and visual tweaks
→Instant preview of frontend changes
→Sharing demos with stakeholders
→AI pair programming for exploration

Use Terminal CLI For:

→Complex refactoring and debugging
→Running tests and build processes
→Git workflows and version control
→Working with your favorite local tools

Pro Tip: Keep both open! Edit in your terminal with VSCode, push changes, then instantly see the preview in Web IDE. Best of both worlds.

Essential CLI Commands

Project Management

recoder projects list

List all your synced projects

recoder pull [project-name]

Download project from cloud to local

recoder push

Upload local changes to cloud

recoder status

Check sync status and changes

AI & Chat

recoder chat

Start AI chat session (uses your web settings)

recoder chat --model claude-3.5-sonnet

Specify which model to use

recoder generate "description"

Generate code from natural language

recoder context

View current project context and history

Best Practices

✅ DO: Sync Frequently

Run recoder push after significant changes. This keeps your work backed up and accessible from anywhere.

✅ DO: Use Web for Demos

When presenting to clients or team, push to web and share the live preview URL. No deployment needed!

✅ DO: Leverage Both for Learning

Use Web IDE to experiment and learn, then pull locally to see the full project structure and understand the architecture.

❌ DON'T: Forget to Pull Before Editing

If you made changes in the web IDE, run recoder pull before editing locally to avoid conflicts.

❌ DON'T: Push Sensitive Data

Always check your .gitignore and ensure API keys, secrets, and large files aren't synced to the cloud.

Troubleshooting

🔐 "Not authenticated" error▼

If you're seeing authentication errors:

Run recoder login to re-authenticate
Check your internet connection
Make sure you completed the browser authentication flow
Try recoder logout then login again

⚠️ Sync conflicts▼

If you have conflicting changes between web and local:

Run recoder status to see conflicts
Use recoder pull --force to overwrite local with cloud
Or recoder push --force to overwrite cloud with local
For complex merges, resolve manually and push

🐌 Slow sync speeds▼

If syncing is taking too long:

Check your .recoderignore file - exclude node_modules, build folders
Large files (>100MB) should be avoided in sync
Use recoder push --compress for faster uploads
Check your network connection and firewall settings

Start Syncing Today!

Experience the power of seamless Web ↔ CLI workflow. Build anywhere, deploy everywhere.