DEV Community: Marie Otoo

My Notion MCP Mentoring Assistant

Marie Otoo — Mon, 30 Mar 2026 05:42:31 +0000

This is a submission for the Notion MCP Challenge

I was introduced to the Notion interface a couple of years ago at a four-months course I undertook. We, the participants, had to use it to store various online assets encompassing links to the diverse stretch of resources we had been educated on. Coming across the Notion challenge with MCP, I found it to be an opportunity and a creative addition to the former endeavour.

Model Context Protocol (MCP) handles the blend of Artificial Intelligence (AI) systems with a wider length of tools. It is a broad concept and this Notion MCP challenge provided an opportunity to delve into it and explore the concepts. The problem addressed was the issue of creating links and hardly remembering the details of what it does.

What I Built

I built a mentoring assistant that glances through your repository on GitHub to give solid reviews. It analyses the repositories and first commits alongside recent ones to give a push or general insights to the user. The process involves updating Notion with the desired URLs and giving a text input to an AI model to query the data in Notion. The model then does the analysis and presents its interesting findings, which it writes back to Notion by filling the columns automatically. The AI model utilised here and integrated with Notion was Claude.

Video Demo

Show us the code

The Code and config template can be viewed here

KathleenCode / notion_mcp

a model context protocol app

🚀 VibeCheck Mentor: An MCP-Powered Notion Assistant

A private AI Mentor that lives in your Notion. It turns bookmarks into a learning path using the Model Context Protocol (MCP).

🛠️ Setup Instructions

1. Notion Setup

Create a database called My Mentor.
Add properties: Topic (Title), Link (URL), Mentor's Insight (Text), Vibe (Select), Action Item (Checkbox), Status (Status).
Create an internal integration at developers.notion.com and connect it to your page.

2. Claude Desktop Configuration

Add this to your claude_desktop_config.json:

{
  "mcpServers": {
    "notion": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-notion"],
      "env": {
        "NOTION_API_KEY": "YOUR_NOTION_TOKEN_HERE"
      }
    }
  }
}

View on GitHub

How I Used Notion MCP

Notion served as a database to store the repository URLs, mentoring perspectives provided by Claude.ai, and other checks. An account was created, and a new page was clicked with a "/table" command inserted to generate a "table view". The database was set up with assorted columns having properties adjusted to text, checkbox, and others. An integration was linked to the database in Notion. A Claude.ai account was accessed with the connection to Notion configured in the developer settings and connectors. Now, the two apps communicated effortlessly. Claude had access to my Notion workspace. I added a link and a vibe to the Notion database while I summoned Claude to mentor me. Claude entered Notion and took a look at the items to write their corresponding viewpoints directly in the column it identified on its own in the Notion database.

The database in Notion prior to the inputs from Claude is portrayed in the image

The integration with the server is displayed here

The Claude Notion bridge is depicted in the image

Although the MCP context is extensive, narrowing it down in this project gave a hands-on feel of a workflow incorporating Notion and Artificial Intelligence agents to improve everyday activities with automation. The MCP outline involved Claude.ai to explore the database schema in Notion and search for the specified entries. It also moved the status autonomously from "new" to "mentoring". This mentoring assistant, powered by MCP, not only keeps links but also reads, analyzes and reveals a technical breakdown.

The Performance and Architecture of My AIDEAS Project

Marie Otoo — Thu, 12 Mar 2026 03:37:15 +0000

Building applications with an utmost focus on the standard CSS feature, although necessary is not of paramount importance. The activity of the app could be mimicked by the appearance in several scenarios.

For instance, in my Kaguide AI optimizer, the user interface needs to possess a feel of the GPU clusters and Neural Engines it monitors.

Moreover, the architecture of Kaguide AI centres on energetic themes and swift processes that are less devoid of static monitoring.

Here is a breakdown.

The Visuals. A blue colour theme with a sparkle of high-contrast tones was used to mirror the vibrancy of high performance computing. The backgrounds had a navy tone to provide a trust ambience for the necessary visualization of data.

