Integrating AI into a Modern Web App

When most people think of AI in web applications, they picture chatbots - human-like assistants that can help you perform task in said application. But AI can be more than just a conversational interface. It can work behind the scenes as a powerful analysis engine, a content generator, a decision-making system, or a personalization layer that transforms user experiences.

In our case, we're using AI not as a chat interface, but as a processor that can extract meaning from unstructured data. This approach lets AI do what it does best - process large amounts of information quickly - while keeping the user experience straightforward and focused on results.

The App

If you're vegan (or have vegan friends), you know the drill - you're hungry, you find a restaurant, but then you spend ages trying to figure out if they have anything you can actually eat. Restaurant websites are often a mess when it comes to labeling vegan items, and menus can be super frustrating to decode.

That's why we built Plantable. We're using AI to do the heavy lifting - scraping restaurant websites and menus, and then analyzing those menus for vegan options.

Let's see how we put this together!

The Tech

For a rapid prototype, we mainly rely on the following tools:

• Next.js: Great fullstack framework for rapid development

• Prisma: Type-safe database ORM

• Vercel AI SDK: Takes the complexity out of adding AI to your app

This combo gives us a really good foundation. Next.js handles the web parts, Prisma makes database work simpler, and the Vercel AI SDK lets us plug in AI without too much fuss.

Why AI

It's tempting to use AI for the sake of using AI, but remember to take a step back and ask yuorself if you really need AI. For example, tasks that involve analyzing large amounts of unstructured data, recognizing patterns, or processing information that would otherwise require a human are perfect.

In Plantable, the user flow is simple:

1. You paste in a restaurant URL

2. We grab the website content

3. AI analyzes the menu

4. You get results showing vegan options

5. We save those results so other people can benefit too

Getting Started with the Vercel AI SDK

The Vercel AI SDK makes it super easy to add AI to your app. Here's the basic setup:

import { generateText, tool } from "ai";
import { anthropic } from "@ai-sdk/anthropic";
import { z } from "zod";

// This tells the AI what format we want back
const restaurantInfoSchema = z.object({
  image: z
    .string()
    .describe("An image found on the website for display purposes."),
  location: z.object({
    name: z.string().describe("The name of the location."),
    url: z
      .string()
      .describe("A link to the restaurant's location on Google Maps."),
  }),
  summary: z.string(),
  menus: z.array(
    z.object({
      url: z.string().describe("The URL where the menu can be viewed"),
      name: z.string().describe("The name of the menu."),
    })
  ),
  items: z.array(
    z.object({
      type: z.enum([
        "vegan",
        "appears-to-be-vegan",
        "vegan-with-modifications",
      ]),
      name: z.string(),
      description: z.string(),
    })
  ),
});

const generatedResult = await generateText({
  prompt: `You are a vegan food expert. Analyze the restaurant website content to determine if they have any vegan options.

  Website URL: ${url}
        
  Analyze the menu and content for:
  1. Explicitly marked vegan items
  2. Items that appear to be vegan (plant-based, no animal products)
  3. Items that could be made vegan with modifications
  
  Provide a clear yes/no answer about whether vegan options are available, followed by a brief explanation.`,
  model: anthropic("claude-3-5-sonnet-latest"),
  maxSteps: 10,
  tools: {
    readWebpage: tool({
      description: "Read the contents of a webpage",
      parameters: z.object({
        url: z.string().describe("The URL of the webpage to read"),
      }),
      execute: async ({ url }) => readWebpage(url),
    }),
    formatRestaurantInfo: tool({
      description: "Format the restaurant information.",
      parameters: restaurantInfoSchema,
      execute: async (args) => args,
    }),
  },
  schema: restaurantInfoSchema,
});

The SDK provides this handy generateText function to talk to most popular LLM providers. In this case we're using Anthropic's Claude

This code does a few key things:

1. It gives the AI clear instructions about what to look for

2. It tells it to use Claude 3.5 Sonnet

3. It gives the AI a tool to fetch website content

4. It makes sure the AI gives us back structured data we can work with

Challenges

As you can see, adding AI to your app is super quick! However it doesn't come without its challenges.

1. LLM Calls Are Expensive

LLM calls can be costly, slow and have rate limits. We mitigated this by caching all the results in a database, preventing the same restaurant from having to be checked over and over, while also delivering results to subsequent users instantly.

The Vercel AI SDK also provides functions for streaming output to the user. This way the user will gradually receive output from the LLM, without having to look at a loading screen until it's completely finished!

2. AI Can Be Unpredictable

LLM output is not deterministic. It can provide different answers for the same input. The Vercel AI SDK slightly mitigates this by enabling us to use a Zod schema for structured output, however the content within the structure can still vary. You can deal with this in a few ways:

1. Prompt engineering - Monitoring your applications output using a service like Langfuse could provide you with insights on how to improve your prompt and get better, more consistent results.

2. User feedback - Prompt users to provide feedback on the output of the LLM. Is it correct? Did it miss anything? If a critical mass of users judge the output as wrong, regenerate it.

3. Human in the loop - Depending on the application it can often be a good idea to have a human moderator in between the AI and the user.

Wrapping Up

As AI keeps getting better, I'm excited to see what other problems we can solve with it. I hope this post gives you some ideas for your own AI-powered projects!

Looking to enhance your business with AI, but not sure where to start? We specialize in building modern web applications and data platforms.

• Rapid design sprints to quickly prototype and validate AI-powered features

• Data organization and management for AI-ready systems

• Custom software solutions tailored to your business needs

Connect with me on LinkedIn to discuss how we can leverage AI to solve your unique challenges!