Unit 7.3 · Tutorial 1

AI Integration & Serverless/Edge

Chapter 23 · Capstone Project
~3 hours Advanced AI · LLM · Serverless · Edge

Overview

Emerging technologies are transforming web development. This tutorial explores how to integrate AI services (LLMs, embeddings) into your application, deploy serverless functions, and use edge computing for low‑latency global delivery. You'll future‑proof your capstone project with these cutting‑edge technologies.

Why this matters: AI and serverless are revolutionising how we build applications. Integrating them into your capstone demonstrates advanced, industry‑relevant skills.

1. Introduction to AI Integration

AI integration can add powerful features to your application:

  • Chatbots: Customer support, FAQ assistants.
  • Content generation: Blog posts, product descriptions.
  • Recommendations: Personalised product or content suggestions.
  • Sentiment analysis: Analysing user reviews or feedback.
  • Translation: Multi‑language support.

Popular AI services:

  • OpenAI: GPT‑4, DALL‑E, embedding models.
  • Hugging Face: Open‑source models (BERT, Llama, etc.).
  • Google Cloud AI: Vision, Translation, Natural Language.
  • Anthropic: Claude models.

2. LLM APIs (OpenAI, Hugging Face)

OpenAI API

// backend/services/openai.service.ts import OpenAI from 'openai'; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); export class OpenAIService { async generateProductDescription(name: string, category: string): Promise { const response = await openai.chat.completions.create({ model: 'gpt-4', messages: [ { role: 'system', content: 'You are a product copywriter.' }, { role: 'user', content: `Write a compelling product description for "${name}" in the ${category} category.` } ], temperature: 0.7, max_tokens: 150, }); return response.choices[0].message.content || ''; } }
// Integration with controller @Post('ai/description') async generateDescription(@Body() body: { name: string; category: string }) { return this.openaiService.generateProductDescription(body.name, body.category); }

Hugging Face API

import { HfInference } from '@huggingface/inference'; const hf = new HfInference(process.env.HF_TOKEN); async function generateText(prompt: string) { const result = await hf.textGeneration({ model: 'microsoft/DialoGPT-medium', inputs: prompt, parameters: { max_new_tokens: 100 }, }); return result.generated_text; }
Cost management: LLM APIs are pay‑per‑use. Implement caching and rate limiting to control costs.

3. Embeddings & Vector Search

Embeddings convert text into numerical vectors. They enable semantic search, recommendations, and clustering.

// Generate embeddings with OpenAI async function getEmbedding(text: string): Promise { const response = await openai.embeddings.create({ model: 'text-embedding-ada-002', input: text, }); return response.data[0].embedding; } // Store in PostgreSQL with pgvector CREATE EXTENSION vector; CREATE TABLE products ( id SERIAL PRIMARY KEY, name TEXT, description TEXT, embedding vector(1536) ); // Semantic search async function searchProducts(query: string, limit: number = 10) { const embedding = await getEmbedding(query); const result = await prisma.$queryRaw` SELECT * FROM products ORDER BY embedding <-> ${embedding}::vector LIMIT ${limit} `; return result; }

Vector databases: Pinecone, Weaviate, Milvus, or PostgreSQL with pgvector.

4. Serverless Deployment

Serverless functions run on demand, scaling automatically. Deploy AI workloads to AWS Lambda, Cloudflare Workers, or Vercel Functions.

// Vercel Serverless Function – api/ai/description.ts import { NextRequest, NextResponse } from 'next/server'; import { OpenAI } from 'openai'; const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }); export async function POST(req: NextRequest) { const { name, category } = await req.json(); const description = await generateDescription(name, category); return NextResponse.json({ description }); }
// AWS Lambda with Node.js exports.handler = async (event) => { const { name, category } = JSON.parse(event.body); const description = await generateDescription(name, category); return { statusCode: 200, body: JSON.stringify({ description }), }; };

5. Edge Computing (Cloudflare Workers)

Edge computing runs code close to the user, reducing latency. Use it for caching, A/B testing, and lightweight AI inference.

// Cloudflare Worker – edge AI inference export default { async fetch(request, env) { const url = new URL(request.url); if (url.pathname === '/api/ai/classify') { const text = url.searchParams.get('text') || ''; // Run a lightweight model (e.g., TensorFlow.js) at the edge const classification = await classifyText(text); return new Response(JSON.stringify({ classification }), { headers: { 'Content-Type': 'application/json' }, }); } return new Response('Not Found', { status: 404 }); } };
Edge use cases: Image optimisation, bot protection, geolocation, A/B testing, real‑time personalisation.

Quiz

Question 1

What is the primary purpose of text embeddings?

  • To encrypt text data
  • To convert text into numerical vectors for semantic search
  • To generate images from text
  • To compress text files
Show answer
B. To convert text into numerical vectors for semantic search.

Question 2

Which deployment model runs code at the edge, closest to users?

  • Serverless
  • Edge Computing
  • Monolithic
  • On‑premise
Show answer
B. Edge Computing.

Question 3

Which vector database extension can be used with PostgreSQL?

  • pgvector
  • pgai
  • postgis
  • pgsearch
Show answer
A. pgvector.

Exercises

Exercise 1

Write a function that uses the OpenAI API to summarise a blog post in 50 words or less.

Sample answer
async function summarizePost(content: string): Promise { const response = await openai.chat.completions.create({ model: 'gpt-3.5-turbo', messages: [ { role: 'system', content: 'You are a summarisation assistant.' }, { role: 'user', content: `Summarise the following text in 50 words or less: ${content}` } ], max_tokens: 60, }); return response.choices[0].message.content || ''; }

Exercise 2

Set up a Cloudflare Worker that fetches data from your backend API and caches the response at the edge.

Sample answer
export default { async fetch(request, env) { const url = new URL(request.url); if (url.pathname.startsWith('/api/products')) { const cache = caches.default; const cached = await cache.match(request); if (cached) return cached; const response = await fetch('https://api-backend.com' + request.url); const cacheResponse = new Response(response.body, response); cacheResponse.headers.set('Cache-Control', 'public, max-age=3600'); await cache.put(request, cacheResponse.clone()); return cacheResponse; } return fetch(request); } };

Homework

Homework 1

Integrate an AI feature into your capstone project (e.g., chatbot, product description generator, semantic search). Deploy it using a serverless function.

Sample outline
  • AI Feature: Choose one AI feature to implement.
  • Integration: Use OpenAI or Hugging Face API.
  • Serverless: Deploy as a serverless function (Vercel/AWS Lambda).
  • Documentation: Document the integration and usage.

Mini‑Project

AI‑Enhanced Capstone

Enhance your capstone project with an emerging technology:

  • Add an AI feature (chatbot, recommendations, content generation)
  • Use embeddings for semantic search
  • Deploy a serverless function for AI workloads
  • Implement edge caching for improved performance
Sample outline
  • AI Feature: Product recommendation based on user browsing history.
  • Serverless: Recommendation API on Vercel Functions.
  • Edge: Cloudflare Worker for caching product data.
  • Documentation: Include AI integration in your final report.

Tutorial Summary

You explored how to integrate AI services (LLMs and embeddings) into your application, deploy serverless functions, and leverage edge computing. These emerging technologies will set your capstone project apart and demonstrate your ability to work with cutting‑edge tools.

Key takeaway: AI and serverless are the future of web development. Adding them to your capstone shows you're ready for the next generation of software engineering.