DEV Community: blessingtutka

Metatron: Building a Living, AI-Powered Chemistry Lab with Gemini

blessingtutka — Mon, 09 Feb 2026 14:29:41 +0000

Chemistry is often taught through static diagrams and abstract equations. That works—up to a point. But once molecules start reacting, shifting states, or releasing energy, those flat representations fall short.

I wanted to build Metatron to change that.

Metatron is a “living” chemical intelligence platform that bridges the gap between theoretical representations like SMILES strings and tangible, visual lab experiences. The idea was inspired by the concept of an “Archangel of Data”—an AI entity capable of overseeing complex research and making advanced chemistry accessible through a natural, agentic interface.

What Metatron Does

Metatron is an AI-powered chemistry lab and research assistant designed for both learning and experimentation.

🧪 Virtual Lab

Users can mix chemicals and instantly observe:

Balanced chemical equations
Color changes
Phase transitions
Reactions like precipitates or explosions

All rendered visually in real time.

🤖 Agentic Research

The Chemistry Research Agent takes a molecule and autonomously:

Plans a research workflow
Executes the steps
Verifies results
Assesses environmental impact
Generates a structured report

It’s not just answering questions—it’s running a full research pipeline.

🎙️ Voice-Enabled Assistance

Metatron supports hands-free interaction. Users can speak naturally, and the system translates voice commands into precise application actions using AI-powered intent parsing.

🎓 Interactive Learning

The platform also includes:

A “Guess the Tool” game
An interactive Periodic Table
An AI Tutor that provides molecule-specific explanations and insights

How I Built It

Metatron is built with a modern TypeScript stack using Vite + React, with Gemini 3 Flash acting as the core reasoning engine.

Core Logic & Visualization

Zod for schema validation, converted into JSON Schemas for Gemini’s structured output mode
Molecular data from PubChem
RDKit for 2D molecular rendering
NGL for interactive 3D molecular visualization
Three.js for the virtual lab environment and reaction effects

Agent Architecture

The autonomous research agent uses Gemini’s function calling to manage a multi-phase workflow:

Planning → Execution → Verification → Emissions Assessment → Reporting

This allows the AI to reason across steps, maintain state, and produce structured scientific output.

Voice NLP

The VoiceCommandManager leverages Gemini to interpret spoken commands and map them directly to application functions, enabling smooth voice-driven interaction.

What Gemini Enabled

Gemini isn’t just used for text generation—it’s the core orchestration layer of the app.

Key capabilities include:

Real-time chemical analysis from SMILES notation
Reaction outcome prediction in the virtual lab
Dynamic educational content generation
Voice-controlled navigation and research
Structured JSON outputs for reliable simulations

Gemini features used:

Structured JSON Output
Function Calling
System Instructions
Thinking Mode (includeThoughts)

Challenges Along the Way

Building Metatron wasn’t easy.

As a master’s student, I had to balance exams and multiple academic projects, which meant limited development time and working completely solo.

I also faced a steep learning curve with 3D rendering, as this was my first time using NGL and Three.js. While I initially planned to ship a full VR lab experience, time constraints made that impossible for the first version.

Voice control introduced another challenge: the SpeechRecognition Web API behaves inconsistently across browsers, making testing and debugging difficult.

Despite all this, I managed to deliver a functional, visually rich, and AI-powered chemistry platform that lays a solid foundation for future expansion.

What I’m Proud Of

A fully autonomous chemistry research agent
Reliable structured AI outputs using Gemini + Zod
Real-time reaction simulation and visualization
Seamless 2D and 3D molecular rendering
Natural voice control powered by Gemini function calling

What I Learned

This project pushed me to deeply understand how AI can be integrated into complex systems.

I learned how to:

Enforce structure in AI outputs using Zod and JSON Schemas
Build multi-phase autonomous agents with Gemini
Design voice-controlled interfaces using function calling
Work with 3D rendering tools like Three.js and NGL
Balance solo development with academic responsibilities

What’s Next for Metatron

Metatron is just getting started.

Multimodal Safety Audits: Users will be able to upload photos of real-world lab setups and receive instant AI-powered safety feedback using Gemini’s multimodal capabilities.
Self-Driving Lab: Integration with IoT devices and VR lab equipment to transform Metatron into a real physical research partner.
Augmented Reality (AR): Overlay molecular visualizations, step-by-step experiment guidance, and real-time safety warnings directly onto physical lab environments.

Thanks for reading 🧠🧪

