Code Commenter is a web application that automatically adds concise and useful comments to your code using OpenAI's language model. It supports JavaScript, TypeScript, and C# languages.
Features
Two-panel interface: Input code on the left, view commented code on the right
Language selection: Choose between JavaScript, TypeScript, and C#
Syntax highlighting: Commented code is displayed with proper syntax highlighting
Loading indicator: A spinner animation shows when the AI is processing your code
Responsive design: The app adjusts to fit various screen sizes
How It Works
The user pastes their code into the left panel
The user selects the appropriate language from the dropdown menu
When the "Add Comments" button is clicked, the code is sent to the server
The server uses OpenAI's API to generate comments for the code
The commented code is returned and displayed in the right panel with syntax highlighting
Technology Stack
Frontend:
React: For building the user interface
Prism.js: For syntax highlighting
Backend:
Deno: Runtime environment
Val Town: Hosting platform
OpenAI API: For generating code comments
Usage
Open the application in your web browser
Paste your code into the left panel
Select the appropriate language from the dropdown menu
Click the "Add Comments" button
Wait for the AI to process your code (a spinner will indicate that it's working)
View the commented code in the right panel
Limitations
The maximum length of code that can be processed is limited by the OpenAI API's token limit
The quality of comments may vary depending on the complexity of the code and the AI model's capabilities
Internet connection is required to use the application
Privacy Considerations
Please note that the code you submit is sent to OpenAI's servers for processing. Do not submit sensitive or proprietary code that you don't want to be processed by a third-party service.
Future Improvements
Add support for more programming languages
Implement user authentication for personalized experiences
Add the ability to save and share commented code snippets
Improve error handling and user feedback
Feedback and Contributions
This project is hosted on Val Town. If you have any suggestions, bug reports, or want to contribute to the project, please contact the Val Town team or the val's creator.