Astro Server Islands + Gemini API + AI SDK starter template

AI-powered customer reviews analysis with Astro and Gemini API via Vercel’s AI SDK. Modified from this Next.js template, described as follows.

This is a demo of AI generated summaries of customer reviews for an e-commerce storefront. The demo takes a set of customer reviews, and uses an LLM to create summaries of those reviews. It then displays the summary and the reviews in a demo UI.

Prerequisites

• Node v18.20.8 or v20.3.0, v22.0.0 or higher
• Gemini API key – get free here
• Upstash Redis DB – get free here

Quick Start

npm create astro@latest my-astro-project -- --template ekafyi/astro-ai-review-summary

1. Clone this repo / use as template / open in cloud IDE above
2. Run mv .env.example .env and fill in the credentials
3. Run npm install and npm run dev (or your preferred package manager)

Features

 

• Astro web framework
  • Performant by default
  • Server Islands for enabling server-side functionalities by component. Keep rest of page static or long-cached for optimal performance.
  • Adapters for deploy target. Deploy to Vercel (default), Netlify, Cloudflare, Node.js, and more.
  • Image component for image transformation
• AI SDK
  • Unified API for interfacing with LLMs from various providers. Supports Google (default), OpenAI, Anthropic, and more.
• React + Tailwind CSS + shadcn/ui for UI components
• Upstash Redis for data persistence
• Basic must-haves
  • Semantic markup and ARIA attributes for accessibility
  • Vitest for unit testing
  • Biome for linting & formatting

Project Structure

public  # unprocessed static files
src     # details below
├── assets
├── components
│   ├── astro
│   └── ui
├── layouts
├── lib
├── pages
└── styles

src/assets

Image files to be processed by Astro Image component

src/components

• /
  • React UI components
• /astro
  • Astro Server Island components
  • Astro Image component
  • Sitewide footer and header
• /ui
  • (Auto generated) shadcn/ui components

src/layouts

Sitewide layout component

src/lib

• ai-summarizer.ts – text generation with AI SDK
• fake-api.ts, fake-logger.ts – self-explanatory :)
• redis.ts – instantiate storage
• sample-data.ts – products and reviews data model
• utils.ts – (Auto generated) shadcn/ui CSS class helper

src/pages

Astro page components

• index.astro
  • show list of products
• products/[productId].astro
  • show a product
  • show reviews of given product
  • show summary of reviews of given product
    • get summary from storage if exists
    • generate with AI if it does not exist, then write to storage

src/styles

CSS file

Deploying

This template uses the @astrojs/vercel adapter. Steps to deploy:

1. Create a free Vercel account
2. Create a new project and import your repository
3. Paste your .env value in the "Deploy" screen

To deploy elsewhere, install your preferred adapter, eg. npx astro add netlify.

Docs: https://docs.astro.build/en/guides/on-demand-rendering/#server-adapters

Customising

LLM provider

Use another provider:

// src/lib/ai-summarizer.ts
- import { google } from "@ai-sdk/google";
+ import { openai } from "@ai-sdk/openai";

Docs: https://ai-sdk.dev/providers/ai-sdk-providers

Frontend frameworks

Add an Astro frontend framework integration:

pnpm astro add svelte

You can use multiple framework integrations together – eg. React and Svelte.

You can use regular HTML markup and vanilla JS in Astro components.

Docs:

• https://docs.astro.build/en/guides/framework-components
• https://docs.astro.build/en/basics/astro-components/

Styling

Vanilla CSS is supported by default. Edit in src/styles/global.css.

Docs: https://docs.astro.build/en/guides/styling/

Don’t want to use Tailwind and/or shadcn/ui?

Remove Tailwind:

1. Run pnpm remove tailwindcss @tailwindcss/vite
2. Remove imports from src/styles/global.css

Remove shadcn/ui: (this repo only uses the Avatar component)

1. Remove files: rm components.json src/lib/utils.ts
2. Remove dir: rm -rf src/components/ui
3. Remove supporting libraries: pnpm remove tailwind-merge @radix-ui/react-avatar