An interactive text adventure set in the Final Fantasy VII universe. Play through an original story featuring Cloud, Tifa, Aerith, Zack, Barrett, and Sephiroth — with branching choices, a living group chat, and AI-driven storytelling powered by Claude.
- 9-act narrative arc with a climactic finale generated for your specific choices
- Typewriter text effect for immersive scene-by-scene delivery
- Branching choices — your decisions shape relationships, tone, and endings
- 5 opening variants including canon scenarios (Midgar reactor, moonlit ruins with Sephiroth, and more)
- Canon relationships enforced in the background (Cloud ↔ Tifa, Zack ↔ Aerith, etc.)
- Real-time multi-character chat with Cloud, Tifa, Aerith, Zack, Barrett, and Sephiroth
- 5 relationship options per character: Stranger · Friend · Partner · Lover · Enemy
- Structured memory system — the AI remembers past conversations and key events
- Random event trigger (🎲) to kick off unexpected scenes
- Auto-summarizes memory every 6 meaningful exchanges
- AI-generated novel — turns your playthrough into readable prose
- Character profile & dimensions — MBTI-like analysis, alignment, risk tolerance, relationship style
- Choice log with impact analysis — see how each decision mattered
- 3 tabs: Novel · Choices · Dimensions
- Full support for Chinese (Simplified) and English — switch at any time on the start screen
| Layer | Technology |
|---|---|
| Web frontend | Next.js 16 (App Router) |
| Styling | Tailwind CSS v4 |
| AI backend | Anthropic Claude (claude-sonnet-4-5) via @anthropic-ai/sdk |
| API route | POST /api/chat — accepts { systemPrompt, messages }, returns { content } |
| Mobile client | Expo / React Native (separate repo) |
ff7-chronicle/
├── app/
│ ├── api/
│ │ └── chat/
│ │ └── route.js # Claude API endpoint
│ ├── page.js # Main game UI (story + group chat)
│ ├── layout.js
│ └── globals.css
├── public/
│ └── portraits/ # Character portrait images
│ ├── cloud.jpg
│ ├── tifa.jpg
│ ├── aerith.jpg
│ ├── zack.jpg
│ ├── barrett.jpg
│ └── sephiroth.jpg
├── package.json
└── next.config.mjs
- Node.js 18+
- An Anthropic API key
npm installCreate a .env.local file in the project root:
ANTHROPIC_API_KEY=sk-ant-...your-key-here...
Important: Never commit this file. It is already excluded by
.gitignore.
npm run devOpen http://localhost:3000 in your browser.
Deploying to Vercel lets the mobile app connect to the backend without your computer needing to be on.
If you haven't already, push this project to your GitHub account.
- Go to vercel.com and sign in (free tier is sufficient)
- Click Add New → Project
- Select this GitHub repository
- Click Deploy (Vercel auto-detects Next.js — no build settings needed)
In your Vercel project dashboard:
- Go to Settings → Environment Variables
- Add:
- Name:
ANTHROPIC_API_KEY - Value:
sk-ant-...your-key... - Environment: Production, Preview, Development (check all three)
- Name:
- Click Save, then Redeploy
Once deployed, you'll get a URL like https://ff7-chronicle.vercel.app.
In the mobile app's .env file:
EXPO_PUBLIC_API_BASE_URL=https://ff7-chronicle.vercel.app
The single endpoint used by both the web and mobile clients.
Request body:
{
"systemPrompt": "You are playing Cloud Strife...",
"messages": [
{ "role": "user", "content": "What should we do next?" }
]
}Response:
{
"content": "Cloud adjusts his sword and looks toward the reactor..."
}Error response:
{
"error": "description of what went wrong"
}The companion mobile app (Expo / React Native) connects to this backend.
- Repo: ff7-chronicle-mobile
- Requires Expo Go (iOS / Android) for development
- Set
EXPO_PUBLIC_API_BASE_URLto your Vercel deployment URL
| Variable | Required | Description |
|---|---|---|
ANTHROPIC_API_KEY |
Yes | Your Anthropic API key from console.anthropic.com |
Personal project. All Final Fantasy VII characters and lore belong to Square Enix. This project is non-commercial fan work.