CyberDreams AI - Vibe-Coding a Strange Cyberpunk World with Sanity + Gemini

A developer built CyberDreams AI, a cyberpunk story generator that combines structured Sanity CMS content with Google Gemini to produce short, unpredictable narratives. The app randomly selects one character, location, technology, threat, and event from Sanity and sends them to Gemini, which transforms the elements into a new story each time. The project was built with Next.js, React, TypeScript, Tailwind CSS, and deployed to Vercel.

CyberDreams AI - Vibe-Coding a Strange Cyberpunk World with Sanity + Gemini https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ft5a0bnh11w4cdmnng7os.jpg I built CyberDreams AI , a strange cyberpunk story generator powered by Sanity, Next.js, and Google Gemini . The idea is simple: instead of using Sanity only to store traditional website content, I use structured content as the building blocks of an unpredictable AI-generated universe. CyberDreams AI combines five types of Sanity content: Characters Locations Technologies Threats Events When the user clicks Generate CyberDream , the application randomly selects one element from each category and sends them to Google Gemini. Gemini transforms these structured elements into a short, mysterious cyberpunk story. The result is a different CyberDream every time. Try clicking Generate CyberDream several times and watch the story change. The project is built with: Next.js React TypeScript Tailwind CSS Sanity Google Gemini Vercel I wanted to experiment with a simple question: What happens when structured CMS content becomes fuel for generative AI? I started by creating a Sanity project and designing a small content model around a cyberpunk universe. The content model contains five document types: I then created example content such as Maya Chen , Neo-Miami , Quantum Firewall , Rogue AI , and The Quantum Awakening . Next, I connected the Sanity project to a Next.js application. The application retrieves the structured content and randomly selects one item from each category. I then integrated Google Gemini to transform those five structured elements into a short cyberpunk story. Finally, I created a neon cyberpunk interface, deployed the application to Vercel, connected the production Gemini API key through environment variables, and published the project on GitHub. The interesting part of the build was seeing how a relatively small structured content model could produce many different creative combinations. Sanity Project ID: ffi2ahke Dataset: production character location technology threat event Sanity is not just being used as a database in this project. Its structured content directly influences the AI-generated output. I wanted to make something that felt different from a traditional CMS demo. Instead of simply displaying structured content, CyberDreams AI turns that content into ingredients for an AI-generated world. A hacker, a futuristic technology, a dangerous AI, a mysterious location, and a strange event can be combined into a completely new story. That unpredictability is the strange part. The interface is designed as a futuristic cyberpunk control panel. It displays: System status CyberDream generator AI transmission Generated story Sanity content model Available characters The goal was to make the Sanity content visible and understandable while still giving the application an experimental feeling. This project was built interactively during development rather than from a separately published agent-session transcript, so I am not including a transcript that does not exist. CyberDreams AI is a small experiment in combining structured content and generative AI . Sanity provides the structured world. Next.js provides the application. Gemini provides the imagination. Together, they create a cyberpunk universe that can generate a new dream every time. ---