How to Use Dropstone Agent

Dropstone Agent is designed to be used through natural conversation and simple UI interactions. You don't need to learn commands or syntax - just describe what you want in plain English (or your preferred language).

Core Concept: Natural Language Interaction

Unlike traditional tools where you need to memorize commands, Dropstone Agent understands natural language requests. You simply describe your goal, and the agent figures out how to accomplish it.

Example Interactions

Instead of thinking: "I need to run the read_file command on src/app.ts"

You just say: "Show me the app.ts file" or "What's in src/app.ts?"

Instead of thinking: "I need to execute a search_and_replace operation"

You just say: "Rename all instances of oldFunction to newFunction"

Getting Started with Your First Task

1. Open Dropstone Agent

Open Dropstone Desktop and access the Agent panel from the sidebar.

2. Start a Conversation

Type your request in the chat input at the bottom. Here are some example first requests:

Explore Your Codebase:

Show me the structure of this project

Understand Code:

Explain what the main.ts file does

Get Help:

How do I add a new API endpoint to this Express app?

Fix Issues:

The login function isn't working - can you help?

3. Review Agent's Response

The agent will:

• Read your request
• Analyze what needs to be done
• Ask for approval if needed
• Show you the results
• Explain what it did

4. Continue the Conversation

You can ask follow-up questions, request changes, or give additional context:

Can you add error handling to that?

Actually, let's use async/await instead

Show me how to test this

Common Use Cases

Code Understanding

See File Contents

Show me what's in the UserService class

Understand Functions

What does the calculateDiscount function do?

Find Code

Where is the authentication logic?

Explore Structure

List all the API endpoints in this project

Code Creation

Create New Files

Create a new utility file for date formatting functions

Add Features

Add a feature to export user data to CSV

Generate Boilerplate

Create a new React component called UserProfile with props for name, email, and avatar

Create Tests

Generate tests for the validation functions

Code Modification

Fix Bugs

The submit button isn't working when the form is empty

Add Error Handling

Add try-catch blocks to all the API calls in userService.ts

Refactor Code

This function is too long - can you break it into smaller functions?

Update Functionality

Change the password validation to require at least one special character

Code Analysis

Find Problems

Are there any potential bugs in this authentication code?

Check Quality

Review the code quality of the OrderProcessor class

Assess Impact

What files would be affected if I change this API response format?

Find Dependencies

What other components use the Button component?

Testing

Generate Tests

Create unit tests for the shopping cart logic

Fix Failing Tests

These tests are failing - can you fix them?

Add Test Cases

Add edge case tests for the email validation

Documentation

Explain Code

Explain how the authentication system works

Generate Docs

Add JSDoc comments to all functions in utils.ts

Create README

Create a README explaining how to use this API

Using UI Features

Context Mentions with @

Type @ in the chat to add specific context to your request:

Add Files

@src/app.ts Can you explain this file?

Add Folders

@src/components Show me all the React components

Add URLs

@https://docs.stripe.com/api How do I integrate Stripe payments?

Reference Problems

@problems Fix all the TypeScript errors

Include Terminal Output

@terminal Why did this command fail?

Switch Modes

@mode architect Help me design the database schema

Context Menu (Right-Click)

Select code in your editor, right-click, and choose:

Add to Context (Ctrl+L / Cmd+L)

[Select code] → Right-click → Dropstone Agent → Add to Context
Then type: "What does this do?"

Explain Code

[Select code] → Right-click → Dropstone Agent → Explain Code

Improve Code

[Select code] → Right-click → Dropstone Agent → Improve Code

Fix Code

[Select code] → Right-click → Dropstone Agent → Fix Code

Attach Images

Click the image button (📎) in the chat input to attach screenshots:

UI Issues

[Attach screenshot] This button styling is broken - can you fix it?

Design Implementation

[Attach mockup] Implement this design for the user profile page

Error Messages

[Attach error screenshot] What does this error mean?

Agent Approval System

When You'll See Approval Requests

The agent will ask for approval before:

• Reading sensitive files (unless auto-approved)
• Creating or modifying files (unless auto-approved)
• Running commands (unless in allowed list)
• Making risky changes

Approval UI

When approval is needed, you'll see:

┌─────────────────────────────────────┐
│ 📄 The agent wants to read:        │
│ src/config/database.ts              │
│                                     │
│ [Approve]  [Reject]  [Auto-approve] │
└─────────────────────────────────────┘

Options:

• Approve - Allow this action once
• Reject - Don't allow this action
• Auto-approve - Always allow this type of action

Auto-Approve Configuration

Go to Settings → Auto-Approve to configure:

Read Operations

• ☑️ Auto-approve file reading
• ☑️ Auto-approve directory listing
• ☑️ Auto-approve code searches

Write Operations

• ☐ Auto-approve file creation
• ☐ Auto-approve file modifications
• ☐ Auto-approve file deletion

Execute Operations

• ☐ Auto-approve command execution
• Configure allowed commands list

Recommendation: Start with manual approvals, then enable auto-approve for operations you trust.

Understanding Agent Responses

Agent is Reading Files

🔍 Reading src/components/Button.tsx...

The agent is examining your code to understand it.

Agent is Planning

📋 Analyzing requirements...
Planning implementation steps...

The agent is thinking about the best approach.

