AI Development Tools - anubissbe/ProjectHub-Mcp GitHub Wiki

AI Development Tools Configuration

This guide covers how to configure and use various AI coding assistants with the Task Management WebUI project, including Claude Code, Cline, Continue, and other popular AI development tools.

🤖 Overview

AI coding assistants can significantly accelerate development by providing code generation, debugging help, documentation assistance, and architectural guidance. This project is designed to work seamlessly with modern AI development tools.

🎯 Claude Code Configuration

Setup and Access

Claude Code is Anthropic's official CLI and web interface for Claude.

Installation:

# Install Claude Code CLI (if available)
npm install -g @anthropic-ai/claude-code

# Or use via web interface
# Visit: https://claude.ai/code

Project Configuration:

# Navigate to project root
cd /path/to/task-management-webui

# Create Claude configuration (if using CLI)
cat > .claude-config.json << 'EOF'
{
  "projectName": "Task Management WebUI",
  "description": "Modern task management application with React, TypeScript, Node.js, and PostgreSQL",
  "framework": "fullstack",
  "technologies": [
    "React 19",
    "TypeScript",
    "Node.js",
    "Express",
    "PostgreSQL",
    "Docker",
    "Tailwind CSS",
    "Zustand",
    "Socket.io"
  ],
  "structure": {
    "frontend": "./frontend",
    "backend": "./backend",
    "database": "./infrastructure/postgres",
    "docs": "./wiki"
  }
}
EOF

Context Files for Claude:

# Create CLAUDE.md in project root (already exists)
# This file provides project context to Claude Code

# Key sections to maintain:
# - Project overview and architecture
# - Development commands and workflows
# - Database connection strings
# - Environment setup instructions
# - Testing and deployment procedures

Usage Tips

Effective Prompts for Claude Code:

# Architecture Questions
"Explain the real-time WebSocket architecture in this project"
"How does the state management work with Zustand?"

# Code Generation
"Create a new React component for task filtering"
"Add API endpoint for bulk task operations"

# Debugging
"Help debug this TypeScript error in the task store"
"Why are WebSocket connections failing?"

# Documentation
"Update the API documentation for the new endpoints"
"Create troubleshooting guide for Docker issues"

📝 Cline (Claude in VS Code)

Installation and Setup

Cline brings Claude directly into VS Code for seamless development.

Installation:

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for "Cline"
  4. Install the official Cline extension
  5. Configure with your Anthropic API key

VS Code Settings (.vscode/settings.json):

{
  "cline.apiKey": "${ANTHROPIC_API_KEY}",
  "cline.model": "claude-3-sonnet-20240229",
  "cline.projectContext": {
    "name": "Task Management WebUI",
    "type": "fullstack",
    "frameworks": ["React", "Node.js", "TypeScript"],
    "database": "PostgreSQL"
  },
  "cline.ignorePatterns": [
    "node_modules/**",
    "dist/**",
    "build/**",
    ".git/**",
    "*.log"
  ],
  "cline.includeContext": [
    "package.json",
    "tsconfig.json",
    "docker-compose.yml",
    "README.md",
    "CLAUDE.md"
  ]
}

Workspace Configuration (.vscode/cline.json):

{
  "projectInfo": {
    "name": "Task Management WebUI",
    "description": "Enterprise-grade task management application",
    "version": "1.0.0",
    "technologies": {
      "frontend": {
        "framework": "React 19",
        "language": "TypeScript",
        "styling": "Tailwind CSS",
        "stateManagement": "Zustand",
        "routing": "React Router",
        "buildTool": "Vite"
      },
      "backend": {
        "runtime": "Node.js",
        "framework": "Express",
        "language": "TypeScript",
        "database": "PostgreSQL",
        "realtime": "Socket.io"
      },
      "infrastructure": {
        "containerization": "Docker",
        "database": "PostgreSQL with pgvector",
        "deployment": "Docker Compose"
      }
    }
  },
  "codebaseStructure": {
    "frontend/": "React TypeScript application",
    "backend/": "Node.js Express API server",
    "infrastructure/": "Docker and database configuration",
    "wiki/": "Documentation and guides",
    "scripts/": "Utility and deployment scripts"
  },
  "developmentWorkflows": {
    "setup": "docker compose up -d",
    "frontend": "cd frontend && npm run dev",
    "backend": "cd backend && npm run dev",
    "test": "npm test in respective directories",
    "build": "npm run build in respective directories"
  }
}

