🤖 What Are AI Agents?
As you begin Web Development II, you'll discover that AI agents work differently from the AI chat tools you might know. Understanding this difference will help you collaborate more effectively on your projects.
AI Chat vs. AI Agents: Key Differences
Regular AI Chat
- Works with single conversations
- Can't see your project files
- Forgets context when conversation ends
- Gives suggestions you copy/paste manually
- Limited to text responses only
AI Agents
- Can read and edit your actual project files
- Understands your entire project structure
- Remembers context between work sessions
- Makes changes directly to multiple files
- Follows rules you set in instruction files
📁 How Agents Get Context From Your Files
AI agents can read various files in your project to understand what you're building and how to help you. Here's what they can access:
Types of Context Agents Use
📄 Project Files
- Your HTML pages
- CSS stylesheets
- README files
- Any documentation you create
⚙️ Instruction Files
.github/copilot-instructions.mdAGENTS.md- Project-specific rules
- Your learning preferences
📝 Project Structure
- Folder organization
- File naming patterns
- Git commit history
- How files relate to each other
💡 Why This Matters for Your Projects
When an agent can see your existing HTML structure and CSS, it can suggest changes that work with your current design instead of starting from scratch. It's like having a coding partner who knows your project as well as you do!
🗣️ Basic Context Provision
To get the best help from AI agents, you need to provide good context. Here are simple ways to start:
Essential Information to Share
1. Your Current Skill Level
Example:
"I just completed Web Development I. I know HTML5, CSS Grid, Flexbox, and basic responsive design. I'm working on my portfolio site and need help with advanced CSS animations."
2. What You're Trying to Accomplish
Example:
"I want to add hover effects to my portfolio gallery. The images should scale slightly and show an overlay with the project title when someone hovers over them."
3. Your Project Constraints
Example:
"This is for Web Dev II, so I can only use HTML and CSS - no JavaScript. The site needs to work on mobile and follow accessibility best practices."
⚙️ Agent Configuration: Teaching Agents About Your Project
While providing context in prompts is important, there's an even more powerful approach: Agent Configuration. This means creating special files that automatically teach AI agents about your project before you even start prompting.
💡 Configuration vs. Prompting
Prompting: You tell the agent about your project every time you ask for help
Configuration: You set up files once, and the agent automatically knows your project context forever
What Are Agent Configuration Files?
Configuration files are special instruction files you place in your repository that different AI tools can read automatically. They contain permanent information about your project that agents should always know.
📄 .github/copilot-instructions.md
For: GitHub Copilot Agent Mode
- Project type and constraints
- Coding standards you follow
- Accessibility requirements
- Preferred approaches
📄 CLAUDE.md
For: Claude Code and Claude agents
- Repository context and purpose
- Technical constraints
- Code style preferences
- Development approach
📄 AGENTS.md
For: Advanced AI agent systems
- Complex project workflows
- Multi-tool coordination
- Advanced agent behaviors
- Professional team standards
Why Configuration Files Matter for Web Dev II
Before Configuration (Typical Student Experience)
"I'm a Web Dev II student working on my portfolio. I can only use HTML and CSS, no JavaScript. I need WCAG AA accessibility. I'm using CSS Grid for layout. Can you help me add hover effects to my project cards?"
Problem: You have to explain this context every single time!
After Configuration (Professional Workflow)
"Add hover effects to my project cards"
Result: The agent already knows your constraints, skill level, and project context from your configuration files!
Setting Up Your First Configuration File
Quick Start: .github/copilot-instructions.md
GitHub Copilot Agent Mode is perfect for Web Dev II students. Here's how to set it up:
Create the folder structure
In your project root, create a `.github` folder, then create `copilot-instructions.md` inside it.
Add basic Web Dev II configuration
Test your configuration
Now when you ask GitHub Copilot for help, it will automatically know your constraints and provide appropriate HTML/CSS-only solutions!
🎯 Try It Yourself
Create your first configuration file for your current Web Dev II project. Even a basic setup will immediately make your AI interactions more effective. You'll see the difference right away when you ask for help!
Configuration vs. Memory Files
It's important to understand how configuration files work with the memory files you'll learn about later:
⚙️ Configuration Files
- Purpose: Permanent agent behavior
- Content: Technical constraints, coding standards
- Frequency: Set once, works forever
- Examples: "Use HTML/CSS only", "Follow WCAG AA"
📝 Memory Files
- Purpose: Project documentation and history
- Content: Goals, progress, design decisions
- Frequency: Updated regularly as project evolves
- Examples: project-goals.md, progress-log.md
Think of configuration as the "rules of the game" that never change, while memory files are the "story of your project" that grows over time. Both work together to give agents complete context about your work.
✨ Simple Prompt Examples
Here are some effective ways to ask for help that agents can understand and act on:
Portfolio Project Prompts
❌ Vague Prompt
"Make my portfolio look better"
✅ Clear Prompt
"Add CSS Grid to my portfolio section with 3 columns on desktop, 2 on tablet, and 1 on mobile. Include hover effects that scale the project cards and ensure it works with screen readers."
❌ Too General
"Help with CSS"
✅ Specific Request
"Review my contact form CSS for accessibility issues. I want to make sure the labels are properly associated and the focus indicators are visible for keyboard users."
Key Elements of Good Prompts
- 🎯 Specific goal: What exactly do you want to achieve?
- 📱 Technical requirements: Responsive? Accessible? CSS-only?
- 🔗 Context: How does this relate to your existing project?
- 🎨 Visual outcome: What should the user see and experience?
🚀 Getting Started With Your First Agent Interaction
Ready to try working with an AI agent? Here's a simple step-by-step approach for your first interaction:
Step-by-Step First Interaction
Set Up Your Project Context
Create a simple project-goals.md
file that describes what you're building and what help you need.
Start With a Small Request
Ask for help with one specific element, like "improve the hover effect on my navigation menu" rather than "redesign my whole site."
Review and Learn
Look at what the agent created, understand how it works, and ask follow-up questions about anything that's unclear.
Build on Success
Once you're comfortable with simple requests, gradually ask for more complex help as your confidence grows.
🎯 Your First Agent Challenge
Try asking an agent to help you add a subtle animation to one element on your current project. Use the specific prompt structure you learned above, and remember to mention your skill level and project constraints!