Claude Code Beginner Project 13 of 13

Build a Git Commit Message Generator with AI

Create a smart tool that transforms messy git diffs into professional commit messages using AI and modern development tools.

What You'll Build

Smart diff analysis that identifies file types, changes, and scope
Conventional commit format with proper type and scope
Multiple commit message options with explanations
Integrated workflow using Windsurf IDE and MCP tools
Copy-to-clipboard functionality for instant use

What You'll Need

Claude (Anthropic)

We'll use Claude with MCP integration for intelligent diff analysis and commit message generation.

Windsurf IDE

Codeium's AI IDE will serve as our development environment with integrated AI assistance.

Step-by-Step Guide

1

Set Up Your Organized Workspace

First, we'll create an organized project structure in Windsurf and set up our AI workspace following best practices. This foundation will make our development process smoother and more efficient.

Prompt for Claude

I'm building a Git Commit Message Generator tool and want to set up an organized workspace in Windsurf IDE. Help me create: 1. A clear project structure with folders for components, utilities, and templates 2. A main HTML file for the interface 3. A JavaScript file for the core logic 4. A CSS file for styling 5. A README with project setup instructions The tool should allow users to paste git diffs and generate conventional commit messages. Create the basic file structure and initial boilerplate code.

Claude should generate a complete project structure with HTML, CSS, and JavaScript files. Look for organized folders, proper file naming conventions, and starter code that follows web development best practices.

2

Build the Diff Analysis Engine

Now we'll create the core logic that parses git diffs and extracts meaningful information. This is where the AI really shines at understanding complex patterns in code changes.

Prompt for Claude

Create a JavaScript function that analyzes git diffs and extracts key information for commit message generation. The function should: 1. Parse diff text to identify file changes (added, modified, deleted) 2. Detect file types and programming languages 3. Identify the scope of changes (component names, feature areas) 4. Determine change types (feat, fix, refactor, docs, etc.) 5. Count lines added/removed for impact assessment 6. Extract function/class names that were modified Make it robust enough to handle various diff formats and edge cases. Include detailed comments explaining the parsing logic.

You should get a comprehensive parsing function with regex patterns, file type detection, and change categorization. The code should handle different diff formats and provide structured data about the changes.

3

Create the Commit Message Templates

We'll design a template system that follows conventional commit standards and generates multiple options. This gives users flexibility while maintaining consistency.

Prompt for Claude

Build a commit message template system that generates conventional commits. Create: 1. Templates for different change types (feat, fix, refactor, docs, style, test, chore) 2. Smart scope detection based on file paths and changes 3. Descriptive message generation that's concise but informative 4. Multiple message options (short, detailed, with body text) 5. Breaking change detection and formatting 6. Co-author and issue linking support Use the parsed diff data to populate templates intelligently. Follow conventional commit specification strictly. Generate 3 different message options for each diff.

Expect a template engine with multiple commit message formats, smart defaults, and conventional commit compliance. The system should generate varied options while maintaining professional standards.

4

Integrate MCP Tools for Enhanced Analysis

Now we'll enhance our tool by integrating MCP servers for better code analysis and git integration. This leverages Claude's extended capabilities through the MCP protocol.

Prompt for Claude

Help me integrate MCP tools to enhance the commit message generator. I want to: 1. Use filesystem MCP to read project context (package.json, README, etc.) 2. Integrate git MCP for repository information 3. Add code analysis MCP for better understanding of changes 4. Include web search MCP for conventional commit best practices 5. Set up proper MCP configuration for Windsurf integration Show me how to configure these MCP servers and modify my JavaScript code to leverage them. Focus on practical integration that improves commit message quality.

Claude should provide MCP configuration files and show how to modify your code to use MCP capabilities. Look for practical examples of filesystem access, git integration, and enhanced code analysis.

5

Build the User Interface and Test

Finally, we'll create a clean, functional interface and test our tool with real git diffs. This brings everything together into a polished, usable application.

Prompt for Claude

Create a complete user interface for the Git Commit Message Generator with: 1. A large textarea for pasting git diffs 2. Generate button that triggers analysis 3. Results section showing 3 commit message options 4. Copy buttons for each generated message 5. Loading states and error handling 6. Dark theme styling that matches modern dev tools 7. Responsive design for different screen sizes 8. Example diff text for users to try Also provide test cases with sample diffs (feature additions, bug fixes, refactoring) to validate the tool works correctly. Make it production-ready.

You should receive complete HTML, CSS, and JavaScript for a polished interface, plus comprehensive test cases. The UI should be intuitive, responsive, and include proper error handling and loading states.

Common Issues

MCP Integration Not Working

Make sure you've properly configured MCP servers in Windsurf. Check the configuration file paths and restart the IDE if needed. Some MCP features require specific permissions.

Diff Parsing Fails

Different git clients format diffs slightly differently. Test with diffs from git diff, git show, and GitHub/GitLab. Add fallback parsing for edge cases.

Generated Messages Too Generic

Improve context analysis by examining more of the diff content. Look for variable names, function signatures, and comment changes to make messages more specific.

Interface Doesn't Update

Check browser console for JavaScript errors. Ensure all event listeners are properly attached and async operations have proper error handling.

What You Learned

Windsurf IDE Mastery

You learned to use Codeium's AI IDE for structured development, leveraging its AI assistance for code generation and project organization.

MCP Integration

You mastered configuring and using MCP servers to extend Claude's capabilities with filesystem access, git integration, and code analysis.

Git Diff Analysis

You built sophisticated text parsing logic to analyze git diffs, extract meaningful changes, and categorize them for commit message generation.

Organized AI Workflows

You practiced systematic project organization and AI-assisted development, creating maintainable code with proper structure and documentation.

Tips for Going Further

Add Team Customization: Create configuration options for different team conventions, custom scopes, and message formats specific to your organization's standards.

Build CLI Integration: Convert your tool into a command-line utility that can be integrated into git hooks or CI/CD pipelines for automated commit message suggestions.

Advanced Code Analysis: Integrate with AST parsers to understand code semantics better, detecting architectural changes, API modifications, and dependency updates.

Historical Learning: Analyze existing commit history to learn your team's patterns and generate messages that match your established style and terminology.

IDE Extensions: Package your tool as extensions for VS Code, Windsurf, or other IDEs to provide commit message assistance directly in the development environment.