[V0_FILE]typescriptreact:file="lib/kv.ts" isMerged="true" import { kv } from "@vercel/kv" export interface PromptData { id: string prompt: string keywords: any createdAt: number openedInV0: boolean } export async function storePrompt(prompt: string, keywords: any): Promise { const id = `prompt:${Date.now()}:${Math.random().toString(36).substr(2, 9)}` const promptData: PromptData = { id, prompt, keywords, createdAt: Date.now(), openedInV0: false, } await kv.set(id, promptData) return id } export async function markPromptAsOpened(promptId: string): Promise { const promptData = await kv.get(promptId) if (promptData) { promptData.openedInV0 = true await kv.set(promptId, promptData) } } export async function getUnusedPrompts(): Promise { const keys = await kv.keys("prompt:*") const prompts: PromptData[] = [] for (const key of keys) { const promptData = await kv.get(key) if (promptData && !promptData.openedInV0) { prompts.push(promptData) } } return prompts } export function getRandomPrompt(prompts: PromptData[]): PromptData | null { if (prompts.length === 0) return null return prompts[Math.floor(Math.random() * prompts.length)] } [V0_FILE]typescriptreact:file="app/api/mark-opened/route.ts" isMerged="true" import { markPromptAsOpened } from "@/lib/kv" export async function POST(request: Request) { try { const { promptId } = await request.json() if (!promptId) { return Response.json({ error: "Prompt ID is required" }, { status: 400 }) } await markPromptAsOpened(promptId) return Response.json({ success: true }) } catch (error) { console.error("Error marking prompt as opened:", error) return Response.json({ error: "Failed to mark prompt as opened" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/generate-prompt/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { generateText } from "ai" import { xai } from "@ai-sdk/xai" import type { NextRequest } from "next/server" import { storePrompt, getUnusedPrompts, getRandomPrompt } from "@/lib/kv" export async function POST(request: NextRequest) { try { const startTime = Date.now() const { keywords } = await request.json() if (!keywords) { return new Response("Keywords are required", { status: 400 }) } const unusedPrompts = await getUnusedPrompts() if (unusedPrompts.length >= 100) { const randomPrompt = getRandomPrompt(unusedPrompts) if (randomPrompt) { const elapsed = Date.now() - startTime const remainingDelay = Math.max(0, 5000 - elapsed) if (remainingDelay > 0) { await new Promise((resolve) => setTimeout(resolve, remainingDelay)) } return Response.json({ prompt: randomPrompt.prompt, promptId: randomPrompt.id, isRecycled: true, }) } } const result = await generateText({ model: xai("grok-3-mini-fast"), prompt: `Create a compelling project prompt using these randomly selected keywords: User Role: ${keywords.userRole} Industry: ${keywords.industry} Palette: ${keywords.palette} Typography: ${keywords.typography} Layout Vibe: ${keywords.layoutVibe} Texture: ${keywords.texture} Motion: ${keywords.motion} Job to be Done: ${keywords.job} Object: ${keywords.object} Generate a creative, specific project prompt that combines these elements into a cohesive app or website idea. The prompt should be actionable and inspiring, describing what to build, for whom, and what problem it solves. Keep it concise but detailed enough to spark creativity. Do not prescribe a tech stack or hosting strategy."`, system: "You are a creative project prompt generator. Create inspiring, specific, and actionable prompts for building apps or websites. Focus on solving real problems with compelling design aesthetics.", }) const promptId = await storePrompt(result.text, keywords) const elapsed = Date.now() - startTime const remainingDelay = Math.max(0, 5000 - elapsed) if (remainingDelay > 0) { await new Promise((resolve) => setTimeout(resolve, remainingDelay)) } return Response.json({ prompt: result.text, promptId, isRecycled: false, }) } catch (error) { console.error("Error generating prompt:", error) return new Response("Failed to generate prompt", { status: 500 }) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useMemo, useCallback } from "react" import { Sparkles } from "lucide-react" import { createEditor, type Descendant } from "slate" import { Slate, Editable, withReact } from "slate-react" import { motion as framerMotion, AnimatePresence } from "framer-motion" const userRoles = [ "solo founder", "co-founder", "startup CEO", "bootstrapped founder", "product manager", "CTO", "COO", "freelancer", "side-hustler", "content marketer", "growth hacker", "sales rep", "account manager", "copywriter", "brand strategist", "SEO specialist", "ads buyer", "ops manager", "project manager", "supply chain coordinator", "hr generalist", "talent recruiter", "virtual assistant", "data entry clerk", "restaurant owner", "cafe manager", "bar owner", "caterer", "fitness coach", "personal trainer", "yoga instructor", "nutritionist", "therapist", "life coach", "career counselor", "teacher", "tutor", "lecturer", "mechanic", "electrician", "plumber", "landscaper", "contractor", "indie game dev", "AAA game dev", "photographer", "videographer", "graphic designer", "illustrator", "animator", "musician", "podcaster", "writer", "blogger", "influencer", "social media manager", "estate agent", "property manager", "logistics coordinator", "driver", "healthcare worker", "nurse", "doctor", "scientist", "researcher", ] const industries = [ "hospitality", "travel", "tourism", "education", "fitness", "mental health", "real estate", "logistics", "food delivery", "events", "ecommerce", "construction", "nonprofit", "creator economy", "automotive", "manufacturing", "retail", "finance", "legal", "technology", "gaming", "entertainment", "media", "publishing", "agriculture", "healthcare", "biotech", "energy", "government", ] const palettes = [ "warm earth", "cool gray", "neon", "pastel", "monochrome", "solarized", "high-contrast", "muted desert", "primary brights", "moody dark", "tropical", "retro 80s", "retro 90s", "cyberpunk", "steampunk", "vaporwave", "minimal white", "deep jewel tones", ] const typography = [ "humanist sans", "grotesk", "slab serif", "mono", "display serif", "geometric sans", "handwritten", "script", "blackletter", "stencil", "condensed sans", "wide sans", ] const layoutVibes = [ "brutalist", "swiss grid", "glassmorphic", "neumorphic", "card-based", "magazine", "terminal UI", "infinite canvas", "split screen", "asymmetrical grid", "masonry", "full-bleed hero", "minimal single-column", "multi-panel dashboard", ] const textures = [ "paper grain", "noise", "chrome", "watercolor", "pixel", "fabric weave", "concrete", "marble", "wood grain", "brushed metal", "smoke", "ink bleed", "embossed leather", ] const promptMotion = [ "snappy microinteractions", "gentle easing", "no motion", "springy cards", "scroll-linked reveals", "parallax", "infinite marquee", "3D tilt", "magnetic cursor", ] const jobs = [ "collect", "organize", "search", "summarize", "translate", "schedule", "forecast", "compare", "deduplicate", "match", "route", "audit", "notify", "approve", "invoice", "filter", "tag", "prioritize", "archive", "sync", "backup", "visualize", "automate", "remind", "share", "annotate", "validate", "track", "plan", "budget", ] const objects = [ "leads", "invoices", "contracts", "content ideas", "product photos", "shipments", "appointments", "recipes", "plant care tasks", "bug reports", "meeting notes", "job applicants", "tickets", "subscriptions", "inventory items", "assets", "social posts", "ad campaigns", "proposals", "surveys", "checklists", "timesheets", "training materials", "policies", "blueprints", ] function getRandomItem(array: T[]): T { return array[Math.floor(Math.random() * array.length)] } function parseMarkdownToSlate(markdown: string): Descendant[] { const lines = markdown.split("\n") const nodes: Descendant[] = [] for (let i = 0; i < lines.length; i++) { const line = lines[i].trim() if (!line) { // Empty line creates a paragraph break nodes.push({ type: "paragraph", children: [{ text: "" }], }) continue } // Parse headings if (line.startsWith("### ")) { nodes.push({ type: "heading-three", children: parseInlineMarkdown(line.slice(4)), }) } else if (line.startsWith("## ")) { nodes.push({ type: "heading-two", children: parseInlineMarkdown(line.slice(3)), }) } else if (line.startsWith("# ")) { nodes.push({ type: "heading-one", children: parseInlineMarkdown(line.slice(2)), }) } // Parse bulleted lists else if (line.startsWith("- ") || line.startsWith("* ")) { // Check if we need to start a new list or continue existing one const lastNode = nodes[nodes.length - 1] const listItem = { type: "list-item", children: parseInlineMarkdown(line.slice(2)), } if (lastNode && lastNode.type === "bulleted-list") { lastNode.children.push(listItem) } else { nodes.push({ type: "bulleted-list", children: [listItem], }) } } // Parse numbered lists else if (/^\d+\.\s/.test(line)) { const match = line.match(/^\d+\.\s(.*)/) if (match) { const lastNode = nodes[nodes.length - 1] const listItem = { type: "list-item", children: parseInlineMarkdown(match[1]), } if (lastNode && lastNode.type === "numbered-list") { lastNode.children.push(listItem) } else { nodes.push({ type: "numbered-list", children: [listItem], }) } } } // Regular paragraph else { nodes.push({ type: "paragraph", children: parseInlineMarkdown(line), }) } } return nodes.length > 0 ? nodes : [{ type: "paragraph", children: [{ text: "" }] }] } function parseInlineMarkdown(text: string): any[] { const children: any[] = [] let currentText = "" let i = 0 while (i < text.length) { if (text.slice(i, i + 2) === "**") { // Bold text if (currentText) { children.push({ text: currentText }) currentText = "" } const endIndex = text.indexOf("**", i + 2) if (endIndex !== -1) { children.push({ text: text.slice(i + 2, endIndex), bold: true }) i = endIndex + 2 } else { currentText += text[i] i++ } } else if (text[i] === "*" && text[i + 1] !== "*") { // Italic text if (currentText) { children.push({ text: currentText }) currentText = "" } const endIndex = text.indexOf("*", i + 1) if (endIndex !== -1) { children.push({ text: text.slice(i + 1, endIndex), italic: true }) i = endIndex + 1 } else { currentText += text[i] i++ } } else if (text[i] === "`") { // Code text if (currentText) { children.push({ text: currentText }) currentText = "" } const endIndex = text.indexOf("`", i + 1) if (endIndex !== -1) { children.push({ text: text.slice(i + 1, endIndex), code: true }) i = endIndex + 1 } else { currentText += text[i] i++ } } else { currentText += text[i] i++ } } if (currentText) { children.push({ text: currentText }) } return children.length > 0 ? children : [{ text: "" }] } export default function StumblePrompt() { const [value, setValue] = useState([ { type: "paragraph", children: [{ text: "" }], }, ]) const [hasGenerated, setHasGenerated] = useState(false) const [isLoading, setIsLoading] = useState(false) const [stumbleCount, setStumbleCount] = useState(0) const [currentPromptId, setCurrentPromptId] = useState(null) const editor = useMemo(() => withReact(createEditor()), []) const renderElement = useCallback((props: any) => { switch (props.element.type) { case "paragraph": return

{props.children}

case "heading-one": return (

{props.children}

) case "heading-two": return (

{props.children}

) case "heading-three": return (

{props.children}

) case "bulleted-list": return (

{props.children} ) case "numbered-list": return (

{props.children} ) case "list-item": return

{props.children}

default: return

{props.children}

} }, []) const renderLeaf = useCallback((props: any) => { let { attributes, children, leaf } = props if (leaf.bold) { children = {children} } if (leaf.italic) { children = {children} } if (leaf.code) { children = {children} } return {children} }, []) const getPromptText = () => { return value .map((node) => node.children?.map((child: any) => child.text).join("") || "") .join("\n") .trim() } const generatePrompt = async () => { setIsLoading(true) setStumbleCount((prev) => prev + 1) setHasGenerated(false) setCurrentPromptId(null) setValue([ { type: "paragraph", children: [{ text: "" }], }, ]) try { const keywords = { userRole: getRandomItem(userRoles), industry: getRandomItem(industries), palette: getRandomItem(palettes), typography: getRandomItem(typography), layoutVibe: getRandomItem(layoutVibes), texture: getRandomItem(textures), motion: getRandomItem(promptMotion), job: getRandomItem(jobs), object: getRandomItem(objects), } const response = await fetch("/api/generate-prompt", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ keywords }), }) if (!response.ok) { throw new Error("Failed to generate prompt") } const data = await response.json() const parsedNodes = parseMarkdownToSlate(data.prompt) setValue(parsedNodes) setCurrentPromptId(data.promptId) setHasGenerated(true) } catch (error) { console.error("Error generating prompt:", error) setValue([ { type: "paragraph", children: [{ text: "Error generating prompt. Please try again." }], }, ]) setHasGenerated(true) } finally { setIsLoading(false) } } const handleOpenInV0 = async () => { if (currentPromptId) { try { await fetch("/api/mark-opened", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ promptId: currentPromptId }), }) } catch (error) { console.error("Error marking prompt as opened:", error) } } } return (

{isLoading ? ( Generating... ) : hasGenerated ? ( stumble-again ) : ( Stumble-a-prompt )}

{hasGenerated && ( {getPromptText() && (

)} )}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { GeistSans } from "geist/font/sans" import { GeistMono } from "geist/font/mono" import "./globals.css" export const metadata: Metadata = { title: "Stumble-a-prompt - Random Project Idea Generator for v0", description: "Generate random project prompts by combining keywords from multiple categories. Perfect for sparking creativity and finding your next coding project.", generator: "v0.app", keywords: ["project ideas", "prompt generator", "coding projects", "creative inspiration", "random generator"], authors: [{ name: "Jacob Paris", url: "https://x.com/jacobmparis" }], creator: "Jacob Paris", openGraph: { title: "Stumble-a-prompt", description: "Generate random project prompts for your next coding adventure", type: "website", }, twitter: { card: "summary", title: "Stumble-a-prompt", description: "Generate random project prompts for your next coding adventure", creator: "@jacobmparis", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) }

About

Tags

Share

About

Tags

Share

More from jacobparis

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jacobparis

More Templates Like This