Skip to content

Project: Creative Apps - Code Synesthesia #29

@Aadhavancnp

Description

@Aadhavancnp

Track

Creative Apps (GitHub Copilot)

Project Name

Code Synesthesia

GitHub Username

@Aadhavancnp

Repository URL

https://github.com/Aadhavancnp/code-synesthesia

Project Description

Code Synesthesia is a creative Model Context Protocol (MCP) server that allows GitHub Copilot to "see" and "feel" the mood of your code. It analyzes Python code complexity, maintainability, and style to generate a visual "vibe" (a theme color palette) and a rich, procedural "Abstract Code Art" SVG image representing the code's structure.

Instead of just getting dry metrics, developers can ask Copilot to run a "vibe check" on their files. The MCP server calculates cyclomatic complexity and maintainability index, maps these to a color palette (e.g., "Chaotic Neon" for complex code, "Zen Garden" for well-documented code), and generates a unique piece of abstract SVG art that Copilot renders directly in the chat. It transforms code analysis into a creative, visual, and poetic experience.

Demo Video or Screenshots

Screenshots: https://github.com/Aadhavancnp/code-synesthesia/tree/main/screenshots

Above Screenshots folder, Can be able to refer the Process

Primary Programming Language

Python

Key Technologies Used

  • Python 3.10+
  • Model Context Protocol (MCP) SDK (mcp)
  • FastMCP
  • radon (for code complexity and maintainability analysis)
  • Procedural SVG Generation

Submission Type

Individual

Team Members

No response

Submission Requirements

  • My project meets the track-specific challenge requirements
  • My repository includes a comprehensive README.md with setup instructions
  • My code does not contain hardcoded API keys or secrets
  • I have included demo materials (video or screenshots)
  • My project is my own work with proper attribution for any third-party code
  • I agree to the Code of Conduct
  • I have read and agree to the Disclaimer
  • My submission does NOT contain any confidential, proprietary, or sensitive information
  • I confirm I have the rights to submit this content and grant the necessary licenses

Quick Setup Summary

  1. Ensure you have Python 3.10+ installed.
  2. Install dependencies using uv: uv add mcp radon
  3. Configure VS Code MCP settings (mcp.json) to point to the local server.py file using uv run python /path/to/server.py.
  4. Restart VS Code.
  5. Open a Python file and ask Copilot Chat: "Run a vibe check on this file using the code-synesthesia MCP server."

Technical Highlights

  • Procedural Art Generation: Implemented a custom algorithm that translates abstract code metrics (cyclomatic complexity, LOC, maintainability index) into visual SVG elements (shapes, colors, opacity, and jaggedness).
  • Seamless Copilot Integration: Leveraged the MCP protocol to expose complex local Python analysis tools directly to the GitHub Copilot Chat interface.
  • Custom Prompting: Created a custom MCP prompt (vibe_check) that specifically instructs the LLM to act poetically and render the generated SVG visually in the chat window, creating a delightful user experience.

Challenges & Learnings

The main challenge was figuring out how to map dry, numerical code metrics (like Halstead metrics and cyclomatic complexity) into something visually interesting and meaningful. I learned a lot about procedural generation and how to use the Model Context Protocol to bridge the gap between local Python scripts and the VS Code Copilot Chat interface. It was fascinating to see how Copilot could take the raw JSON and SVG outputs from my tools and present them in such a creative, conversational way.

Contact Information

https://www.linkedin.com/in/aadhavanp

Country/Region

India

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions