{"slug": "cyberdreams-ai-vibe-coding-a-strange-cyberpunk-world-with-sanity-gemini", "title": "CyberDreams AI - Vibe-Coding a Strange Cyberpunk World with Sanity + Gemini", "summary": "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.", "body_md": "[# 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)\n\nI built **CyberDreams AI**, a strange cyberpunk story generator powered by **Sanity, Next.js, and Google Gemini**.\n\nThe 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.\n\nCyberDreams AI combines five types of Sanity content:\n\nCharacters\n\nLocations\n\nTechnologies\n\nThreats\n\nEvents\n\nWhen 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.\n\nThe result is a different CyberDream every time.\n\nTry clicking **Generate CyberDream** several times and watch the story change.\n\nThe project is built with:\n\nNext.js\n\nReact\n\nTypeScript\n\nTailwind CSS\n\nSanity\n\nGoogle Gemini\n\nVercel\n\nI wanted to experiment with a simple question:\n\n**What happens when structured CMS content becomes fuel for generative AI?**\n\nI started by creating a Sanity project and designing a small content model around a cyberpunk universe.\n\nThe content model contains five document types:\n\nI then created example content such as **Maya Chen**, **Neo-Miami**, **Quantum Firewall**, **Rogue AI**, and **The Quantum Awakening**.\n\nNext, I connected the Sanity project to a Next.js application. The application retrieves the structured content and randomly selects one item from each category.\n\nI then integrated Google Gemini to transform those five structured elements into a short cyberpunk story.\n\nFinally, 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.\n\nThe interesting part of the build was seeing how a relatively small structured content model could produce many different creative combinations.\n\n**Sanity Project ID:** `ffi2ahke`\n\n**Dataset:** `production`\n\n`character`\n\n`location`\n\n`technology`\n\n`threat`\n\n`event`\n\nSanity is not just being used as a database in this project. Its structured content directly influences the AI-generated output.\n\nI wanted to make something that felt different from a traditional CMS demo.\n\nInstead of simply displaying structured content, CyberDreams AI turns that content into ingredients for an AI-generated world.\n\nA hacker, a futuristic technology, a dangerous AI, a mysterious location, and a strange event can be combined into a completely new story.\n\nThat unpredictability is the strange part.\n\nThe interface is designed as a futuristic cyberpunk control panel.\n\nIt displays:\n\nSystem status\n\nCyberDream generator\n\nAI transmission\n\nGenerated story\n\nSanity content model\n\nAvailable characters\n\nThe goal was to make the Sanity content visible and understandable while still giving the application an experimental feeling.\n\nThis 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.\n\nCyberDreams AI is a small experiment in combining **structured content and generative AI**.\n\nSanity provides the structured world.\n\nNext.js provides the application.\n\nGemini provides the imagination.\n\nTogether, they create a cyberpunk universe that can generate a new dream every time.\n\n---", "url": "https://wpnews.pro/news/cyberdreams-ai-vibe-coding-a-strange-cyberpunk-world-with-sanity-gemini", "canonical_source": "https://dev.to/vladimir_joseph_247918be4/cyberdreams-ai-vibe-coding-a-strange-cyberpunk-world-with-sanity-gemini-5b00", "published_at": "2026-09-19 15:05:58+00:00", "updated_at": "2026-09-19 15:23:45.147335+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "developer-tools", "ai-products", "structured-data"], "entities": ["CyberDreams AI", "Sanity", "Google Gemini", "Next.js", "React", "TypeScript", "Tailwind CSS", "Vercel"], "alternates": {"html": "https://wpnews.pro/news/cyberdreams-ai-vibe-coding-a-strange-cyberpunk-world-with-sanity-gemini", "markdown": "https://wpnews.pro/news/cyberdreams-ai-vibe-coding-a-strange-cyberpunk-world-with-sanity-gemini.md", "text": "https://wpnews.pro/news/cyberdreams-ai-vibe-coding-a-strange-cyberpunk-world-with-sanity-gemini.txt", "jsonld": "https://wpnews.pro/news/cyberdreams-ai-vibe-coding-a-strange-cyberpunk-world-with-sanity-gemini.jsonld"}}