If you’re curious, feedback and ideas are always welcome.

Building Gitcom: How Kiro's AI Pair-Programmer Helped Me Ship My First Kiro/VS Code Extension

blessingtutka — Mon, 15 Sep 2025 10:06:24 +0000

Let's be honest. We've all been there right:

Forgot to split changes into separate commits, ending up with a "mega-commit" that fixed a bug, added a feature, and updated the README all at once.
Write vague, useless commit messages like "update files" or "fix stuff" that meant nothing to my future self or my team.
Waste time staging and committing manually, breaking my flow state and turning version history into a chore rather than a helpful log.

It's a bad habit I wanted to break, so I decided to build Gitcom—an AI-powered commit assistant extension for Kiro. The twist? I used Kiro itself as my pair programmer, design partner, and project manager throughout the entire journey.

Here’s the story of how I built it and how Kiro’s unique features transformed my development process.

How Kiro Helped Me Build Gitcom

One of the best parts of this project was learning to build with Kiro as my co-pilot. I didn’t just code—I collaborated with Kiro’s tools and agents at every stage:

🔗 Automate Tasks with Agent Hooks

I used agent hooks to log my conversations with Kiro. This provided me with a timeline of my decisions, the ideas we discussed, and the project's evolution.

💬 Vibe with the Kiro Chat

Kiro’s chat-first approach was like brainstorming with a teammate. I started by exploring the idea of a commit assistant, discussing:

Technologies I might need
Dependencies like simple-git
How to structure the extension
This back-and-forth clarified my vision and guided the stack I chose.

📜 Tame Complexity with Spec-Driven Development

Here’s where Kiro really shone. It generated a spec for me called “intelligent-commit-generator”. The spec included:

A design overview
Requirements
Tasks broken into steps

From there, I followed the tasks one by one. By the end, Kiro had essentially generated the entire project. It even suggested performance augmentation tasks later to refine the codebase.

My Self-Imposed Challenge: The Great TypeScript Migration

I wanted to test how well Kiro could adapt. So I challenged it to:

Generate Gitcom in JavaScript
Migrate Gitcom to TypeScript

Kiro handled both, but in different ways—sometimes by mapping JS to TS files automatically. Instead of relying fully on that, I decided to manually transform the JS project into TypeScript. Adding proper interfaces and enforcing strict types, I was forced to understand the purpose of every variable and function. This deep dive meant I owned the code and could now fix my own "update files" problem with a truly robust tool.
This challenge wasn’t just about the code—it helped me understand:

How Kiro cleaned up files (sometimes leaving unused code)
Where I needed to step in and refine things
How to evaluate AI-generated code critically

The cleanup part was tricky—Kiro did attempt it when asked, but not always in the way I expected. Doing it manually became a great learning experience and gave me deeper insight into the project’s structure.

What I Built: Gitcom

At the end of this journey, I had a working Kiro extension: Gitcom – AI-Powered Commit Assistant.

✨ Key Features

Git diff analysis with simple-git
Interactive UI for reviewing and editing commits
Batch commit operations for grouped staging

What's next for gitcom

Continue developing Gitcom beyond the hackathon
Add an interactive CLI that works seamlessly across platforms.
Multiple commit styles: Conventional, Semantic, or Custom
AI commit suggestions at 3 detail levels (concise/normal/verbose)
GitHub/GitLab PR integration.

What I Learned

Kiro is more than a tool: It’s like a co-developer that helps you explore, design, and build projects faster.
Specs keep you focused: The spec-driven workflow broke down complexity into manageable tasks.
AI isn’t perfect (yet): Code cleanups and updates left some unused code, which meant I had to step in. But this turned out to be a blessing—it pushed me to understand the generated project more deeply.
Challenging the AI helps you grow: By asking Kiro to regenerate in different languages and comparing results, I learned more than I would have just by coding manually.

Final Thoughts

Building Gitcom was an amazing journey, not only because of what I built but because of how I built it—with Kiro by my side.

Kiro helped me brainstorm, plan, and even generate large parts of the project. But it also challenged me, especially when cleanup and refinement were needed. That’s where I grew the most as a developer.

Links

Github Repo

Extension ID

@id:blessingtutka.smart-gitcom

Data Organisation: Ensuring data quality in backend systems

blessingtutka — Tue, 02 Jul 2024 13:46:57 +0000