Usage Patterns

Common Cline Commands:

# Code Generation
/generate React component for task calendar view
/create API endpoint for task dependencies
/add TypeScript interfaces for new features

# Code Review and Refactoring
/review this component for performance issues
/refactor this function to use modern React patterns
/optimize this database query

# Documentation
/document this API endpoint
/create README for this component
/add JSDoc comments to these functions

# Debugging
/debug why this WebSocket connection fails
/fix TypeScript errors in this file
/help resolve this Docker issue

🔧 Continue.dev Configuration

Installation and Setup

Continue is an open-source AI coding assistant for VS Code.

Installation:

  1. Install Continue extension in VS Code
  2. Configure with your preferred AI model
  3. Set up project-specific context

Configuration (.continue/config.json):

{
  "models": [
    {
      "title": "Claude 3 Sonnet",
      "provider": "anthropic",
      "model": "claude-3-sonnet-20240229",
      "apiKey": "${ANTHROPIC_API_KEY}"
    },
    {
      "title": "GPT-4",
      "provider": "openai",
      "model": "gpt-4",
      "apiKey": "${OPENAI_API_KEY}"
    }
  ],
  "systemMessage": "You are a senior full-stack developer working on a Task Management WebUI built with React, TypeScript, Node.js, and PostgreSQL. The project uses modern best practices including Docker containerization, real-time WebSocket communication, and comprehensive testing.",
  "contextProviders": [
    {
      "name": "files",
      "params": {
        "include": [
          "**/*.ts",
          "**/*.tsx",
          "**/*.js",
          "**/*.jsx",
          "**/*.json",
          "**/*.md",
          "**/*.yml",
          "**/*.yaml"
        ],
        "exclude": [
          "**/node_modules/**",
          "**/dist/**",
          "**/build/**",
          "**/.git/**"
        ]
      }
    },
    {
      "name": "terminal",
      "params": {}
    },
    {
      "name": "problems",
      "params": {}
    }
  ],
  "slashCommands": [
    {
      "name": "edit",
      "description": "Edit highlighted code"
    },
    {
      "name": "comment",
      "description": "Add comments to code"
    },
    {
      "name": "share",
      "description": "Share code context"
    },
    {
      "name": "cmd",
      "description": "Run terminal command"
    }
  ]
}

Project Context File (.continue/context.md):

# Task Management WebUI Project Context

## Architecture Overview
- **Frontend**: React 19 with TypeScript, Vite, Tailwind CSS
- **Backend**: Node.js with Express, TypeScript, Socket.io
- **Database**: PostgreSQL with pgvector extension
- **State Management**: Zustand with persistence
- **Real-time**: WebSocket communication via Socket.io
- **Deployment**: Docker and Docker Compose

## Key Features
- Multi-view task management (Board, List, Calendar, Timeline)
- Real-time collaboration and updates
- Advanced analytics and reporting
- Time tracking and project management
- Comprehensive API with WebSocket support

## Development Commands
- `docker compose up -d` - Start all services
- `cd frontend && npm run dev` - Start frontend development
- `cd backend && npm run dev` - Start backend development
- `npm test` - Run tests
- `npm run build` - Build for production

## Important Files
- `docker-compose.yml` - Service orchestration
- `frontend/src/store/` - Zustand state management
- `backend/src/routes/` - API endpoints
- `infrastructure/postgres/` - Database schema
- `wiki/` - Comprehensive documentation

🚀 GitHub Copilot Configuration

Setup for Task Management WebUI

Installation:

  1. Install GitHub Copilot extension in VS Code
  2. Sign in with GitHub account
  3. Configure for TypeScript/React development

