Vibe coding with Lovable

Thomas Vervik, Software Engineer at SeniorDev

​

Build AI agents with Model Context Protocol

Hennadii Tarasenko, Sr. Software Engineer at SeniorDev

​

Automation with n8n

Iryna Mohylenko, Product Designer at SeniorDev

​

​

Build AI agents with MCP and Vibe coding with Lovable

Navigating the Future: AI Agents and the Model Context Protocol

Thomas Vervik er daglig leder i SeniorDev, og erfaren utvikler. ��Han har sammen med kunder bygget et utall applikasjoner og plattformer, og jobber aktivt disse dager med å teste ut KI verktøy for å finne ut hvordan de beste skal brukes for å bygge suksessfulle IT verktøy fremover.

Thomas Vervik

Navigating the Future: AI Agents and the Model Context Protocol

Prompt-Based Development

• Lovable is a Swedish company�
• The platform is using a combination of OpenAI, Google Gemini, and Anthropic, distilled into a platform that can generate the software.�
• Supabase is a backend-as-a-service platform that integrates smoothly with Lovable to add powerful backend capabilities to your application

About Lovable

Navigating the Future: AI Agents and the Model Context Protocol

Requirements�I have an existing Webflow site with events, stored in Webflow’s headless CMS collection

• �As a Event manager I want to show events from Webflow CMS collection on my event page.
• I want the event system to be localized in Norwegian and English
• I want users to be able to register to an event
• I want to the users to receive a confirmation email upon registration
• I want the users to receive a reminder of the event three hours before it starts
• I want users to be able to see if they have registered
• As an Event manager I want to see everyone that signed up
• I want to style the event system with the theme from seniordev.com

​

​

What we are going to build

7

A custom event registration system

Navigating the Future: AI Agents and the Model Context Protocol

I would like to build a simple event system where users can register to an event.

The event organiser will be "SeniorDev Knowledge Corner"

The system should show a list of events.

Each event should have:

- Title

- Description

- Topic

- Date and time (a string)

- Event image

- Link to google meet

Show the events as a list, not as a grid

Initial Prompt

Navigating the Future: AI Agents and the Model Context Protocol

…

Connect to Supabase

Navigating the Future: AI Agents and the Model Context Protocol

We want to have control on the schema and tables created

​

And also to be able to check the data

Connect to the database

Navigating the Future: AI Agents and the Model Context Protocol

Use the theme in the attached file

​

Style the application

Navigating the Future: AI Agents and the Model Context Protocol

We want to fetch the events from Webflow's headless CMS collection.

The URL to use is: https://api.webflow.com/v2/collections/:collectionId/items

Store it in our database. The mapping from the response to our table should be:

fieldData.name -> events.title

fieldData.description2 -> events.description

fieldData.speakers -> events.topic

fieldData.cover-image-2.url -> events.image

fieldData.date -> events.human_date (the column type should be text)

fieldData.event-date -> events.date

fieldData.link-to-event -> events.link-to-presentation

fieldData.google-meet-link -> events.google-meet-link���Add the collection id to the edge function instead of taking it in as a parameter��I also want to set the collection id as a secret��Add first the collection id to the edge function

I don't see it in the edge function, where is it?

Great! Then I want a synchronize button to fetch the events in the collection

​

​

Connect to Webflow CMS Collection

Navigating the Future: AI Agents and the Model Context Protocol

Don't HTML espace the description and topic, show it as is��Organise the event card as on the screen shot

​

Add the event image under the title. Don't cut the height

​

The speakers in div on line src/components/EventCard.tsx:78:8, they are hard coded, just remove them��

List the newest events first. Use the column events.date for that

​

Don't show the "Join Google Meet" button of no link is available��Move the topic section below the description

Style the event card as attached file

Navigating the Future: AI Agents and the Model Context Protocol

We want users to be able to register to the event. All we need is their email. And store it in the database, in a table named "registrations"

​

​

Show all event registrations on a new page.

Store registrations

Navigating the Future: AI Agents and the Model Context Protocol

​

• It has many similarities with real programming in the sense of the short iterations�
• You will get stuck many times. Which is very similar to how programming works in general�
• The more you know, the less you get stuck�
• The prompting makes me a bit “lazy”, I notice the the brain turns off, so when I have to solve something myself, I need to do some “context switching”.�
• I have no doubts these tools in some shape and forms will be part of how coding will be done in the future�
• But it is expensive!

​

​

​

Final thoughts

7

A custom event registration system

Navigating the Future: AI Agents and the Model Context Protocol

Hennadii Tarasenko er full stack-utvikler med over 15 års erfaring. Han spesialiserer seg på applikasjonsutvikling, AI-integrasjon og optimalisering av systemer med høy trafikk.

Hennadii Tarasenko

03

02

01

Navigating the Future: AI Agents and the Model Context Protocol

MCP is used to develop AI agents that can interact with proprietary datasets seamlessly.

It is applicable across various industries, enabling the creation of smarter and more efficient automation tools.

Practical Applications

MCP provides a standardized framework for feeding AI agents with custom data.

This allows AI systems to provide responses that are tailored to individual user needs and contexts.

Key Features

Purpose of MCP

The Model Context Protocol (MCP) enables AI agents to utilize structured data effectively.

Its goal is to replace traditional web interfaces with intelligent, data-driven interactions.

Introduction to Model Context Protocol

5

Navigating the Future: AI Agents and the Model Context Protocol

Will create a system that summarizes the essence of a youtube training video

​

The MCP client is Claude. MCP server is created in Python

workflow with MCP tools:

• uploading audio file from Youtube (yt-dlp)
• transcribing audio into text (whisper)
• analyse the meaning for presentation (Claude)
• creating the presentation (Google Slides)

​

Today we will build a demo MCP server

Navigating the Future: AI Agents and the Model Context Protocol

Iryna Mohylenko er produktdesigner i SeniorDev, og har det siste året aktivt utforsket og brukt KI verktøy for design og nettsider.

Iryna Mohylenko

Navigating the Future: AI Agents and the Model Context Protocol

1. Automated flow: Post both text and an AI-generated image on Facebook

​

• Trigger: New row added to Google Sheets
• The text from the last row is selected
• The prompt for AI is created based on the post text
• The image is created from the prompt
• The text and the image are posted on Facebook

​

Automation with n8n

7

Navigating the Future: AI Agents and the Model Context Protocol

2. Automated flow of replying on support emails

​

• Trigger: the email is received
• AI evaluates the content of the email
• Customer Support AI Agent “answers” the email if it is a support one (creates an answer draft)

​

Automation with n8n

7

Navigating the Future: AI Agents and the Model Context Protocol

n8n makes it easy to build flexible, no-code automations that connect tools, process information, and save time. Whether it's content publishing or customer support, you can combine AI and integrations to create smart, scalable workflows without writing full code. It’s a powerful way to reduce manual work and focus on what really matters.

​

Final thoughts - Automation with n8n

7

Navigating the Future: AI Agents and the Model Context Protocol

Sr. Software Engineer at SeniorDev

Hennadii Tarasenko

CEO at SeniorDev

Thomas Vervik

Thank you!

9

Product designer at SeniorDev

Iryna Mohylenko