Good vs Bad Context: A Side-by-Side Comparison

beginner 10 min 📋 Copy-paste ready

Sources not yet verified

contextpromptingbeginnerside-by-side

Scenario

Context: You're debugging a React component that's throwing a TypeError

Goal: Get AI to help you find and fix the bug efficiently

Anti-pattern: Asking 'fix this bug' with no context, expecting AI to read your mind

Tools: GitHub Copilot ChatClaudeCursor

Conversation

The Bad Way

First, let's see what NOT to do:

👤 You ✗ Bad example

Fix this bug

No context at all. The AI has no idea what bug, what code, or what language.

🤖 AI

I'd be happy to help fix the bug! However, I need more information:

What programming language/framework are you using?
What error message are you seeing?
Can you share the relevant code?
What behavior did you expect vs. what actually happened?

Please provide these details so I can assist you effectively.

The AI has to ask for context that should have been provided upfront. This wastes time and breaks flow.

The Good Way

Now let's see effective context curation:

👤 You

I'm getting a TypeError in my React app. Here's the error and component:

Error:

TypeError: Cannot read property 'map' of undefined
  at UserList (UserList.tsx:5:18)

Component (UserList.tsx):

import React from 'react';

interface User {
  id: string;
  name: string;
}

function UserList({ users }: { users: User[] }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

Called from Dashboard.tsx line 42:

<UserList users={userData} />

userData comes from an API call in a useEffect.

Includes: error message with stack trace, relevant code, where it's called from, and data source context.

🤖 AI

The issue is that users is undefined when the component first renders, before your API call completes.

The Fix:

Add a guard clause or default value:

function UserList({ users = [] }: { users: User[] }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Or add a loading state:

function UserList({ users }: { users: User[] | undefined }) {
  if (!users) return <div>Loading...</div>;
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Why this happens: React renders immediately, before your useEffect runs. The initial userData state is likely undefined until the API responds.

The default value approach (users = []) is simpler. The loading state approach is better UX if the API call takes noticeable time.

With good context, the AI immediately identifies the root cause, provides multiple solutions, and explains why the bug occurs.

Key Takeaways

Always include the exact error message with stack trace
Show the relevant code, not just describe it
Provide context about where the code is called from
Mention the data source (API, state, props) when relevant
Good context = faster, more accurate help

Try It Yourself

Prompt Template

I'm getting [ERROR] in my [LANGUAGE/FRAMEWORK] app.

**Error:**
```
[paste exact error here]
```

**Code:**
```
[paste relevant code here]
```

**Context:**
- Called from: [where]
- Data comes from: [source]

Variations to Try

Add: 'I've already tried [X] but it didn't work because [Y]'
Add: 'The expected behavior is [X] but instead I see [Y]'
Add: 'This started happening after I [recent change]'

Sources

Tempered AI — Forged Through Practice, Not Hype

? Keyboard shortcuts