VS Code Settings (.vscode/settings.json):

{
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "plaintext": false,
    "markdown": true,
    "typescript": true,
    "typescriptreact": true,
    "javascript": true,
    "javascriptreact": true
  },
  "github.copilot.editor.enableAutoCompletions": true,
  "github.copilot.advanced": {
    "secret_key": "task-management-webui",
    "inlineSuggestEnable": true
  }
}

Copilot Context Files:

# Create .copilotignore
cat > .copilotignore << 'EOF'
node_modules/
dist/
build/
.git/
*.log
.env
.env.local
.env.production
EOF

Effective Usage Patterns

Function Signatures for Better Suggestions:

// Good: Descriptive function names and types
async function createTaskWithDependencies(
  projectId: string,
  taskData: CreateTaskRequest,
  dependencies: string[]
): Promise<TaskResponse> {
  // Copilot will suggest relevant implementation
}

// Good: Clear component props
interface TaskBoardProps {
  projectId: string;
  tasks: Task[];
  onTaskUpdate: (taskId: string, updates: Partial<Task>) => void;
  onTaskMove: (taskId: string, newStatus: TaskStatus) => void;
}

export function TaskBoard({ projectId, tasks, onTaskUpdate, onTaskMove }: TaskBoardProps) {
  // Copilot will suggest appropriate component logic
}

🤖 Other AI Tools Configuration

Tabnine

Setup:

{
  "tabnine.experimentalAutoImports": true,
  "tabnine.disable_line_regex": [],
  "tabnine.disable_file_regex": [
    ".*\\.log$",
    ".*\\.env$"
  ]
}

CodeWhisperer (Amazon)

Configuration:

{
  "aws.codeWhisperer.shareCodeWhispererContentWithAWS": false,
  "aws.codeWhisperer.includeSuggestionsWithCodeReferences": false
}

Cursor AI

Project Settings (.cursor-settings.json):

{
  "aiModel": "claude-3-sonnet",
  "codebaseContext": {
    "enabled": true,
    "maxFiles": 100,
    "includePaths": [
      "frontend/src/**",
      "backend/src/**",
      "*.md",
      "*.json",
      "*.yml"
    ],
    "excludePaths": [
      "node_modules/**",
      "dist/**",
      ".git/**"
    ]
  },
  "suggestions": {
    "enabled": true,
    "languages": ["typescript", "typescriptreact", "javascript", "markdown"]
  }
}

📋 Best Practices for AI-Assisted Development

Code Quality Guidelines

1. Provide Clear Context:

// Good: Clear intentions and context
/**
 * Updates a task status and triggers real-time notifications
 * Used in the task board drag-and-drop functionality
 * @param taskId - UUID of the task to update
 * @param newStatus - New status from TaskStatus enum
 * @param userId - ID of user making the change (for audit trail)
 */
async function updateTaskStatus(taskId: string, newStatus: TaskStatus, userId: string) {
  // AI will generate better suggestions with this context
}

2. Use Descriptive Names:

// Good: AI understands the purpose
const useTaskBoardRealTimeUpdates = (projectId: string) => {
  // Clear hook purpose for WebSocket task updates
};

// Good: Clear component responsibility
const TaskDependencyGraph = ({ tasks, onDependencyChange }: Props) => {
  // AI knows this handles task dependency visualization
};

3. Maintain Consistent Patterns:

// Establish patterns AI can learn from
export const taskAPI = {
  async getTasks(projectId: string): Promise<Task[]> { /* ... */ },
  async createTask(data: CreateTaskRequest): Promise<Task> { /* ... */ },
  async updateTask(id: string, updates: Partial<Task>): Promise<Task> { /* ... */ },
  async deleteTask(id: string): Promise<void> { /* ... */ },
};

// AI will suggest similar patterns for other APIs
export const projectAPI = {
  // AI will suggest consistent method signatures
};

Documentation Integration

AI-Friendly Documentation:

