Build a professional code diff viewer that safely compares code versions with syntax highlighting using AI assistance.
Claude or ChatGPT for generating the diff viewer code and analyzing code differences safely.
VS Code, Cursor, or any code editor for editing the generated files and testing your diff viewer.
Before we build our diff viewer, we need to establish safe practices for handling code. We'll create a sanitization system that removes sensitive data like API keys, passwords, and personal information before processing code through AI.
I need to build a code sanitization system for a diff viewer that safely processes code through AI. Create a JavaScript function that: 1. Removes sensitive patterns like API keys, passwords, tokens, and secrets 2. Replaces personal information (emails, names in comments) with placeholders 3. Strips out database connection strings and URLs 4. Maintains code structure so diffs remain meaningful 5. Returns both sanitized code and a list of what was redacted Include common patterns for: - Environment variables (API_KEY, SECRET, TOKEN) - Comment-based personal info - String literals that look like credentials - Database connection strings - File paths that might contain usernames Make it work with multiple programming languages (JavaScript, Python, Java, C#).
The AI should generate a comprehensive sanitization function with regex patterns for different types of sensitive data. Look for a modular approach that handles various programming languages and provides clear feedback about what was sanitized.
Now we'll set up Cursor rules that help AI understand our project structure and coding preferences for building the diff viewer. This ensures consistent code generation and helps the AI make better suggestions when we're developing our tool.
Generate a .cursorrules file for a code diff viewer project with these requirements: Project Structure: - HTML/CSS/JavaScript frontend for the diff interface - Node.js backend component for advanced diff algorithms - Privacy-first approach to code handling - Integration with MCP servers for extended functionality Coding Standards: - Use modern ES6+ JavaScript - Semantic HTML with accessibility in mind - CSS Grid/Flexbox for layouts - Clean, readable variable names - Comprehensive error handling - Comments explaining complex diff algorithms AI Assistant Behavior: - Always consider code privacy when suggesting solutions - Prefer client-side processing when possible - Suggest performance optimizations for large code files - Include accessibility features in UI components - Recommend testing approaches for diff accuracy Specific to this project: - Focus on syntax highlighting libraries (Prism.js, highlight.js) - Diff algorithm implementations (Myers, Hunt-McIlroy) - Responsive design for side-by-side code comparison - Keyboard navigation for diff reviewing
You should get a well-structured .cursorrules file that guides AI development for your diff viewer. The rules should emphasize privacy, performance, and user experience while providing specific technical guidance for diff algorithms and syntax highlighting.
Time to create the main interface for our code diff viewer. We'll build a clean, professional interface with side-by-side code panels, syntax highlighting, and visual indicators for additions, deletions, and modifications.
Create a complete HTML page for a code diff viewer with these features: 1. Header with title and language selector dropdown 2. Two large textarea inputs labeled "Before" and "After" for pasting code 3. A "Compare" button that triggers the diff analysis 4. Side-by-side diff display area with: - Line numbers for both sides - Color-coded additions (green), deletions (red), modifications (blue) - Syntax highlighting based on selected language - Smooth scrolling synchronization between panels 5. Statistics panel showing: - Lines added, deleted, modified - Total changes count - Privacy status (what was sanitized) Styling requirements: - Dark theme with good contrast - Monospace font for code - Responsive design that works on tablets - Clean, GitHub-like diff styling - Loading states and transitions Include JavaScript that: - Integrates the sanitization function from Step 1 - Uses a diff algorithm (implement or use a library) - Handles syntax highlighting with Prism.js or similar - Provides keyboard shortcuts (Ctrl+Enter to compare) Make it a single, self-contained HTML file with embedded CSS and JavaScript.
The AI should generate a complete, professional-looking diff viewer interface. Look for proper line-by-line comparison logic, clean visual design, and integration of the privacy features. The interface should feel intuitive and respond smoothly to user interactions.
We'll build an MCP server that provides enhanced diff capabilities like intelligent merge conflict resolution, semantic code analysis, and advanced diff algorithms. This server will integrate with Claude to provide deeper code understanding while maintaining our privacy standards.
Build an MCP server for advanced code diff functionality with these capabilities: Server Name: "code-diff-analyzer" Tools to implement: 1. "analyze_diff" - Takes sanitized before/after code and returns: - Semantic changes (function additions, parameter changes) - Complexity impact analysis - Potential breaking changes identification - Code quality metrics comparison 2. "suggest_merge" - For conflicting changes: - Intelligent merge suggestions - Conflict resolution strategies - Risk assessment for different merge approaches 3. "explain_changes" - Generates human-readable explanations: - What changed and why it might matter - Impact on functionality - Dependencies that might be affected Server requirements: - Built with Node.js and @modelcontextprotocol/sdk - Includes the privacy sanitization from Step 1 - Handles multiple programming languages - Provides detailed error messages - Includes comprehensive logging - Works with the HTML interface from Step 3 Include: - Complete server.js file - package.json with dependencies - Basic usage examples - Integration instructions for Claude Ensure all code analysis happens on sanitized code only, never raw input.
You should receive a complete MCP server implementation with sophisticated diff analysis tools. The server should integrate seamlessly with your HTML interface and provide Claude with powerful code analysis capabilities while maintaining strict privacy standards.
Finally, we'll connect all the pieces together and create a comprehensive testing strategy. We'll integrate the MCP server with our diff viewer interface and establish workflows that demonstrate the full capabilities while maintaining privacy-safe practices.
Help me integrate and test the complete code diff viewer system: 1. Update the HTML interface to communicate with the MCP server: - Add buttons for "Analyze Changes" and "Explain Diff" - Create functions that call the MCP server tools - Display semantic analysis results in a dedicated panel - Show privacy sanitization reports 2. Create a comprehensive test suite: - Test cases with different programming languages - Examples with sensitive data to verify sanitization - Complex diffs (large files, many changes) - Edge cases (empty files, identical code, binary content) 3. Integration workflow: - Step-by-step setup instructions - How to start the MCP server - How to connect Claude to the server - How to use the complete system 4. Create sample test files: - Before/after JavaScript with API keys (to test sanitization) - Python function with parameter changes - CSS with responsive design updates - Configuration file changes 5. Documentation: - User guide for the diff viewer - Privacy features explanation - Troubleshooting common issues - Performance tips for large files Make sure the integration maintains privacy-first principles and provides clear feedback to users about what's happening at each step.
The AI should provide complete integration code, comprehensive test files, and clear documentation. Look for seamless communication between components, robust error handling, and user-friendly feedback throughout the diff analysis process.
Large files can slow down diff calculations. Implement pagination or chunking for files over 1000 lines, and consider using web workers for heavy computations to keep the UI responsive.
The privacy sanitizer might flag legitimate code as sensitive. Add a whitelist system for known safe patterns and provide users with options to review what was sanitized before proceeding.
If Claude can't connect to your MCP server, verify the server is running, check the port configuration, and ensure your Claude MCP settings include the correct server path and permissions.
Mixed or incorrect language detection can break highlighting. Implement language auto-detection based on file extensions or code patterns, and allow manual language override in the interface.
Implemented code sanitization systems that protect sensitive information while still allowing AI to provide meaningful analysis and assistance.
Created custom Cursor rules that guide AI development with project-specific standards, improving code consistency and development efficiency.
Built a custom MCP server that extends Claude's capabilities with specialized code analysis tools while maintaining security and privacy standards.
Created a sophisticated code diff interface with syntax highlighting, responsive design, and real-time comparison features that rival professional development tools.
Add Git Integration: Extend your diff viewer to work directly with Git repositories, showing commit-to-commit differences and branch comparisons.
Collaborative Features: Add real-time collaboration where multiple users can review and comment on code differences simultaneously.
AI-Powered Suggestions: Use your MCP server to generate automatic refactoring suggestions and code improvement recommendations based on the differences.
Export and Reporting: Add features to export diff reports as PDF, generate change summaries for code reviews, and integrate with project management tools.
Mobile Optimization: Create a mobile-friendly version with touch-optimized navigation and responsive diff viewing for on-the-go code reviews.