VDK Docs
Integrations

Claude Code

Documentation for Claude Code

Claude Code Integration

Claude Code is Anthropic's official CLI for AI-powered development. VDK CLI v2.0.1 provides seamless integration with Claude Code through the specialized ClaudeCodeAdapter, generating memory files and configurations optimized for Claude's context understanding.

Overview

The Claude Code integration creates:

  • Memory Hierarchy: .claude/ directory with structured memory files
  • Project Memory: CLAUDE.md file with comprehensive project context
  • Commands: CLAUDE_COMMANDS.md with slash command definitions
  • Context Optimization: Intelligent chunking for context windows
  • Blueprint Integration: Direct access to VDK-Blueprints repository content

Setup

Automatic Setup

# Initialize VDK with automatic platform detection
vdk init --interactive

# Or setup Claude Code specifically
vdk integrations --setup claude-code

# Verify high confidence integration
vdk status --check-integrations

Manual Setup

# Check if Claude Code is detected (should show high confidence)
vdk integrations --scan

# Manual setup if needed
vdk integrations --setup claude-code

# Validate generated configurations
vdk validate --platforms claude-code

Generated Files

.claude/ Directory Structure

The ClaudeCodeAdapter generates a comprehensive .claude/ directory:

.claude/
├── CLAUDE.md              # Main project memory
├── CLAUDE_COMMANDS.md     # Slash command definitions
├── blueprints/           # Selected blueprints from repository
│   ├── core-agent-behavior.md
│   ├── nextjs-patterns.md
│   ├── typescript-modern.md
│   └── supabase-integration.md
└── memory/               # Memory chunks for context optimization
    ├── project-overview.md
    ├── architecture-patterns.md
    └── coding-conventions.md

CLAUDE.md - Main Project Memory

Generated from VDK blueprint analysis:

# VDK Project Memory: my-nextjs-app

*Generated by VDK CLI v2.0.1 with 23 selected blueprints*

## Technology Stack
- **Framework**: Next.js 15 (App Router)
- **Language**: TypeScript 5.8
- **Styling**: Tailwind CSS 4
- **Database**: Supabase
- **Authentication**: Supabase Auth
- **Deployment**: Vercel

## Architecture Patterns
- **App Router**: Server Components by default
- **Feature-Sliced Design**: Domain-driven organization
- **Route Handlers**: API endpoints in app/api/
- **Middleware**: Edge runtime for authentication

## VDK Blueprint Integration
- **Core Rules**: 4 fundamental behavior patterns
- **Technology Rules**: 8 Next.js + Supabase specific patterns
- **Language Rules**: 2 TypeScript optimization patterns
- **Auto-Apply**: Enabled for continuous updates

## Project Conventions
- 2-space indentation, semicolons required
- Server components preferred, client components explicit
- Supabase Row Level Security patterns
- Tailwind utility-first approach

CLAUDE_COMMANDS.md - Slash Commands

Generated slash command definitions:

# VDK Claude Commands

## /analyze-project
**Description**: Analyze current project structure and suggest improvements
**Usage**: `/analyze-project [--deep]`
**Example**:

/analyze-project --deep


## /update-blueprints
**Description**: Refresh blueprints from VDK-Blueprints repository
**Usage**: `/update-blueprints [--force]`
**Example**:

/update-blueprints --force


## /validate-patterns
**Description**: Check code against VDK blueprint patterns
**Usage**: `/validate-patterns [file-pattern]`
**Example**:

/validate-patterns "**/*.tsx"


## /generate-component
**Description**: Generate component following project patterns
**Usage**: `/generate-component <name> [--type]`
**Example**:

/generate-component UserProfile --type server

Blueprint Integration Features

Automatic Blueprint Selection

VDK CLI analyzes your project and selects relevant blueprints:

# View selected blueprints
vdk status --verbose

