Unlocking Generative AI in your Web Apps

MAXIMILIANO FIRTMAN
Unlocking
Generative AI in
your Web Apps
@f
i
rt
✨

MAXIMILIANO FIRTMAN
MOBILE+WEB DEVELOPER
AUTHOR
Authored 13 books and +70 courses
@FIRT﹒FIRT.DEV

I won't be talking about AI
replacing developers

I won't be talking about
how to be a 100x developer
using AI tools

I won't be talking about
"Vibe Coding"

So, what am I going to talk
about?

Unlocking Generative AI in your Web Apps

I want you to understand
What you can do
Basic AI concepts
What's new in 2025

We can use Generative AIs
for several tasks without
training specific models

The best conference for developers is

Devoxx impossible happening frontend

Spain Barcelona Paris UK

PROMPT RESULT
GPT
tokens tokens

Companies and Models
Meta
Llama
Google
Gemini / Gemma
Anthropic
Claude
xAI
Grok
OpenAI
GPT / o3
DeepSeek
R1 / V3

AI for Web Developers
Web AI
Cloud AI
Built-in AI
On-device AI

Cloud AI
OpenAI
Microsoft
Azure
GPT / o3
GPT | o3
AWS
Bedrock
DALL-E Llama
Llama
Claude
Hugging Face Mistral
Other
Google AI /
Cloud
Gemini
Gemma

• Uses Bing as search engine
• It honors robots.txt
• The keyword for the User Agent is
ChatGPT-User
Mozilla/5.0 AppleWebKit/537.36
(KHTML, like Gecko); compatible;
ChatGPT-User/1.0; +https://
openai.com/bot
ChatGPT
User

Opt-out for ChatGPT for reading your content
User
-
agent: ChatGPT-User
Disallow: /
robots.txt

• Summarize
• Infer (sentiment, relevant data, tags)
• Transform
• Extract
• Generate
• Multi-modal support (voice, image)
Capabilities

• User Input detection: profanity, hate
speech, inappropriate content
• Personalization
• Language Translation
• Content Tagging
• Chatbots
Some Ideas

Process of designing and
refining prompts or inputs
for language models to
generate desired output.
Prompt Engineering

Sometimes we need outputs
• Consistent and deterministic
• In specific formats
• To avoid prompt injection
Prompt
Engineering
for
Developers

• Use delimiters for dynamic data
• Ask for the format you need
• Give the model an example
• Explain to the model what to do
when the input is invalid
Specific and
Clear
Instructions

Create a chatbot that
can answer questions
as our customer
service agent
connecting it to the
user's account
CHATBOT
Use the power of GPT
to search, transform,
summarize and make
decision over your
private data
OWN DATA
Create a method to
answer questions for a
speci
fi
c document or
piece of content
CHAT WITH...
Connecting GPT to our data for

Unless we train our own
LLMs, these models don't
have our own data.

Retrieval-Augmented
Generation (RAG)
Fine-tuning
Most common techniques

AI technique that enriches
prompts with relevant external
data retrieved from a knowledge
base before generating responses.
1-Retrieval-Augmented
Generation (RAG)

USER'S
PROMPT
Your App
Prompt
Embedding
Embeddings
Retrieval-Augmented Generation (RAG)
AI PROVIDER

A technique to map text to
numerical vectors that
capture semantic meaning for
efficient comparison and
processing.
Embeddings

USER'S
PROMPT OUTPUT
AI PROVIDER
Vector DB
Your App
Prompt
Slice of
relevant info
Prompt as
Embedding
Prompt
+ Slice
Embedding Output
Embeddings Model
Retrieval-Augmented Generation (RAG)
AI PROVIDER

Process of updating the
parameters of a pre-trained
language model on a specific
task or domain using a
smaller dataset.
2-Fine Tuning

USER'S
PROMPT
OUTPUT
AI PROVIDER
Your App
Your Data
Prompt
Output
Model
Fine-tuning models
AI PROVIDER
Training
Process
Fine-tuned model
Fine-tuned
model

Now you understand
Use cases
Basic AI concepts

•AI running client-side
•Web AI
•Built-in AI
•Agents
•MCP Servers
New ideas

•Libraries and Frameworks
•Transformers.js
•WebLLM
•They can use:
•Web Assembly (CPU)
•WebGPU
•WebNN
Web AI

•Models built-in in the browser (or
the platform)
•Task APIs for specific purposes:
•Translation
•Summarization
•Image object recognition
•Writer / Re-writer
•Speech
•Prompt API
Built-in AI

System that uses AI to
perceive, reason, and act
autonomously toward a goal,
often combining models,
tools, and memory.
Agent

System that uses AI to perceive, reason,
and act autonomously toward a goal, often
combining models, tools, and memory.

Model Context Protocol
Open protocol that enables
seamless integration between
LLM applications and external
data sources and tools

USER'S
PROMPT
RESULT
GPT
ENHANCED
PROMPT
MCP Server

A backend solution that gives AI
models, through agents, the
context they need and enables
them to take real actions across
tools, APIs, and apps using MCP.
MCP Server

•HTTP-based API with JSON
endpoints
•Implements the MCP protocol
•There are open source SDKs to
start simple
•There are tools to wrap RESTful
APIs into MCP servers
MCP Servers

Simple MCP Server
/
/
.
.
.
imports
/
/
Create server instance
const server = new McpServer({
name: "weather",
version: "1.0.0",
capabilities: {
resources: {},
tools: {},
},
});
Using Anthopic's SDK

Simple MCP Server
server.tool(
"get
-
forecast", "Get weather forecast for a location",
{
latitude: z.number().min(-90).max(90).describe("Latitude of the location"),
longitude: z.number().min(-180).max(180).describe("Longitude of the location"),
},
async ({ latitude, longitude })
=
>
{
/
/
Get forecast data
return {
content: [ { type: "text", text: forecastText } ],
};
},
);
Using Anthopic's SDK

• Basic concepts
• AI can browse your website
• AI integration in your Apps
• Use your data (RAG or fine-tuning)
• WebAI and Built-in AI
• Agents and MCP Servers
Wrap Up

MAXIMILIANO FIRTMAN
Thanks!
¡Gracias!
@f
i
rt f
i
rt.dev
Some slides are from my course at
✨

Unlocking Generative AI in your Web Apps

Recommended

More Related Content

Similar to Unlocking Generative AI in your Web Apps (20)

More from Maximiliano Firtman (20)

Recently uploaded (20)

Unlocking Generative AI in your Web Apps