The vibrant red and orange colours were used as warnings and emergencies. For clarity and visual appeal, sprinkles of the golden colour were used to contrast the backgrounds.

The Performance Document Object Models(DOM) changes in real-time monitoring does affect the functioning of the app.

SVG's were used minimally in the project to obstruct the browser's recalculate time across the various user-interface(UI) elements in our app. Limited animations were used which offloads most of the tasks to the GPU's.

3.The Events and Actions
In handling the app's navigation, parent listeners were used to reduce the event of memory overload.

Also, overlays were used to provide insights without losing the actual background information.

AWS Integration The backend of the app utilized AWS services in its orchestration. Moreover Kaguide AI included the use of Lambda, API Gateway and others for a seamless integration.

The Bottom Line
The user interfaces in fast-driven development should not be a bottleneck. The combination of colour themes in the power zone with event-driven layouts turns raw outputs to aesthetically-pleasing ones.

The project can be viewed here https://builder.aws.com/content/3AFyJoTmfcOHPSetnFPFxXYCMT3/aideas-kaguide-ai-your-go-to-guide if you have an AWS builder id I would appreciate your support with a like on the article on the AWS builder center, although not mandatory.

A Meal Prep Co-Pilot Built with Google Gemini - A Reflection

Marie Otoo — Wed, 04 Mar 2026 04:39:16 +0000

This is a submission for the Built with Google Gemini: Writing Challenge

Introduction

Meal decisions are not as rosy as enjoying the meal. The majority of individuals might view from a lens, the whole act of recipe preparation as a nightmare. Whereas some dishes are repetitive, eating the same old meal could be tedious. The thought of staring at ingredients to produce dishes is a myth to most, but in this age of Artificial Intelligence, where models are readily available, it is worth a try. This project was implemented during the Major League Hacking (MLH) Global Hack Beginners Week event, where participants completed various challenges. One of these challenges was to create a helper for tasks, under which this meal prep project is categorized. These MLH events happen throughout the year, both in person and virtual and seeing the former uniting with the DEV community to present this challenge is an opportunity to submit the meal prep project I built using Google Gemini.

What I Built with Google Gemini

A meal planner that takes ingredients from your refrigerator and outputs a full-course meal to you. Gemini was used in the brainstorming phase to generate the project outline. Then, further utilized in natural language conversations and exchanges to complete the project. The meal prep app takes an image and scans it with the Gemini API key, obtained from Google AI Studio, to give full recipe suggestions. This app does not just produce recipes; it provides three different meal plans for you to choose from. Particularly, a script in Python code handled the core of this project with several API calls to the gemini-3-flash-preview. Anytime a person runs this app with the image included, it hits the API to generate the necessary meal outputs. The API key was hidden in an environment variable to secure it, and the Google Generative AI Client libraries were installed as dependencies. Briefly, the script takes the image input by a user and sends it to the model, which then identifies the details to map to full meal recipes.

Demo

Google Gemini provided a stock open fridge photo for use in the testing phase of the app. Running the app with the stock photo gave the following meal plans:

Probing maintained

A different image of an open refrigerator filled with farm produce was also used, which gave the output below:

Testing continued

A third image of a fridge half-full with fewer ingredients than the previous responded with the below:

Scrutiny ongoing

What I Learned

Google Gemini provided fast and streamlined access to swiftly transform a question or thought into ideas to hold on to. It also helps in explaining and analyzing code snippets to the user. The follow-up questions were generated and provided with answers by Gemini. The unexpected turn was when the model suggested a deprecated model, which it readily modified to the latest one when asked to explain a mishap in the work. The Gemini AI served as an addition to the startup guide gemini-api/docs/quickstart by summarizing some aspects of it. What dazzled and stayed with me was that an AI Client could be set up with ease with Google Gemini's assistance. In short, the thing I learned about the meal prep co-pilot was that it serves as an everyday tool.

