AI AgentsWorkshop Series
Developer Productivity

AI-Powered Development

Master VS Code Insider with GitHub Copilot Agent Mode

Learn to configure professional AI development environments with Claude Sonnet 4, MCP servers, and advanced prompting techniques that separate expert developers from basic prompt engineers.

Download VS Code Insider

VS Code Insider Edition

Essential for agentic development capabilities

Why VS Code Insider is Critical
Standard VS Code has limited agentic development features

Standard VS Code Limitations

  • Limited GitHub Copilot Agent mode features
  • Restricted MCP server integration
  • Delayed AI feature releases (3-6 months behind)
  • Basic chat interface with limited context
  • No advanced workspace understanding
  • Missing experimental AI capabilities

Insider Edition Benefits

  • Full GitHub Copilot Agent mode capabilities
  • Complete MCP server support
  • Latest AI features on day one
  • Advanced workspace context understanding
  • Multi-step task execution and planning
  • Access to experimental AI models

Installation Steps:

  1. Download VS Code Insider from the official website
  2. Install alongside your existing VS Code (they run independently)
  3. Install GitHub Copilot extension in Insider
  4. Enable Agent mode in Copilot settings
  5. Configure MCP servers for database integration
Download InsiderAgent Mode Docs

Why Claude Sonnet 4 is Critical

Free models are insufficient for professional development

Claude Sonnet 4

Recommended

Cost

$3.00/M input, $15.00/M output

Capabilities

Exceptional coding, complex reasoning, 72.7% SWE-bench

Assessment

State-of-the-art performance for professional development

Claude 3.5 Sonnet (Free)

Cost

Free with GitHub Copilot

Capabilities

Basic coding, limited context, simple tasks only

Assessment

Insufficient for complex agentic development workflows

GPT-4.1 / GPT-5 Mini

Cost

$1.25/M input, $10.00/M output

Capabilities

Good for simple tasks, moderate reasoning

Assessment

Acceptable for basic development, not for complex systems

Critical Investment Decision

The difference between Claude 3.5 (free) and Claude Sonnet 4 is not incremental—it's transformational. Claude Sonnet 4 achieves 72.7% on SWE-bench, making it capable of handling complex, multi-step development tasks that would be impossible with free models.

Professional developers understand: The cost of Claude Sonnet 4 ($3-15/M tokens) is negligible compared to the productivity gains and quality improvements it provides. Free models will limit your capabilities and waste your time on complex projects.

MCP Server Configuration

Connect your databases with natural language commands

Environment Variables Setup
Get your credentials from Vercel Storage dashboard

Neon PostgreSQL

Create Database
# Neon Database (from Vercel Storage)
DATABASE_URL="postgresql://username:password@ep-example-123456.us-east-1.aws.neon.tech/neondb?sslmode=require"

Upstash Vector

Create Database
# Upstash Vector Database (from Vercel Storage)
UPSTASH_VECTOR_REST_TOKEN="your_upstash_vector_rest_token_here"
UPSTASH_VECTOR_REST_READONLY_TOKEN="your_upstash_vector_readonly_token_here"
UPSTASH_VECTOR_REST_URL="https://your-database-name.upstash.io"

# Upstash MCP Server Credentials (from Upstash Console)
UPSTASH_EMAIL="your-email@example.com"
UPSTASH_API_KEY="your-upstash-api-key"

Credential Sources

From Vercel Storage:

  • DATABASE_URL (Neon)
  • UPSTASH_VECTOR_REST_* (Upstash)

From Provider Consoles:

  • Email + API Key (Upstash MCP)
.vscode/mcp.json Configuration
Configure MCP servers for natural language database operations

Security Best Practices

  • Never hardcode API keys in mcp.json
  • Use environment variables with $ syntax
  • Add .env to .gitignore
  • Use read-only tokens when possible
  • Review all AI-generated database operations before execution

Individual Server Configurations:

Neon PostgreSQL MCP
{
  "servers": {
    "neon": {
      "command": "npx",
      "args": ["-y", "@neondatabase/mcp-server-neon", "start", "${DATABASE_URL}"]
    }
  }
}
Upstash Vector MCP
{
  "servers": {
    "upstash": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/mcp-server",
        "run",
        "${UPSTASH_EMAIL}",
        "${UPSTASH_API_KEY}"
      ]
    }
  }
}