/**
 * Task Management WebUI - Real-time Task Updates
 * 
 * This module handles real-time task synchronization using Socket.io
 * WebSocket connections. It maintains consistency between multiple
 * users working on the same project.
 * 
 * Architecture:
 * - Client subscribes to project-specific rooms
 * - Server broadcasts task changes to all room members
 * - UI updates automatically without page refresh
 * 
 * Events:
 * - task:created - New task added to project
 * - task:updated - Existing task modified
 * - task:deleted - Task removed from project
 * - task:moved - Task status/position changed
 */

// AI tools can use this context for better suggestions

Testing with AI Tools

Test Generation Prompts:

# For unit tests
"Generate unit tests for the TaskStore Zustand store"
"Create integration tests for the task API endpoints"
"Write tests for the WebSocket task update functionality"

# For component tests
"Generate React Testing Library tests for TaskBoard component"
"Create tests for task drag and drop functionality"
"Write accessibility tests for the task creation modal"

# For API tests
"Generate Supertest tests for task CRUD operations"
"Create tests for real-time WebSocket events"
"Write integration tests for task dependency validation"

🛠️ Debugging with AI Assistance

Common Debugging Scenarios

Frontend Issues:

# State management problems
"Debug why Zustand store is not persisting task updates"
"Help fix React re-rendering issues in TaskBoard"

# TypeScript errors
"Resolve TypeScript errors in task interface definitions"
"Fix type safety issues with WebSocket event handlers"

# Performance issues
"Optimize TaskList component for large datasets"
"Debug memory leaks in WebSocket connections"

Backend Issues:

# Database problems
"Debug PostgreSQL connection timeout errors"
"Optimize slow task query performance"

# API issues
"Fix CORS errors in development environment"
"Debug Express middleware authentication flow"

# WebSocket problems
"Troubleshoot Socket.io room subscription issues"
"Fix WebSocket connection drops in production"

Error Analysis

Provide Complete Error Context:

When asking AI for help with errors, include:
1. Full error message and stack trace
2. Relevant code snippet
3. Steps to reproduce
4. Environment details (development/production)
5. Recent changes made to the code

Example:
"I'm getting this TypeScript error in the task store:
[error message]

Here's the relevant code:
[code snippet]

This started happening after I added the dependency tracking feature.
Environment: Development with Docker
Node version: 18.x
TypeScript version: 5.x"

📈 Productivity Tips

Workflow Optimization

1. Use AI for Boilerplate Generation:

"Generate a new React component for task comments with TypeScript interfaces"
"Create API endpoint for task time tracking with validation"
"Generate database migration for adding task attachments"

2. Leverage AI for Code Review:

"Review this component for React best practices"
"Check this API endpoint for security vulnerabilities"
"Analyze this function for performance optimization opportunities"

3. Documentation Assistance:

"Generate JSDoc comments for this utility function"
"Create API documentation for these endpoints"
"Write user guide for this new feature"

AI Tool Comparison

Feature Claude Code Cline Continue Copilot Cursor
Code Generation ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Context Awareness ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐⭐
Debugging Help ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐
Documentation ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐
VS Code Integration ⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
Real-time Suggestions ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐

🔒 Security Considerations

API Key Management

Environment Variables:

# .env.local (never commit this file)
ANTHROPIC_API_KEY=your_anthropic_key
OPENAI_API_KEY=your_openai_key
GITHUB_COPILOT_TOKEN=your_github_token

# Use in VS Code settings
"cline.apiKey": "${ANTHROPIC_API_KEY}"

Sensitive Data Protection:

// .gitignore additions
.env.local
.anthropic
.openai
.continue/
.cursor/
.copilot/

Code Privacy

Best Practices:

  • Never include API keys, passwords, or secrets in prompts
  • Review AI-generated code for security vulnerabilities
  • Use local AI models for sensitive projects when possible
  • Configure AI tools to exclude sensitive files and directories

Next: Learn about Contributing Guidelines to contribute effectively to the project."

⚠️ **GitHub.com Fallback** ⚠️