OuijaGPT

Resurrect dead APIs through a mystical Ouija board interface powered by AI. Ask questions, get answers from the digital afterlife with voice input, atmospheric effects, and GPT-4 intelligence.

Comment

Inspiration

The tech industry has a graveyard of beloved APIs that have been shut down: Google+, Yahoo Answers, Vine, Parse.com, and countless others. Developers who built on these platforms were left scrambling when they disappeared. We wondered: what if we could bring these APIs back to life, even if just to answer questions about what they once were? What if we could create a mystical, engaging way to interact with the "spirits" of dead APIs using AI?

OuijaGPT was born from this playful yet practical idea: combine nostalgia, humor, and cutting-edge AI to resurrect discontinued APIs through a spooky Ouija board interface.

What it does

OuijaGPT is a mystical web application that lets you communicate with "dead" APIs through an AI-powered Ouija board interface. Here's what makes it special:

  • Ouija Board Interface: Ask questions by typing or speaking, and watch the planchette glide across the board to spell out AI-generated responses in the voice of the deceased API
  • API Graveyard: Browse a cemetery of 8 dead APIs (Google+, Yahoo Answers, Vine, Windows Phone Store, Parse.com, and more) with detailed obituaries, death dates, and causes of death
  • AI-Powered Responses: GPT-4 channels the "personality" of each dead API to provide contextual, character-driven answers
  • Voice Input: Use the Web Speech API to speak your questions aloud for a truly immersive séance experience
  • Atmospheric Effects: Flickering candles, fog layers, eerie sound effects, and smooth animations create a haunting ambiance
  • Spirit Guide: An AI assistant recommends which dead API to summon based on your query

How we built it

We used Kiro extensively throughout development, leveraging its spec-driven development workflow:

Specification Phase:

  • Created formal requirements using EARS (Easy Approach to Requirements Syntax) patterns
  • Designed the system architecture with correctness properties for testing
  • Built an actionable task list with 20+ implementation steps

Tech Stack:

  • Frontend: React + TypeScript + Vite for a type-safe, fast UI
  • Backend: Node.js + Express + TypeScript for RESTful APIs
  • Database: Prisma + SQLite with 8 seeded dead APIs
  • AI: OpenAI GPT-4 for intelligent, character-driven responses
  • Audio: Web Audio API for atmospheric sound effects
  • Voice: Web Speech API for voice input

Kiro Integration:

  • Specs: Complete requirements, design, and task documents in .kiro/specs/
  • Hooks: Automated testing and environment checks in .kiro/hooks/
  • Steering: Project-specific guidelines in .kiro/steering/ for consistent code quality

Development Process:

  1. Defined user stories and acceptance criteria
  2. Created architectural design with component interfaces
  3. Implemented features incrementally following the task list
  4. Integrated OpenAI API with personality-driven prompts
  5. Built atmospheric UI with CSS animations and Web Audio API
  6. Added voice input for immersive interaction

Challenges we ran into

1. LLM Prompt Engineering: Getting GPT-4 to consistently respond "in character" as different dead APIs required careful prompt design. We had to include API personality traits, historical context, and tone guidelines in each prompt.

2. Planchette Animation: Creating smooth, natural-looking movement for the Ouija board planchette was tricky. We experimented with CSS transitions, transforms, and timing functions to achieve the right mystical feel.

3. Voice Input Reliability: The Web Speech API behaves differently across browsers. We had to implement fallbacks and clear visual feedback to ensure users knew when voice input was active.

4. Z-Index Layering: With fog effects, candles, overlays, and the Ouija board, managing z-index layers became complex. We had to carefully orchestrate which elements appeared on top while maintaining interactivity.

5. TypeScript Type Safety: Ensuring proper typing across the full stack required defining comprehensive interfaces for API responses, database models, and component props.

6. Atmospheric Balance: Finding the right balance between "spooky" and "usable" was an iterative process. Too much fog or too many effects made the UI hard to use; too little lost the mystical vibe.

Accomplishments that we're proud of

  • Spec-Driven Development: We followed a formal specification process with requirements, design, and tasks, demonstrating disciplined software engineering
  • Real AI Integration: We didn't fake it, GPT-4 actually powers the responses with unique personalities for each API
  • Polished UX: The animations, sound effects, voice input, and visual design create a genuinely immersive experience
  • Full-Stack TypeScript: Type safety throughout the entire application reduces bugs and improves maintainability
  • Kiro Showcase: Our .kiro directory demonstrates practical use of specs, hooks, and steering for AI-assisted development

What we learned

Technical Skills:

  • Advanced prompt engineering for character-driven AI responses
  • Web Audio API for procedural sound generation
  • Web Speech API integration with browser compatibility handling
  • CSS animation techniques for smooth, atmospheric effects
  • Prisma ORM for type-safe database operations

Development Process:

  • The value of formal specifications before coding
  • How Kiro's specs, hooks, and steering improve development velocity
  • Balancing creativity with usability in themed applications
  • The importance of incremental development and testing

AI Integration:

  • LLMs can convincingly roleplay as different entities with proper context
  • Prompt design is as important as the code itself
  • Real-time AI responses require careful error handling and user feedback

What's next for OuijaGPT

Short Term:

  • Add more dead APIs to the graveyard (Google Reader, Orkut, Clippy, etc.)
  • Implement collaborative séance sessions where multiple users can summon APIs together
  • Create ritual scripts—reusable query templates for common questions
  • Add a "Necromancy Lab" for experimenting with API resurrection techniques

Long Term:

  • Build a community-driven API graveyard where users can submit obituaries
  • Implement actual API emulation—not just Q&A, but functional endpoints
  • Create a browser extension that detects dead API calls and suggests alternatives
  • Develop a "Spirit Guide" that learns from user interactions to improve recommendations

Technical Improvements:

  • Add property-based testing for correctness properties defined in the spec
  • Implement caching for common queries to reduce API costs
  • Add streaming responses for longer AI-generated answers
  • Create a mobile-responsive version with touch-optimized Ouija board

OuijaGPT proves that even "dead" technology can live on through AI, creativity, and a little bit of digital necromancy. 🕯️👻

Built With

Share this project:

Updates