Vibe Coding · Ders

Yapay Zekaya Bağlam Sağlama

Yapay zekanın projenize uyum sağlaması için dosyaları, hedefleri ve teknolojileri paylaşın.

Yapay Zekaya Bağlam Sağlama, CoddyKit'te ücretsiz bir Vibe Coding dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vibe Coding öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vibe Coding kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Yapay Zekaya Bağlam Sağlama” dersi ücretsiz mi?

Evet — “Yapay Zekaya Bağlam Sağlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vibe Coding kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vibe Coding kursu toplamda 4 dersten oluşur.

“Yapay Zekaya Bağlam Sağlama” dersinde ne öğreneceğim?

Yapay zekanın projenize uyum sağlaması için dosyaları, hedefleri ve teknolojileri paylaşın. Vibe Coding ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vibe Coding öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vibe Coding, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Yapay Zekaya Bağlam Sağlama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vibe Coding dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vibe Coding dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vibe Coding Sayfasına Dön