When it comes to backend development, one of the biggest challenges we face is managing the issues that arise from disorganized data. In the world of backend development, data is king. It's the fuel that powers our applications, providing the information that drives the user experience. This data before it becomes the quality output our users can easily interact with must be carefully handled.
One of the main roles of a backend developer is data processing which involves building and maintaining the mechanisms that process data and perform actions on websites.
Challenge: Ensuring data quality in backend systems. Disorganized data, characterized by inconsistencies, missing values, and incorrect formats, can significantly impact application performance and user experience.

What is back-end development?

Back-end development means working on server-side software, which focuses on everything you can’t see on a website page. This work is done by backend developers who use code that helps browsers or any other application communicate with servers (computers or software programs/applications that provide services or resources to other computers or applications) or/and with databases(organized collection of data).

The Importance of Data Quality

Poorly organized and inconsistent data can lead to a cascade of problems:

Bugs and Errors: Inconsistent data can cause unexpected errors and crashes in applications, leading to a bad user experience.
Inaccurate Insights: If data is unreliable, the insights we derive from it will also be unreliable.
Security Risks: Unstructured data can create vulnerabilities, making systems more susceptible to security breaches.
Wasted Time and Resources: Cleaning and organizing data takes time and resources. You solve problems that you wouldn't have to solve if your data were organized.
Poor Performance: Disorganized data can degrade application performance, resulting in a negative user experience.

Investing in data organization provides numerous benefits:

Improved Application Performance: Clean and well-organized data leads to faster and more efficient data processing, resulting in a smoother user experience.
Enhanced Data Accuracy: Data validation and cleaning ensure data accuracy, leading to more reliable insights.
Increased Security: Organized data makes it easier to implement security measures and protect sensitive information.
Reduced Development Costs: By eliminating data-related issues, you can reduce development time and costs associated with debugging and fixing errors.

Ensuring data quality with well-organized data?

Maintaining well-organized data is one of the keys to ensuring high data quality in backend systems. One of the most used tools to organize and store your data is a database management system (DBMS). The are many DBMSs out there each with its pros and cons to have more info you can read this DBMS comparison article.
Here are some tips to well organizing your data for ensuring data quality in backend system:

Data Normalization: Use database normalization techniques to reduce data redundancy and improve data consistency. To have more info you can read this data normalization blog
Efficient Data Storage: Use appropriate database management systems (DBMS) according to your needs.
Data Validation: Implement validation rules to enforce data integrity. This includes type checking, range checks, and format validation.
Data Cleaning: Develop routines to identify and correct errors in data, such as missing values, duplicate entries, and inconsistent formats.
Data Transformation: Convert data into a format that is suitable for your specific application and use case.
Data Governance: Establish clear policies and procedures for data management, including access control, data retention, and data security.

My first Experience with backend development

For my final year project in computer science, I chose to learn Python and Django, a web development framework for backend applications. I started learning these new technologies six months before the deadline while also taking my degree courses. This self-learning helped me complete my project in three months. I faced many challenges, one of them was transforming facts and problems into computerized and organized data accessible through digital technologies, such as websites, as this was my first practical project. My final year project, an attendance management system, required research and practice. I overcame these difficulties by reading articles and books, following tutorials, and engaging in practical projects and exercises.

Expectations for HNG Internship

As a participant in the HNG internship program, I'm looking forward to improving my backend development skills, collaborating with skilled developers, and contributing to exciting projects. This internship provides a valuable platform to assimilate industry best practices from seasoned professionals and apply them to practical projects. I'm looking forward to working with you and creating innovative solutions together.

If you’re interested in learning more about the HNG Internship, check out these links:

That's a wrap!; we've come to the end. There's so much more, but we've covered the essential key points about ensuring data quality. It's up to you to continue your research. If you have any questions or suggestions feel free to drop a comment below. We're all in this together to learn and grow!

SURPASS YOUR LIMITS 😎😎

THANKS, AND GOOD LUCK 😊💪

Introduction aux formulaires HTML

blessingtutka — Thu, 13 Jul 2023 10:39:16 +0000

Je vais parler de la balise HTML "form" et de toutes les balises qui s'y rapportent. Mais avant tout, voyons ce qu'est un formulaire et à quoi il sert dans le monde numérique.

Qu'est-ce qu'un formulaire (form)