Combined Configuration:

{
  "servers": {
    "neon": {
      "command": "npx",
      "args": ["-y", "@neondatabase/mcp-server-neon", "start", "${DATABASE_URL}"]
    },
    "upstash": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/mcp-server",
        "run",
        "${UPSTASH_EMAIL}",
        "${UPSTASH_API_KEY}"
      ]
    }
  }
}

Natural Language Commands You Can Use:

Neon PostgreSQL:

  • "Create a users table with email and password"
  • "Show me all tables in my database"
  • "Add 10 sample users to the users table"
  • "Create a backup of my database"

Upstash Vector:

  • "Create a new Redis database in us-east-1"
  • "List all my databases"
  • "Show keys starting with 'user:'"
  • "Show throughput spikes for last 7 days"
Neon MCP DocsUpstash MCP Docs

Advanced Prompting Best Practices

Design-first approach vs. prompt-to-code

Professional vs. Amateur Approach
The difference between expert developers and prompt engineers

Amateur: Prompt-to-Code

  • Direct "build me X" requests
  • No architectural planning
  • Immediate code generation
  • Frequent refactoring needed
  • Security and scalability afterthoughts
  • Inconsistent patterns

Professional: Design-First

  • Comprehensive technical documentation
  • Architecture and system design
  • Security and performance planning
  • Stakeholder requirement gathering
  • Implementation roadmap
  • Consistent, maintainable code

Why Design-First Approach Works:

Better Planning:

  • Identifies edge cases early
  • Prevents architectural debt
  • Ensures scalability

Higher Quality:

  • Consistent code patterns
  • Built-in security measures
  • Performance optimization

Faster Development:

  • Less refactoring needed
  • Clear implementation path
  • Reduced debugging time
Advanced Prompt Template
Professional technical documentation prompt
Create a comprehensive technical design document for [YOUR_PROJECT_DESCRIPTION] before writing any code.

Please include the following sections in your analysis:

## 1. Architecture Overview
- System components and their relationships
- Data flow diagrams
- Technology stack recommendations
- Scalability considerations

## 2. Database Design
- Entity relationship diagrams
- Table schemas with proper indexing
- Data migration strategies
- Performance optimization plans

## 3. API Design
- RESTful endpoint specifications
- Request/response schemas
- Authentication and authorization flows
- Rate limiting and security measures

## 4. Frontend Architecture
- Component hierarchy and state management
- User experience flow
- Responsive design considerations
- Performance optimization strategies

## 5. Security Considerations
- Authentication mechanisms
- Data validation and sanitization
- CORS and security headers
- Vulnerability assessment

## 6. Testing Strategy
- Unit testing approach
- Integration testing plans
- End-to-end testing scenarios
- Performance testing requirements

## 7. Deployment Strategy
- Environment configurations
- CI/CD pipeline design
- Monitoring and logging setup
- Rollback procedures

## 8. Questions for Clarification
Please ask me specific questions about:
- Business requirements and constraints
- Performance expectations
- Security requirements
- Integration needs
- Timeline and resource constraints

After we finalize the design document, we can proceed with implementation. This approach ensures we build a robust, scalable solution that meets all requirements.

Advanced Prompting Techniques:

1. Context Layering:

Provide business context, technical constraints, and success criteria upfront.

2. Iterative Refinement:

Ask follow-up questions to clarify requirements before implementation.

3. Constraint Definition:

Specify performance, security, and scalability requirements explicitly.

4. Stakeholder Perspective:

Consider different user roles and their specific needs in the design.

Example Workflow:

1Submit comprehensive design prompt
2Review and refine technical documentation
3Answer clarification questions
4Approve final design document
5Begin implementation with clear roadmap

Ready for Professional AI Development! 🚀

You now have the tools and knowledge to build production-ready applications with AI assistance:

  • VS Code Insider with Agent mode
  • Claude Sonnet 4 for complex reasoning
  • MCP servers for database integration
  • Design-first development approach
  • Professional prompting techniques
Try Advanced RAG WorkshopBack to Main Workshop