A fullstack app that uses an AI agent to generate images from natural language prompts. Built with LangGraph (agent orchestration), FastAPI (backend), and Nuxt 4 (frontend).
- Python 3.12+
- Node.js 20+
- pnpm 9+
- uv (Python package manager)
- A Google AI API key — get one here
# 1. Install dependencies
pnpm install
cd backend && uv sync && cd ..
# 2. Configure your API key
cp .env.example .env
# Edit .env and set GOOGLE_API_KEY=your-key-here
# 3. Start the app
pnpm devOpen http://localhost:3000 in your browser.
pnpm test # all tests
cd backend && uv run pytest -v # backend only
cd frontend && npx vitest --run # frontend onlyThe backend uses a LangGraph state graph with a single agent node:
START → image_generator → END
A user submits a prompt and a number of variations (1–4). The image_generator node calls the Google Gemini API once per variation and returns the generated images.
POST /generate
| Field | Type | Description |
|---|---|---|
prompt |
string | What to generate |
variations |
int | Number of image variations (1–4) |
Response: { images: [base64...], revised_prompt: string }
├── backend/ # Python — FastAPI + LangGraph
│ ├── app/
│ │ ├── agents/ # LangGraph graph + node definitions
│ │ ├── models/ # Pydantic request/response schemas + graph state
│ │ ├── prompts/ # Prompt templates
│ │ ├── routes/ # API endpoints
│ │ └── services/ # Gemini API wrapper
│ └── tests/
├── frontend/ # TypeScript — Nuxt 4 + Vue 3 + Tailwind CSS
│ ├── app/
│ │ ├── components/ # PromptForm, ImagePreview, LoadingProgress
│ │ ├── composables/ # useImageGeneration
│ │ └── pages/ # index.vue
│ └── tests/
├── .env.example # Environment template
├── package.json # Monorepo scripts (pnpm workspaces)
└── pnpm-workspace.yaml
| Layer | Technology |
|---|---|
| Agent orchestration | LangGraph (Python) |
| Backend API | FastAPI |
| AI model | Google Gemini |
| Frontend | Nuxt 4, Vue 3, Tailwind CSS v4 |
| Monorepo | pnpm workspaces |
| Python tooling | uv |