Un formulaire est une fenêtre ou un document qui contient plusieurs champs (fields) ou espaces dans lesquelles nous pouvons saisir des données. Chaque champ contient une étiquette de champ (label) afin que tout utilisateur qui visualise le formulaire ait une idée de son contenu et du genre de contenu que chaque champ va contenir. Un formulaire sert principalement à collecter des données. Dans le monde numérique, nous pouvons trouver des formulaires à de nombreux endroits dans des documents (comme pdf), dans des applications desktop (de bureau), dans des applications mobiles, dans des pages Web, etc.
Parlons maintenant de certains champs de formulaire :

nous avons un champ où nous pouvons ajouter du texte(input, text area).
Nous avons des champs où vous pouvez faire un seul choix parmi une list des choix (radio).
Nous avons des champs où vous pouvez faire plusieurs choix parmi une list des choix (checkbox).
Nous avons des champs où vous pouvez télécharger des images et des fichiers (file input).
Nous avons des champs où vous pouvez ajouter des liens
nous avons un champ où nous pouvons envoyer des données d'autres champs ou réinitialiser toutes les données des champs (Buttons). Passons maintenant à notre sujet qui est les formulaires dans les développements web plus spécifiquement les formulaires en HTML.

Formulaires HTML (FORMS)

Comme nous le savons, HTML est un langage de balisage (qui contient des balises) où chaque balise (qui sont des mots-clés entre crochets la plupart du temps suivis de sa balise fermante) donne une structure et une fonctionnalité spécifiques sur le texte ou les éléments qu'elle contient.
Parmi les nombreuses balises qu'une page html peut contenir, nous avons la balise de formulaire représentée par la balise <form></form> avec une balise ouvrante et fermante. Un formulaire HTML est utilisé pour collecter les entrées des utilisateurs. L'entrée de l'utilisateur est le plus souvent envoyée à un serveur pour traitement(W3School).
Example d'une balise form:

<form>
/* ...
éléments de formulaire
... */
</form>

L'élément <form> est un conteneur pour différents types d'éléments d'entrée, tels que : champs de texte (input, text area), cases à cocher (checkbox), boutons radio (radio), boutons d'envoi (input submit), etc. Chacun élément a également une balise représentative pour les introduire dans le formulaire <form>.
l'element <form> a de nombreux attributs; les principaux sont:

action: C'est un attribut qui spécifie quelle action sera effectuée une fois les données du formulaire envoyées. Il fait parfois référence à une URL (le lien de redirection après l'envoi des données).
method: C'est un attribut qui spécifie la méthode de requête que nous utiliserons une fois les données des formulaires envoyées. Il determine si nous devons "publier (post)" des données ou "obtenir (get)" des données. Les valeurs les plus utilisées sont post et get. Pour en savoir plus visitez 👉 MDN DOC FORM

<form action="/url" method="get">
/* ...
éléments de formulaire
... */
</form>

Plongeons maintenant dans chaque élément tag de la balise <form>

L'élément `<label>`

La balise <label> définit une étiquette pour de nombreux éléments de formulaire. Il permet à tous les utilisateurs qui visualise le formulaire d'avoir une idée de son contenu et du genre de contenu que chaque champ va contenir. Il est souvent suivi de l'élément <input>.L'attribut "for" d'une étiquette est utilisé pour sélectionner une entrée spécifique. Et pour cela, nous devons donner un nom à cette entrée avec l'attribut "name". Cela signifie que cette étiquette est pour cette entrée.

<label for="example">Ceci est une étiquette pour l'entrée ci-dessous</label>
<input type="text" name="exemple">

L'élément `<input>`

<input> est l'élément le plus utilisé. C'est une balise qui nous aide à créer un champ de saisie où nous pouvons saisir le texte mais sur une seule ligne. C'est une balise singleton qui signifie qu'elle n'a pas de balise fermante.
L'élément <input> possède de nombreux attributs. L'un d'eux et le plus utilisé est l'attribut "type", nous pouvons déterminer quel type de texte nous pouvons mettre dans notre champ avec cet attribut. Il peut s'agir d'un simple texte, d'une heure, d'une date, d'un e-mail, d'un mot de passe, d'une case à cocher, etc.
Il y a aussi l'attribut "name" qui donne un nom à l'élément et qui sera utilisé par l'élément pour étiqueter cet élément . Ex: <input type="text" name="nom">.
Quelques exemples de valeurs d'attributs type et le type de texte qu'ils nous permettent d'entrer:

