1.3 Your First Genkit Recipe - Building a Web Page Summarizer

To recap, so far we have learned about the Genkit Pantry and the Anatomy of Genkit. You should now have a good understanding of the building blocks of Genkit for building simple, yet powerful AI applications.

To solidify your understanding, let’s open our code editor and build a simple Genkit application will summarize web pages. It will be an express server that will have an endpoint /summarize which will accept a URL as a query parameter and return a summary of the web page at that URL.

How It Works

The user sends a GET request to the /summarize endpoint with a URL as a query parameter.
The server fetches the content of the web page at the provided URL and extracts the text. We will use standard web scraping techniques for this.
The extracted text is then sent to the Gemini model via Genkit to generate a summary.
The generated summary is sent back to the user as the response.

Let’s Build It

We will start by setting up a new Node.js project and installing the necessary dependencies.

# create a new directory for the project
mkdir genkit-summarizer
cd genkit-summarizer

# initialize npm
npm init -y

# initialize TypeScript
npx tsc --init

# install dependencies
npm install genkit express @genkit-ai/google-genai cheerio html-to-text

# install dev dependencies
npm install -D tsx @types/express @types/html-to-text

Here, we have installed:

genkit: The core Genkit SDK.
express: A web framework for Node.js.
node-fetch: A module that allows you to make HTTP requests.
@genkit-ai/google-genai: The Google Gemini AI plugin for Genkit.
cheerio: A library for parsing and manipulating HTML.
html-to-text: A library to convert HTML content to plain text.

Next, create an index.ts file and add the following code:

import express from 'express';
import { googleAI } from '@genkit-ai/google-genai';
import { genkit } from 'genkit';
import * as c from 'cheerio';
import { convert } from 'html-to-text';

// initialize express app
const app = express();

// define the port
const port = 3000;

// initialize Genkit with the Google Gemini plugin, using the Gemini 2.5 Flash model
const ai = genkit({
  plugins: [googleAI()],
  model: googleAI.model('gemini-2.5-flash'), // use gemini-2.5-flash
});

app.get('/summarize', async (req, res) => {
  // our code for summarizer will come in here
});

// start the server, listening on the specified port
app.listen(port, () => {
  console.log(`Genkit summarizer app listening at http://localhost:${port}`);
});

For the /summarize endpoint, we will need to do the following:

Fetch the web page content.
Extract the text from the HTML.
Send the text to the Gemini model via Genkit to generate a summary.

Here’s the complete code for the /summarize endpoint, with comments explaining each step:

app.get('/summarize', async (req, res) => {
  // get the URL from query parameters
  const url = req.query.url as string;

  // if no URL is provided, return an error
  if (!url) {
    return res.status(400).send('Please provide a URL as a query parameter.');
  }

  try {
    // fetch the web page content, using cheerio to parse HTML
    const html = await c.fromURL(url);

    // extract the body content from the HTML
    const htmlContent = html('body').text();

    // convert HTML to plain text, using html-to-text
    const content = convert(htmlContent);

    const { text } = await ai.generate({
      prompt: `
      Summarize the following web page, in a concise manner.

      Context:
      ${content}
    `,
    });

    res.send(text);
  } catch (error) {
    console.error(error);
    res.status(500).send('An error occurred while processing your request.');
  }
});

One important to note is that some web pages may have a lot of content, which may exceed the token limit of the Gemini model. In a real-world application, you would want to implement techniques such as text chunking or retrieval-augmented generation (RAG) to handle large documents, we will cover this later on. However, for this simple example, we will keep it straightforward.

Also, keep in mind that web scraping should be done responsibly, respecting the terms of service of the websites you are scraping from. And some websites may have measures in place to prevent scraping.

With that, our simple Genkit web page summarizer is complete! You can run the application using:

export GENAI_API_KEY="YOUR_GOOGLE_GENAI_API_KEY"
npx tsx index.ts

And here is what the complete index.ts file looks like:

import express from 'express';
import { googleAI } from '@genkit-ai/google-genai';
import { genkit } from 'genkit';
import * as c from 'cheerio';
import { convert } from 'html-to-text';

// initialize express app
const app = express();
// define the port
const port = 3000;

// initialize Genkit with the Google Gemini plugin, using the Gemini 2.5 Flash model
const ai = genkit({
  plugins: [googleAI()],
  model: googleAI.model('gemini-2.5-flash'), // use gemini-2.5-flash
});

app.get('/summarize', async (req, res) => {
  // get the URL from query parameters
  const url = req.query.url as string;

  // if no URL is provided, return an error
  if (!url) {
    return res.status(400).send('Please provide a URL as a query parameter.');
  }

  try {
    // fetch the web page content, using cheerio to parse HTML
    const html = await c.fromURL(url);

    // extract the body content from the HTML
    const htmlContent = html('body').text();

    // convert HTML to plain text, using html-to-text
    const content = convert(htmlContent);

    const { text } = await ai.generate({
      prompt: `
      Summarize the following web page, in a concise manner.

      Context:
      ${content}
    `,
    });

    res.send(text);
  } catch (error) {
    console.error(error);
    res.status(500).send('An error occurred while processing your request.');
  }
});

// start the server, listening on the specified port
app.listen(port, () => {
  console.log(`Genkit summarizer app listening at http://localhost:${port}`);
});

You can then access the summarizer by navigating to http://localhost:3000/summarize?url=https://genkit.dev/docs/get-started/ in your web browser, replacing https://genkit.dev/docs/get-started/ with the URL of the web page you want to summarize. Try this out with different web pages and see the summaries generated by the Gemini model via Genkit!

Here are a few challenges you can try to further enhance this application:

Try a different prompt to see how it affects the summary.
Try different models from Gemini and non-Gemini models such as GPT-5 or Claude. How do the summaries differ?
Update the application to make the prompt customizable via query parameters.

// TODO: Add Link to Discord community

If you are facing any issues, feel free to reach out on our Discord community for help.

Congratulations on building your first Genkit application! You’ve learned how to set up a Genkit project, integrate the Google Gemini model, and build a simple web page summarizer. This is just the beginning of what you can achieve with Genkit. In the next sections, we will explore more advanced techniques and features of Genkit to build even more powerful AI applications.

Happy coding!

🚀 Get the Complete Code

This recipe includes a full GitHub repository with working code, setup instructions, and examples. Unlock access to build faster and support this cookbook!

Complete, tested code repositories

Copy-paste ready examples

Lifetime access with updates

Support future recipes & content

Unlock All Recipes - 50% Off