Smiling girl studying and writing, surrounded by many books. The image captures a joyful and studious moment, showcasing the enthusiasm of the young learner immersed in a sea of knowledge.
Smiling girl studying and writing, surrounded by many books. The image captures a joyful and studious moment, showcasing the enthusiasm of the young learner immersed in a sea of knowledge.

“Very responsive on communication, paid attention to budget and timeline. All was good for this project.”

Peter Kuperman
CEO & Founder

CEO & Founder
Smiling girl studying and writing, surrounded by many books. The image captures a joyful and studious moment, showcasing the enthusiasm of the young learner immersed in a sea of knowledge.

We developed two main features to enhance the AI capabilities of the platform. While Integrating OpenAI within a Python project was straightforward, we encountered several AI-related challenges that were addressed.

What we did?

‘Solve with AI’ Functionality

  • Enables students to request AI assistance for code generation.
  • Provides a glimpse into AI's problem-solving and code-generation capabilities.
  • Demonstrates multiple problem-solving approaches.
  • As AI is not infallible, students learn to identify and correct potential errors or imperfections in the generated code.

‘Solve with AI’ Challenges

  • Generate code compatible with the Hatch coding IDEsome text.
    • Used specific syntax rules and the P5 library.
    • Translated these rules into natural language for GPT to follow.
    • Ensured clarity, conciseness, and emphasis on critical pointssome text.
      • AI would highlight key points in the generated code that can be improved/changed.
    • Simplified the functionality so it’s accessible for all ages.
Smiling girl studying and writing, surrounded by many books. The image captures a joyful and studious moment, showcasing the enthusiasm of the young learner immersed in a sea of knowledge.

‘Explain with AI’ Functionality

  • Allows students to select code segments, triggering an option to consult the "Explain with AI" assistant.
  • Analyze and provide clear, educational explanations for each code section
    • A section could range from a single line to an entire function.
  • Enhances understanding of code syntax, structure, and semantics for users

‘Explain with AI’ Challenges

  • Initially, we instructed the AI to separate explanations with a specific character.
    • At times, it failed to adhere to this structure, so we utilized OpenAI's new JSON response feature to resolve this, ensuring structured responses.

Built with Security in Mind

  • The user-input aspect of "Explain with AI” involved a risk of prompt injection.
    • To mitigate this, we employed various prompt techniques, like few-shot examples, to guide GPT's responses in specific scenarios.
  • With Hatch coding's young audience, unrestricted GPT responses were not an option.
    • We leveraged OpenAI's Moderation feature to detect inappropriate content or misuse, ensuring safe and appropriate usage.
  • We also addressed errors associated with the use of the OpenAI API.
    • We tackled possible error responses, such as an unavailable API or inappropriate response, and displayed user-friendly messages.

Integrating with GPT

  • We performed market research and introduced GPT-4 Turbo to the application.
    • Compared to GPT-4, GPT-4 Turbo had faster response times while maintaining the output quality.
    • Availability issues with GPT-4 Turbo made it unsuitable for our production deployment timeline, but it was a promising candidate for future project iterations.
  • Enhanced JSON response format
    • Successfully implemented the "Explain with AI" feature migration to the latest version of the OpenAI.

Hatch Coding’s Product Goals

  • Increase the conversion rate and improve the first-time user experience to improve product adoption
  • Enhance the landing page experience to increase the awareness and consideration of potential users before starting the sign-up process
  • Deploy the application with AI using an OpenAI integration

Key Technologies
Used

Backend Development - Python
Mobile - React Native

More
Projects