<input type="text"> :Affiche un champ de saisie de texte sur une seule ligne
<input type="date"> :Affiche un champ de saisie pour une date avec la possibilité de sélectionner la date à partir d'un sélecteur de date.
<input type="radio"> :Affiche un bouton radio pour sélectionner l'un des nombreux choix. Pour un groupe d'entrée radio, nous devons mettre la même valeur de nom pour l'attribut "name" pour l'identifier en tant que groupe. Cela permet de ne faire qu'un seul choix parmi le groupe d'entrée radio !! attention !! qui porte le même nom (avec l'attribut "name").
<input type="checkbox"> :Affiche une case à cocher pour sélectionner zéro ou plusieurs choix.
<input type="submit"> :Affiche un bouton de soumission pour soumettre le formulaire. Cela signifie que nous envoyons des données du formulaire quelque part ; cela peut être dans une base de données (généralement) ou pour envoyer un e-mail avec des données collectées, etc.
<input type="button"> :Affiche un bouton cliquable.

L'élément `<textarea>`

la balise <textarea> nous aide à créer un champ de saisie où nous pouvons saisir le texte sur plusieurs ligne. Il a de nombreux attributs dont deux d'entre eux: "cols" pour déterminer le nombre de colonnes et "rows" pour déterminer le nombre de lignes que le champ aura.
<textarea rows="3" cols="100"></textarea>.

Voici un exemple qui couvre tous les éléments que nous avons parcourus avec une image de démonstration:

<!-- Il s'agit d'une balise de formulaire avec un attribut "action" 
qui contient une URL pour envoyer un e-mail et un attribut "method" 
pour publier (post) des données (envoyer des données quelque part dans notre cas un e-mail) -->
<form action="/envoyer-un-e-mail" method="post">

<label for="nom">1:Nom</label>
<input type="text" name="nom"><br>

<label for="pnom">2:Post Nom</label>
<input type="text" name="pnom"><br>

<label for="date">3:Date de naissance</label>
<input type="date" name="date"><br>

<label for="bio">4:Biographie</label><br>
<textarea rows="3" cols="100"></textarea><br>

<!-- Vous n'avez qu'un seul choix 
parmi un groupe de choix avec <input> de type "radio" avec le même nom"sex" -->
<label for="sex">5:Sex</label><br>
<label>Male</label>
<input type="radio" name="sex"><br>
<label> Female</label>
<input type="radio" name="sex"><br>

<!-- Vous pouvez en choisir aucun ou plusieurs
parmi un groupe de choix avec <input> de type "checkbox"  -->
<label>6:Passe-temps</label><br>
<label for="sport">Sport</label>
<input type="checkbox" name="sport"><br>
<label for="dessin">Dessin</label>
<input type="checkbox" name="dessin"><br>
<label for="lecture">Lecture</label>
<input type="checkbox" name="lecture"><br>

</form>

DEMO

Voilà; nous sommes à la fin de ce simple cours de formulaire . Il y a tellement d'autres éléments mais nous avons parcourus l'essentiel. C'est à vous de poursuivre les recherches.
Voici quelques sites web de documentations où vous pouvez continuer un avec vos recherche :

-W3Shools

-MDN WEB DOCS.
Il existe de nombreux autres sites de documentation, mais ceux-ci sont bons pour un débutant.

SURPASS YOUR LIMITS 😎😎

MERCI ET BON COURAGE 😊💪

DEV Community: blessingtutka

Metatron: Building a Living, AI-Powered Chemistry Lab with Gemini

What Metatron Does

🧪 Virtual Lab

🤖 Agentic Research

🎙️ Voice-Enabled Assistance

🎓 Interactive Learning

How I Built It

Core Logic & Visualization

Agent Architecture

Voice NLP

What Gemini Enabled

Challenges Along the Way

What I’m Proud Of

What I Learned

What’s Next for Metatron

Building Gitcom: How Kiro's AI Pair-Programmer Helped Me Ship My First Kiro/VS Code Extension

How Kiro Helped Me Build Gitcom

My Self-Imposed Challenge: The Great TypeScript Migration

What I Built: Gitcom

What's next for gitcom

What I Learned

Final Thoughts

Links

Extension ID

Data Organisation: Ensuring data quality in backend systems

What is back-end development?

The Importance of Data Quality

Ensuring data quality with well-organized data?

My first Experience with backend development

Expectations for HNG Internship

Introduction aux formulaires HTML

Qu'est-ce qu'un formulaire (form)

Formulaires HTML (FORMS)

L'élément <label>

L'élément <input>

L'élément <textarea>

DEMO

L'élément `<label>`

L'élément `<input>`

L'élément `<textarea>`