Functionary

Code diagram visualization with AI summarization of selected function
AI Chatbot provides clear answers to specific function/code questions
Frontend UI

Inspiration

Functionary was inspired by a common and critical challenge faced by developers: the struggle to quickly grasp the complexities of a codebase. Whether joining a new team, working on a legacy project, or simply trying to navigate a large codebase, gaining a clear understanding of function dependencies and interactions can be time-consuming and daunting. Functionary was designed to tackle this problem by offering an intuitive, interactive visualization of function relationships, making it easier to explore and understand how different parts of the code work together.

What it does

Functionary is an interactive tool that allows developers to analyze and visualize complex codebases with ease. Once a directory is uploaded from a user's file system, Functionary breaks down the codebase into individual functions, mapping their calls and dependencies on a dynamic graph with animated arrows to illustrate call flows. To further enhance usability, Functionary features an AI-powered chatbot that answers queries about the codebase, offering clear explanations of how each function operates. By providing intuitive insights into code structure, Functionary aims to help developers quickly get up to speed with new, complex codebases, boosting productivity and promoting seamless collaboration.

How we built it

We built the frontend of Functionary with React and TypeScript, delivering an effortless and interactive user experience. The backend is developed using Node.js, Express.js, and JavaScript, ensuring robust data processing and efficient server-client communication. Axios is used for seamless querying between the frontend and backend, allowing for quick and reliable data retrieval. The code analysis is performed using an Abstract Syntax Tree. Nodes are parsed, looking for definitions and calls. From those nodes, we retrieve the arguments and parameters, as well as recompile the function code from the AST. Lines are drawn between function definitions and calls to show control flow. The relevant code segments can be displayed, or used for querying the AI assistant. We embedded all the functions to our Pinecone vector database, which allowed us to provide the LLM context of the entire codebase, removing the need for users to copy and paste large pieces of code into ChatGPT.

Challenges we ran into

Converting code to Abstract Syntax Tree (AST), and back again. Babel was a useful but stubborn tool.
Extracting relevant files. Including the entire node_module would overwhelm our program, but because of the limitations around web access to local directories, the user must upload the whole file for compilation. We read the .gitignore file to remove irrelevant files.
Integrating frontend UI with backend AST logic.
Developing and choosing an intuitive and understandable code visualization layout for the code diagram
Maintaining accuracy with the RAG embedding model, and being able to retrieve the most relevant pieces of code to answer the users question

Accomplishments that we're proud of

Overall, we’re proud of developing an intuitive and effective code analyzer and visualizer for providing developers with a clear understanding of function dependencies in a codebase. Functionary allows the user to enter any input file, and only parses through relevant files (i.e. excluding node modules). We believe that Functionary's graph visualization paired with AI-driven insights offer a fresh and innovative approach to code analysis.

What we learned

Throughout the development of Functionary, we gained valuable insights into the nuances of analyzing complex codebases. We also honed our skills in building cohesive systems using diverse technologies. From integrating a vector database like Pinecone and leveraging the OpenAI API to crafting a seamless React and TypeScript frontend, we learned how to bridge different tools into a unified solution. Lastly, after encountering numerous Git challenges along the way, we learned the importance of proper Git etiquette, improving our version control practices and team collaboration.

What's next for Functionary

Looking ahead, we would love to expand Functionary's capabilities to support all programming languages and frontend frameworks, broadening its utility for developers in various tech stacks. We would also like to introduce a feature that stores users’ past codebase visualizations in a database, allowing them to revisit and analyze their previous work at any time.