Chuyển đến nội dung chính

Lesson 9: Context Management — Providing context for AI

The role of context window. How to attach files, folders, selections. #file, #selection, #editor references. Workspace indexing. Codebase-aware prompting. Tips for keeping context concise and effective. When do you need new session vs continue session.

💻 Programming — Lesson 9 Lesson 9: Context Management — Providing language scenes for AI

Vibe Coding with GitHub Copilot: From Basics to Advanced

Part 3: Prompt Engineering for Code

xdev.asia

1. What is Context and why is it important?

AI model can only "see" what is inside context window — the amount of text it processes per request. If you don't provide enough context, the AI ​​will "guess" and often guess wrong.

Context window: [System prompt + Custom instructions + Your prompt + Attached files + History]
                ↑ tất cả phải fit trong giới hạn tokens của model

Good Context = Good Code. This is principle #1 of effective Vibe Coding.

2. Types of contexts in Copilot

2.1. Implicit Context (automatic)

Copilot automatically collects:

  • File is active in editor
  • Selection current (if any)
  • Open tabs
  • Workspace structure (file/folder tree)
  • Diagnostics (errors, warnings)
  • Terminal output nearest

2.2. Explicit Context (you provide)

You proactively attach:

  • #file: attach specific file
  • #selection: the code being selected
  • #editor: entire visible area in the editor
  • #codebase: search semantics in workspace
  • #terminalLastCommand: output of the command just run
  • Drag & drop files into chat
  • Images: attach screenshots (Mar 2026 feature)

3. Use Context Variables

3.1. #file — Attach specific file

// Trong Chat view:
Look at #file:src/models/User.ts and #file:src/services/AuthService.ts
and create a password reset flow following the same patterns.

When typing #file:, VS Code displays the file picker for you to choose from.

3.2. #selection — Code is selecting

// Select đoạn code trong editor, rồi trong Chat:
Explain #selection and suggest how to optimize it for performance.

3.3. #codebase — Search semantics in workspace

// Copilot tự tìm files liên quan trong codebase:
#codebase How is authentication implemented in this project?
Show me the auth middleware and token verification logic.

3.4. #terminalLastCommand — Output terminal

// Sau khi chạy test fail trong terminal:
#terminalLastCommand Fix the failing tests. Analyze the error output
and make the necessary code changes.

4. Workspace Indexing

VS Code automatically indexes the workspace so Copilot understands the codebase:

  • Semantic index: understand the meaning of code (functions, classes, relationships)
  • Symbol index: function name, variables, types
  • File structure: know project structure

When the Agent runs, it can use tools such as search. search, listDir, read to proactively explore the codebase — not just based on the context you provide.

5. Effective Context Strategy

5.1. Open the correct files before prompting

// Trước khi viết prompt "Create UserService":
// Mở các files liên quan trong editor tabs:
Tab 1: models/User.ts        → Copilot biết User schema
Tab 2: services/AuthService.ts → Copilot biết coding pattern
Tab 3: routes/authRoutes.ts   → Copilot biết route conventions
Tab 4: tests/auth.test.ts     → Copilot biết testing pattern

5.2. Reference existing patterns

// Thay vì mô tả pattern từ đầu:
Create a ProductService following the exact same pattern as
#file:src/services/UserService.ts — same error handling,
same repository pattern, same validation approach.

5.3. Provide explicit constraints

// Context about project conventions:
Our project uses:
- Prisma for database (schema at #file:prisma/schema.prisma)
- Zod for validation (see pattern in #file:src/schemas/userSchema.ts)
- Custom AppError class for errors (#file:src/utils/AppError.ts)

Now create the OrderService with CRUD operations.

6. When is New Session vs Continued Session?

Situation Action Reason
Continue with the same feature Continue Keep context + history
Completely new features New session Context is clean, no noise
Context is too long New session + summary Avoid context overflow
Agent goes in the wrong direction New session + rephrase Reset mistakes in history
Debug related issues Continue AI needs to know how to fix it first

Tip: Summary when creating a new session

// Khi context quá dài, tạo new session với summary:
Context from previous session:
- We're building a task management app with Next.js 15 + Prisma
- Backend API is done (auth, CRUD for tasks, projects)
- Database schema is finalized
- Currently working on frontend

Continue from: Create the Task list page component with filtering and sorting capabilities.

7. Images as Context (2026 Feature)

From March 2026, you can attach images Go to agent sessions:

  • Screenshot of UI design → "Build this UI"
  • Screenshot of error → "Fix this error"
  • Diagram/wireframe → "Implement this architecture"
  • Figma export → "Convert this design to React components"

8. Anti-patterns should be avoided

  • Dump the entire codebase: too much context = noise, AI is confused
  • No context provided: AI must guess everything
  • Attach file is not relevant: waste context window
  • Continue session is too long: context degrade, AI "forgets" the first information
  • Copy-paste error without formatting: causes confusion for AI

9. Summary

Context management is a skill determines the quality of Vibe Coding:

  • ✅ Open the correct files → good implicit context
  • ✅ Use #file, #selection, #codebase → explicit context correctly
  • ✅ Reference existing patterns → consistent output
  • ✅ New session when context bloated → avoid degradation
  • ✅ Attach images for UI tasks → visual context

The next song will be a cover Advanced Prompt Patterns — slash commands, chat participants, and how to build your own prompt library.