Vibe Coding · Aula

Fornecendo contexto à IA

Compartilhe arquivos, objetivos e tecnologias para que a IA se adapte ao seu projeto.

Fornecendo contexto à IA é uma aula grátis de Vibe Coding no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vibe Coding, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vibe Coding inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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.

Perguntas Frequentes

A aula “Fornecendo contexto à IA” é grátis?

Sim — o texto completo de “Fornecendo contexto à IA” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vibe Coding, atualize para CoddyKit PRO. O curso de Vibe Coding inclui 4 aulas no total.

O que vou aprender em “Fornecendo contexto à IA”?

Compartilhe arquivos, objetivos e tecnologias para que a IA se adapte ao seu projeto. Você pratica Vibe Coding com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vibe Coding?

Nenhuma experiência prévia é necessária. Vibe Coding no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Fornecendo contexto à IA”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vibe Coding?

Sim. Cada aula de Vibe Coding inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Vibe Coding