Vibe Coding · Lesson

Giving the AI Context

Share files, goals and tech so AI fits your project.

Giving the AI Context is a free Vibe Coding lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vibe Coding learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Context Changes Everything

The same prompt can produce wildly different code depending on what the AI knows about your project. A prompt with no context makes the AI guess your framework, your style, even your file names.

Give it context, and the code drops right into your project — same conventions, same style, no rewrites. This lesson is about feeding the AI the right background.

Three Kinds of Context

Useful context comes in three flavors:

Project context — your tech stack, framework, conventions
Code context — the actual files and snippets you're working with
Goal context — the bigger 'why' behind the task

The best prompts weave in all three so the AI builds something that truly fits.

Project Context: Your Stack

Always tell the AI what you're building with. 'React with Tailwind' produces very different code than 'plain HTML and CSS'. Naming your stack stops the AI from importing libraries you don't have.

"This project uses React, TypeScript and Tailwind CSS.
 We use functional components and hooks only — no class
 components. Build a reusable <Avatar /> component that
 shows a circular user image with a fallback initial."

Code Context: Show Your Files

The biggest upgrade to any prompt is pasting the actual code you're working with. Now the AI matches your variable names, your style, and your existing structure instead of inventing new ones.

"Here's my current cart code:

  let cart = [];
  function addItem(name, price) {
    cart.push({ name, price });
  }

Add a function removeItem(name) that removes the first
matching item, and a total() function that sums the prices."

Editors Share Context Automatically

Tools like Cursor and Claude Code can read your open files and project structure for you. In Cursor you can tag files with @filename to pull them into the prompt.

This is why AI-native editors feel smarter than a plain chatbot — they already know your codebase.

In Cursor's chat:

"Look at @cart.js and @checkout.js.
 The total in checkout doesn't match the cart.
 Find why and fix it."

Goal Context: The 'Why'

Telling the AI why you're doing something helps it make smarter choices. If it knows the app is for kids, or must work offline, or needs to be ultra-fast, it adapts the code accordingly.

"This is a flashcard app for young children, so the UI must
 be large, colorful, and tappable with no small targets.
 Build the answer-reveal button with that in mind."

Context Helps the AI Match Your Style

When you show existing code, the AI mirrors your conventions. Here's a style the AI would copy if you pasted it — notice the arrow functions and naming. Asking for 'one more like this' keeps the codebase consistent.

This snippet runs on its own so you can see the pattern in action.

const formatPrice = (n) => '$' + n.toFixed(2);
const formatPercent = (n) => n.toFixed(0) + '%';

// Ask AI: "Add formatDate in this same arrow-function style."
console.log(formatPrice(12.5));
console.log(formatPercent(0.42 * 100));

A Project Context File

Pro move: keep a short context file the AI reads every time. Cursor uses .cursorrules and Claude Code uses CLAUDE.md. Put your stack, conventions and do/don't rules there once.

Now you never have to repeat yourself in every prompt.

Example CLAUDE.md:

# Project Conventions
- Stack: Next.js + Tailwind
- Use TypeScript, no 'any'
- Components in /components, one per file
- Prefer small, pure functions
- Never add a dependency without asking

Too Much Context Is Real Too

Context is powerful but not free. Dumping ten unrelated files confuses the AI and buries the part that matters. Share what's relevant to this task, not your whole project.

Aim for: the file you're changing, the file it talks to, and a one-line description of the stack.

Context Stops Hallucinations

When the AI lacks context, it sometimes invents function names, files or APIs that don't exist — called a hallucination. Giving real code grounds it in reality.

If the AI keeps referencing things you never wrote, that's a sign: it needs more context, not a better model.

Symptom of missing context:

  AI: "Just call your existing saveUser() helper."
  You: "...I don't have a saveUser() helper."

Fix: paste the real file so the AI sees what exists.

A Fully-Contextualized Prompt

Here's everything combined: stack, real code, and the goal. This is the kind of prompt that gets production-ready code that fits on the first try.

"Stack: plain HTML/CSS/JS, single index.html. (PROJECT)

Here's my current toggle code:
  const btn = document.querySelector('#theme');
  btn.onclick = () => document.body.classList.toggle('dark'); (CODE)

Goal: I want the theme choice to persist after refresh, since
 users hate re-toggling every visit. Add localStorage. (GOAL)"

Quick Check

The AI keeps suggesting you call functions and files that don't exist in your project. What's the most likely cause and fix?

Recap: Ground the AI in Your World

Context turns generic code into code that fits. Always consider sharing:

Project context — your stack and conventions
Code context — the real files (tag them in Cursor/Claude Code)
Goal context — the 'why' behind the task

Keep a CLAUDE.md or .cursorrules so you don't repeat yourself, and share only what's relevant. Next: how to iterate — refining a prompt step by step instead of starting over.

Frequently asked questions

Is the “Giving the AI Context” lesson free?

Yes — the full text of “Giving the AI Context” is free to read here on the web, and the Vibe Coding course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vibe Coding course, upgrade to CoddyKit PRO.

What will I learn in “Giving the AI Context”?

Share files, goals and tech so AI fits your project. You practise Vibe Coding with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vibe Coding?

No prior experience is required. Vibe Coding on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Giving the AI Context” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vibe Coding lesson?

Yes. Every Vibe Coding lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vibe Coding