devPace

• 

  Onboarding tab, where user configures extension settings

• 

  Dashboard tab that opens up automatically when user's work session time ends

• 

  Dashboard tab dynamically reveals an exercise routine once user submits preference on routine focus

Inspiration

Coding as an occupation can take a toll on your physical and mental health from prolonged sitting and the demands of developing and debugging complex systems on a tight schedule. We were motivated to create devPace in response to these problems. The current proliferation of AI technologies provided a unique opportunity to develop software aimed at wellness, an area where the human-like characteristics and personalization capabilities of LLMs can be highly impactful. We aspired to create human-centered software that would encourage users to prioritize their own well-being and physical health by setting a sustainable work pace.

What it does

devPace is a VS Code extension that helps developers maintain a healthy work pace by providing scheduled breaks with personalized AI-generated encouragement messages and targeted movement routines. Using Claude AI, it generates custom encouragement in different styles and provides tailored exercise suggestions while playing calming meditation music to help developers take mindful breaks and maintain physical wellness while coding.

How we built it

After settling on an idea, we broke the larger problem into smaller pieces in our first meeting. We started by laying down the foundations of a system that prompted the user for preferences on work session and break times and stored these settings. This system also had to trigger a pop-up at these user-defined intervals. Simultaneously, another team member was looking into the possibility of integrating AI-generated text into these pop-ups. Once the pop-up system was working, the first small step in AI integration was to succesfully call the Anthropic API and get an encouragement to display in the pop-up. Once this was achieved, we expanded the use of AI to generating personalized exercise routines that would also display in the pop-up. Finally, we wrapped up the project by improving the webview content. We added mediation music to the panel and improved the user interface by including CSS styling statements.

Challenges we ran into

It was challenging to learn several new technologies and combine them in this project. Two technologies were especially foundational to our extension: the Anthropic API and the VS Code API. With respect to the AI integration, we also had to research which LLM could be more suitable. Our approach was to have some of us specialize in AI and others in VS Code. Then, the specialists started the code relevant to their expertise. Thereafter, both sides could catch up on the other by reading and understanding their code. This also proved an effective way to learn, as we were able to expand the other side's code to implement additional functionalities. It was a more efficient way to learn than having every teammate learn everything from the get-go.

Accomplishments that we're proud of

We are proud of integrating AI into a VS Code extension! We tested some related extensions in the VS Code marketplace and we did not find any with this feature. Instead, these applications hardcoded the content that they displayed to the user. It was rewarding to see how AI integration improved the user experience! Increased user engagement would make it more likely for users to keep using the extension and build healthy habits.

What we learned

Through this project, we learnt to:

• Build a VS Code extension.
• Use TypeScript syntax.
• Use the Anthropic API.
• Prompt generative AI with precision.
• Integrate images and sound to webview panels.
• Implement form validation to ensure user input complies with certain requirements.
• Establish communication between webview panels and the extension back-end.
• Safely store the Anthropic API key in a VS Code environment variable.
• Use Project Tables in GitHub to coordinate teamwork.

What's next for devPace

A feature that we could develop next is caching AI responses to make this extension even more cost-effective for our users. For example, the extension could cache exercise routines and repeat them for a period of time before introducing novel exercises. This would give users variety while limiting the number of times they had to use Claude AI. In addition, building this cache system could also allow users to further personalize their experiences by saving preferred routines or favorites.

Built With

• anthropic
• axios
• css
• html
• javascript
• node.js
• typescript