# Output example:
# 📋 Selected Blueprints (23 total):
#   Core: agent-behavior, code-quality, security-practices
#   Technologies: nextjs-15, react-19, supabase, tailwind-4
#   Languages: typescript-modern
#   Stacks: nextjs-supabase

Context Optimization

ClaudeCodeAdapter optimizes memory for context windows:

<!-- Memory chunks are automatically sized -->
<!-- High-priority patterns loaded first -->
<!-- Project-specific context emphasized -->
<!-- Generic patterns de-emphasized -->

Real-time Updates

Blueprint changes trigger automatic updates:

# Enable watch mode for continuous updates
vdk init --watch

# Changes to .claude/ directory trigger:
# - Memory refresh
# - Blueprint re-evaluation
# - Context optimization

Features

Project Context Awareness

Claude Code gains deep understanding of:

  1. Technology Stack (from 109 blueprint database)

    Technology Detection (TechnologyAnalyzer):
- Framework: Next.js 15 (App Router)
- Language: TypeScript 5.8
- Runtime: Node.js ≥22.0.0
- Database: Supabase (PostgreSQL)
- Styling: Tailwind CSS 4
- Build Tool: Next.js built-in
- Deployment: Vercel
- Auth: Supabase Auth

  2. Architectural Patterns (from PatternDetector)

    Architecture Analysis:
- App Router with Server Components (Next.js 15 blueprint)
- Feature-Sliced Design organization
- Supabase Row Level Security patterns
- Real-time subscription patterns
- Edge middleware authentication

  3. Coding Conventions

    Code Style:
- 2-space indentation
- Single quotes for strings
- Semicolons required
- PascalCase for components
- camelCase for functions

Enhanced AI Responses

Before VDK Integration:

User: "Create a user profile component"
Claude: "I'll create a basic React component for you..."

After VDK Integration with VDK Blueprints:

User: "Create a user profile component"
Claude: "I'll create a user profile component following your VDK blueprint patterns:

- TypeScript with Supabase types (typescript-modern blueprint)
- Next.js 15 Server Component by default (nextjs-15 blueprint)
- Tailwind CSS 4 utility classes (tailwind-4 blueprint)
- Feature-sliced organization (/features/user/components/)
- Supabase auth integration with RLS (supabase blueprint)
- Responsive design with container queries
- Error boundaries following security practices
- A11y compliance (WCAG 2.1 AA)

Memory Management

VDK automatically manages Claude Code's project memory:

# Update configurations with latest blueprints
vdk update --verbose

# Re-analyze project and refresh memory
vdk scan --incremental

# Validate all Claude Code configurations
vdk validate --platforms claude-code

The memory system tracks:

  • Recent code changes
  • New dependencies added
  • Architectural decisions
  • Pattern evolutions
  • Team conventions

Configuration Options

Project-Level Configuration

Edit .claude/settings.json to customize behavior:

{
  "vdk": {
    "scanFrequency": "on-change",
    "memoryUpdateMode": "automatic",
    "ruleGeneration": {
      "includeExamples": true,
      "detailLevel": "comprehensive",
      "focusAreas": ["architecture", "patterns", "conventions"]
    },
    "integrations": {
      "hubSync": true,
      "teamSharing": true
    }
  }
}

User-Level Configuration

Global Claude Code settings in ~/.claude/settings.json:

{
  "vdk": {
    "globalTemplates": "/path/to/templates",
    "defaultHub": "https://vdk.tools",
    "telemetry": true
  }
}

Advanced Usage

Watch Mode

Enable continuous updates during development:

# Start VDK in watch mode
vdk init --watch

# Claude Code will automatically receive updates as you code

Custom Templates

Create project-specific templates:

# Create template directory
mkdir .claude/templates

# Add custom template
cat > .claude/templates/component.md << 'EOF'
# Component Template

When creating React components in this project:

1. Use TypeScript with proper interfaces
2. Place in appropriate feature directory
3. Include Storybook story if public component
4. Add unit tests with Testing Library
5. Follow accessibility guidelines (WCAG 2.1)
6. Use Tailwind for styling
7. Implement proper error boundaries
EOF