Google Gemini Feedback

Google Gemini made quite profound suggestions for the meal prep app, as listed:
-A history section
-A search for previous meals interface
-Ideas for another app

It also developed insights into the flash generative AI model used in this work by stating that the model can detect the food items in the images provided to deduce their quantity, whether half-empty or almost full, to prioritize which recipes from its stores of data to show to the user, which saves ample time. Concerning errors, the deprecated gemini-2.0-flash I used initially in this work, which hit a limit: 0 when running the app. This created friction and was promptly corrected by cross-checking the start-up documentation that Gemini might have overlooked. Gemini always kept on adding more perspectives to improve the app.

Conclusion

Working with Gemini to build a project was as stepwise as it was educational. Currently, I am optimizing it to a web version suitable for use on Cloud Run. The future of this project, as implied by Gemini, is to tailor the meal prep to serve as outputs for a Keto diet or a Vegan dish inclusive. Even more, to put the folder that houses the images into Google Cloud Storage.
The git repository can be viewed here https://github.com/KathleenCode/fridge-prep

Book Chapter

Marie Otoo — Mon, 02 Mar 2026 04:53:29 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

Book clubs foster human connections and relationships. They are everywhere and, in modern times, have also transitioned into the online space. The book club community consists of reading enthusiasts ranging from beginners to experts who schedule meeting times to assemble and discuss chapters of a picked book. In some areas, anyone can join one of these clubs, whereas for others, it is purely by invitation. The readers always have diverse opinions on some chapters and surprisingly unified ones on others. Some go ahead to fetch insights from others, while some try to teach and relate with their personal lives. The daunts are many as in every human society, but for this project, I picked a few.

Introduction

The difficulties of joining a book club lie in keeping in par with
the varying reading levels of each member of the club. Joining a book club that meets at a maximum of once a week can be a hurdle for some. The pain point here includes reading the required chapter before meeting for the discussions on the chosen book. This makes others trail behind or get ahead of themselves without fully immersing themselves in every alphabet, word, paragraph of every chapter of the book. As part of the Dev Weekend Challenge, we are to build an app that serves a community, and the chosen one on my part was the book club community.

What I Built

I built a book chapter app that gives ample time for readers to catch up with the book review sessions without getting input from those who have already finished reading the book. The project was built with Next.js and Supabase. Next was utilized because of its integrations with pages and Supabase was used because of its ease of setup. Next was incorporated with Typescript and Tailwind CSS, whereas the Supabase had keys to help with the project interaction with Next. Simply put, Next served as the frontend with the Supabase database as the backend. The browser persisted the data review. The frontend consisted of an interface that perfectly mimicked an actual book with colour themes, borders, giving the same warmth to readers as a book in hand would. An SQL table was created in the Supabase platform to store the received inputs from the frontend with the options to perform edit and other operations on them. The seamless integration of Next with Supabase streamlined the project.

Demo

The demonstration video has a user in action. The reader first chooses to write their insights on the chapter they just read and specifies it by selecting the chapter number. Upon posting, when the user intends to read from the upcoming chapters, the information then blurs instantly. This serves as a check to reduce unnecessary curiosity about the chapters remaining and increase anticipation to read with guesses. You can view it here .

Code

The SQL table creation in Supabase.

The app layout.

The source code can be viewed here

KathleenCode / book-review

a book review app

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more…

View on GitHub

How I Built It

The project was built by first creating a Next.js app with the command npx create-next-app@latest and setting up the Supabase client library by installation. Next, a Supabase URL and an anon key were generated from supabase.com. The tailwind CSS code had a general theme for the project. The main user interface had the app.js providing a form for user input, buttons, and placeholders to guide the users. The book chapter app was run on localhost.

Conclusion

