A web application that uses AI to automatically generate descriptive alt text for images. Built with Next.js and the Vercel AI SDK and powered by Google Gemini AI.
- Upload images in PNG, JPG, or JPEG format up to 10MB
- AI-powered alt text generation using Google Gemini Flash
- Real-time streaming of generated descriptions
- Form validation with error handling
- Toast notifications for user feedback
- REACT - JavaScript library for building user interfaces
- NEXT.JS - React framework for production
- TYPESCRIPT - Typed superset of JavaScript
- TAILWINDCSS - Utility-first CSS framework
- VERCEL AI SDK - AI integration toolkit
- GOOGLE GEMINI - AI model for image analysis
- REACT HOOK FORM - Form validation library
- ZOD - Schema validation
- SHADCN/UI - UI component library
- SONNER - Toast notification library
- Clone the repo
git clone https://github.com/yourusername/alt-gen.git
cd alt-gen- Install packages
npm install
# or
yarn add
# or
pnpm install
# or
bun install- Create a
.env.localfile in the root directory and add your Vercel AI Gateway API key:
AI_GATEWAY_API_KEY=your_api_key_hereTo get an API key, visit the Vercel AI Gateway documentation.
To start the application, run:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to use the application.
- Click the file input to select an image
- Choose a PNG, JPG, or JPEG image up to 10MB
- Click Submit
- Wait for the AI to generate the alt text
- Copy the generated description for use in your web projects
The application requires the following environment variable:
AI_GATEWAY_API_KEY- Your Vercel AI Gateway API key for accessing Google Gemini AI
To learn more about the technologies used in this project:
- Next.js Documentation - learn about Next.js features and API
- Vercel AI SDK - learn about integrating AI models
- React Hook Form - performant form validation
- Tailwind CSS - utility-first CSS framework