Team Synchronization

Keep team Claude Code instances synchronized:

# Deploy project rules for team
vdk deploy --team frontend-team

# Team members can update with:
vdk update
vdk claude-code --update-memory

Troubleshooting

Common Issues

Claude Code not detected:

# Check if Claude Code CLI is available
which claude

# If not installed, follow Anthropic's installation guide
# Then verify VDK detection:
vdk integrations --scan --confidence-threshold high

# Should show: Claude Code (high confidence)

Memory not updating:

# Force blueprint refresh and memory update
vdk update --force
vdk scan --dry-run

# Check integration status with details
vdk status --check-integrations --verbose

# Debug mode with blueprint fetching
VDK_DEBUG=true vdk update --verbose

Slash commands not working:

# Verify Claude directory structure
ls -la .claude/

# Should show: CLAUDE.md, CLAUDE_COMMANDS.md, blueprints/, memory/

# Recreate configurations
vdk integrations --setup claude-code

# Validate generated files
vdk validate --platforms claude-code --verbose

Debug Information

Enable debug mode for detailed logging:

# Debug VDK operations with blueprint details
VDK_DEBUG=true vdk status --check-integrations

# Debug blueprint fetching
VDK_DEBUG=true vdk update --verbose

# Validate all configurations
vdk validate --verbose

Best Practices

1. Regular Memory Updates

Update memory after significant changes:

# After adding new dependencies
npm install new-package
vdk scan --incremental  # Re-analyze project changes

# After architectural changes
vdk update --force      # Refresh blueprints
vdk scan                # Full project re-analysis
vdk validate            # Ensure configurations are valid

2. Use Slash Commands

Leverage VDK-generated slash commands for enhanced workflows:

  • /analyze-project --deep before major refactoring
  • /update-blueprints when new team members join
  • /validate-patterns to check code compliance
  • /generate-component for consistent component creation

3. Customize Memory Content

Edit CLAUDE.md to include project-specific information:

  • Business logic explanations
  • Domain-specific terminology
  • Integration patterns
  • Deployment procedures

4. Team Coordination

Establish team practices:

  • Regular rule updates from hub
  • Shared memory templates
  • Consistent project conventions
  • Documentation standards

Integration with Other Tools

VS Code Extension

If using Claude Code with VS Code:

// .vscode/settings.json
{
  "claude.projectMemory": "CLAUDE.md",
  "claude.autoUpdate": true,
  "claude.vdkIntegration": true
}

CI/CD Integration

Automate VDK updates in CI/CD:

# .github/workflows/vdk-update.yml
name: Update VDK Blueprints
on:
  push:
    branches: [main]
jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
      - name: Update VDK
        env:
          VDK_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          npm install -g @vibe-dev-kit/cli
          vdk update --force
          vdk scan
          vdk validate

Next Steps

Edit on GitHub

IDE Integrations

Connect VDK with your favorite AI assistants and development environments

Cursor Integration

VDK integration with Cursor's AI-powered code editor using MDC format

On this page

Claude Code Integration
Overview
Setup
Automatic Setup
Manual Setup
Generated Files
.claude/ Directory Structure
CLAUDE.md - Main Project Memory
CLAUDE_COMMANDS.md - Slash Commands
Blueprint Integration Features
Automatic Blueprint Selection
Context Optimization
Real-time Updates
Features
Project Context Awareness
Enhanced AI Responses
Memory Management
Configuration Options
Project-Level Configuration
User-Level Configuration
Advanced Usage
Watch Mode
Custom Templates
Team Synchronization
Troubleshooting
Common Issues
Debug Information
Best Practices
1. Regular Memory Updates
2. Use Slash Commands
3. Customize Memory Content
4. Team Coordination
Integration with Other Tools
VS Code Extension
CI/CD Integration
Next Steps