Agent is Taking Action

✏️ Modifying src/api/users.ts...
Adding error handling to fetchUser function...

The agent is making changes to your code.

Agent is Verifying

✅ Running syntax check...
✅ Running type check...
✅ Running tests...

The agent is validating its changes.

Agent Needs Clarification

❓ I need more information:
- Which file should I modify?
- What should the function return?
- Should I create a new file or modify existing?

Provide the requested information to continue.

Agent Completed Task

✅ Task completed!

Summary:
- Modified 3 files
- Added error handling to all API calls
- Generated 12 new test cases
- All tests passing

Files changed:
- src/api/users.ts
- src/api/posts.ts
- tests/api.test.ts

Review the changes and continue if needed.

Pro Tips for Effective Use

1. Be Specific

Less Effective:

Fix the code

More Effective:

Fix the user registration form - it's not validating email addresses properly

2. Provide Context

Less Effective:

Add authentication

More Effective:

@src/api/users.ts Add JWT authentication to the user API endpoints.
Use the existing User model and create middleware for protected routes.

3. Break Down Complex Tasks

Less Effective:

Build a complete e-commerce system

More Effective:

First, let's create the product catalog API with endpoints for listing,
searching, and filtering products. We can add cart and checkout later.

4. Use Follow-Up Questions

Don't start over - build on the conversation:

You: Create a user registration function
Agent: [Creates function]
You: Add password strength validation
Agent: [Adds validation]
You: Also add email verification
Agent: [Adds email verification]

5. Reference Existing Code

Help the agent understand your patterns:

Create a new API endpoint for products, following the same pattern as
the users endpoint in src/api/users.ts

6. Ask for Explanations

If you don't understand something:

Before you make those changes, can you explain why that approach is better?

7. Request Multiple Options

Get alternatives to choose from:

Show me three different ways to implement caching for this API

Working with Different File Types

JavaScript/TypeScript

Add type definitions to all the functions in utils.ts

Python

Convert this Python script to use async/await for the API calls

React Components

Create a reusable Modal component with React hooks

CSS/Styling

Style the navigation bar to be sticky at the top with a shadow

Configuration Files

Update package.json to add the testing dependencies

Markdown/Documentation

Create API documentation for all the endpoints in routes/

Agent Modes

The agent operates in different modes for specialized tasks. You can switch modes using @mode or the agent will switch automatically based on your request.

Code Mode (Default)

For implementing features and modifying code.

Add a new feature to export reports to PDF

Debug Mode

For finding and fixing bugs.

@mode debug
The app crashes when users try to upload large files

Architect Mode

For system design and planning.

@mode architect
Help me design the database schema for a blog platform

Ask Mode

For questions and explanations.

@mode ask
What's the difference between async/await and Promises?

Orchestrator Mode

For complex multi-step workflows.

@mode orchestrator
Migrate this entire project from JavaScript to TypeScript

Keyboard Shortcuts

What Happens Behind the Scenes

When you make a request, here's what the agent does automatically:

1. Understands Your Intent - Analyzes what you're asking for
2. Plans the Approach - Decides the best way to accomplish it
3. Gathers Information - Reads relevant files and code
4. Takes Action - Makes changes, creates files, runs commands
5. Verifies Results - Checks syntax, types, runs tests
6. Reports Back - Shows you what was done and results

You don't need to know:

• Which tools the agent uses
• What commands are executed
• How files are read or written
• How code is parsed

You just need to:

• Describe what you want
• Review the results
• Approve when asked
• Provide feedback

Common Patterns

The "Explain Then Modify" Pattern

You: Explain how the authentication system works
Agent: [Provides explanation]
You: Now add two-factor authentication to it
Agent: [Implements 2FA]

The "Explore Then Fix" Pattern

You: Show me all the error handling in the API code
Agent: [Lists error handling patterns]
You: The user service is missing error handling for network failures
Agent: [Adds error handling]

The "Example Then Replicate" Pattern

You: @src/components/Button.tsx Create a similar Input component
Agent: [Creates Input component following Button patterns]

The "Iterative Improvement" Pattern

You: Create a login form
Agent: [Creates basic form]
You: Add validation
Agent: [Adds validation]
You: Add loading states
Agent: [Adds loading states]
You: Add error messages
Agent: [Adds error messages]

Troubleshooting

Agent Doesn't Understand

Try:

• Be more specific about which files or code
• Provide examples of what you want
• Use context mentions (@file, @folder)
• Break down the request into smaller steps

Agent Makes Wrong Changes

Do:

• Stop the operation (Esc or Cancel button)
• Use Git to revert changes
• Explain what went wrong
• Request the correct approach

Agent Asks Too Many Questions

Try:

• Provide more context upfront
• Use context mentions to reference existing code
• Be more detailed in initial request

Agent Takes Too Long

Check:

• Is the operation complex? (might need time)
• Are there many files to analyze?
• Try breaking into smaller tasks
• Check network connection (for research features)

Next Steps

• Learn the UI in detail - Master all interface features
• Explore Agent Modes - Use specialized modes effectively
• Read Best Practices - Get expert tips
• See Examples - Learn from real use cases

Remember: Dropstone Agent is a conversation partner, not a command-line tool. Just talk to it naturally about what you want to accomplish.