This book chapter app shrinks bias as users take time to reflect and write their own viewpoints without the influence of the pre-written reflections of others in the book club. This project in sum, tackles one of the many unresolved problems in book clubs - one reader finishing before another and telling everything before others get the chance to do so. It simply creates an atmosphere for members of a book club to read in harmony and saves the surprises of the chapter and plot twists for everyone.

Built a Colour-Guessing Game with HTML, CSS and JavaScript

Marie Otoo — Thu, 26 Feb 2026 05:20:22 +0000

A colour-guessing game was built as practice for my frontend development.

This colour-guessing game:

consists of three files, an index.html, a style.css and a script.js.
has random colour generation
Resets properly
Scores points

To get started, create and open your project folder in VS Code or any code editor of your choice. Create three files as stated above.

The index.html has the basic layout for the game.
It displays a box, game status, score and a new game button.

The basic styling with code below includes large buttons, hover animations and a card layout, to make the game interface visually appealing.

The game logic is hidden in the script.js.
A random colour is generated on each page reload with six buttons also generated waiting to be clicked.
If accurate score increases, else score diminishes.

The project entails simple features and is a fun start in frontend.
To run this project simply open the index.html in a browser.

Built a Simple Node.js Express API

Marie Otoo — Tue, 24 Feb 2026 03:51:02 +0000

I decided to try my hand at API development and began with a beginner-friendly project. I built a simple API in a Node environment using Express. This API provided hands-on experience and practice in the field of backend development.

In this simple project:

An API was built with Node and Express
The API returned JSON data

To get started, I set up my code editor, VS Code, and made sure Node.js was installed. It can be checked by running in the terminal or bash:

node -v
npm -v

or downloaded from:

nodejs.org

if not already installed.

I continued by typing:

npm init -y
npm install express cors

Cross-origin resource sharing (CORS) makes the browser interact easily with the backend. Then confirm the dependencies in the folder in your chosen text editor or VS Code.

Next, I created an index.js with the code below.

To run the app:

node index.js

and open

http://localhost:3000

in a browser to see the message, including the email and time.

This app:

Created a Node Express server
Enabled CORS, cross-origin requests
Created a "GET /" route
Returned a JSON response -Created a Node Express server

A CURSED TAROT

Marie Otoo — Fri, 05 Dec 2025 04:15:55 +0000

Imagine attending a Halloween party to enjoy the pumpkin pies and gooky atmosphere, devoid of online scare. It gives a party vibe with a touch of horror. Now, a characteristic spookiness could be added to the scary event and revamped with the Cursed Tarot application.

The Cursed Tarot app was built with Kiro IDE. It is a Gothic app that features a horrifying welcome page to scare users, a horrific tale, with a silent candle flickering eerily, a dark card collection from which to draw a game of electrifying fate, and a smashing zombie game. This wicked app has a Harry Potter theme in the middle, detailing the houses, named in the movie, owl-wise quizzes about the book, and pure randomness. The technological language stack iciness is loosely based on the revived COBOL to serve the backend logic of this cursed application. In addition, the Frankenstein element combines the age-old COBOL with modern HTML in an oddly eerie fashion. It is just chaotic. In an invisible note, the design consists of small ogres, vampires, and werewolves, with haunted mansions in the background.

To conclude, this subtly ghastly application is run locally on a computer with a web browser pre-installed. This is a card game that possesses obsolete technology, intertwined with current stacks for a complete goosebump-inducing experience.

A WORD-PICKER STORY APP WITH KIRO

Marie Otoo — Mon, 15 Sep 2025 11:03:07 +0000

Story applications have interesting scopes attached to them. Some give users the option to generate their own storyline, whereas others have already created scripts for users to enjoy.
It is a wonder when users, upon using such applications or a traditional storybook, take note of novel words to cross-check meanings at a later time or never.
An application that picks keywords and gives their meaning so a user can follow the story context while reading was built with Kiro. Vibe coding by simple text served as input for Kiro to generate the original draft. Then hooks were added to automate the process. In general, a functional app was built with Kiro. It was sublime.