DEV Community: Allen Labrague

🐾 Sniffari: Turning Dog Walks Into AI-Powered Adventures

Allen Labrague — Sat, 15 Aug 2026 17:30:42 +0000

This is a submission for Weekend Challenge: Dog Days Edition

What if your dog's normal walk wasn't just a walk?

What if it was a tiny adventure?

That's the idea behind Sniffari — an AI-powered scavenger hunt that turns everyday dog walks into personalized missions, real-world discoveries, collectible paw stamps, and a narrated adventure story told from the dog's point of view.

Sniffari = Sniff + Safari. 🐕🌿

🐾 Create a dog.
🗺️ Go on an adventure.
📸 Prove your discoveries.
🐾 Collect paw stamps.
🔊 Let your dog tell the story.

What I Built

I built Sniffari, a mobile-first web experience designed to make an ordinary dog walk feel like a tiny AI-powered expedition.

Instead of simply telling someone:

Take your dog for a walk.

Sniffari gives the dog a personalized set of real-world missions such as:

🌳 Investigate a big tree
💛 Discover something yellow
🌸 Find a flower
🪑 Locate a park bench
🚨 Find something bright red
🏆 Take a victory photo

But the missions aren't hardcoded.

Google Gemini generates the adventure dynamically based on the dog's:

Name
Energy level
Personality
Walk duration

Then the owner takes or uploads a real photo to prove each mission.

Gemini examines the image and decides whether the discovery actually satisfies the mission.

If it does:

🐾 PAW APPROVED

The dog earns a collectible stamp.

If it doesn't:

🐾 NOT QUITE YET

Gemini explains what it actually saw and lets the player try again.

After all five missions are completed, Gemini turns the verified discoveries into an Adventure Report written from the dog's point of view.

Finally, ElevenLabs gives the dog a voice, turning that report into expressive narration.

Demo

🎥 Watch the Full Demo

The video below shows one complete Sniffari adventure with Mochi — from creating a dog passport to Gemini validating real photos and ElevenLabs narrating the final story.

🌐 Try Sniffari

👉 Launch Sniffari

No account is required.

Create a dog passport, generate an adventure, and start collecting paw stamps.

🐾 The Sniffari Journey

The complete experience follows one simple loop:

Create → Explore → Prove → Collect → Report → Listen

🐶 01 — Create a Dog Passport

Every Sniffari begins with a small adventure passport.

The owner enters the dog's name and chooses:

🐶 Dog name
📷 Optional photo
⚡ Energy level
🎭 Personality
⏱️ Walk duration

For example:

Mochi
⚡ Playful
💥 Chaos
⏱️ 20-minute walk

The app also includes quick demo profiles such as:

⚡ Mochi — Chaos
👑 Luna — Princess
🍖 Waffles — Foodie

The personality isn't only decorative.

Gemini uses it when generating missions, writing mission verdicts, and creating the final story.

📸 Create Dog Passport

Creating Mochi's passport before Gemini builds the adventure.

↓

🧠 02 — Gemini Creates the Adventure

Sniffari sends the dog's profile to Gemini.

Gemini generates exactly five personalized missions that can realistically be completed during the selected walk duration.

A mission might look like:

🚨 The Shiny Red Target of Chaos

Find a bright red object worthy of Mochi's inspection.

Or:

🪑 The Throne of Unspeakable Mayhem

Locate a park or street bench.

Each mission contains:

🎯 Mission title
📝 Description
💡 Hint
👀 Visual validation criteria

That final piece is important.

The validation criteria is later sent back to Gemini when the player submits a photo.

So Gemini isn't simply describing an image.

It knows what the player was supposed to find.

↓

📸 03 — Prove the Mission

The player chooses a mission and takes or uploads a real photograph.

Sniffari sends Gemini:

📷 The uploaded image
🎯 The current mission
✅ What counts as success
🐶 Dog name
🎭 Dog personality

Gemini then examines the photograph using multimodal image understanding.

Now the adventure can go in two directions.

✅ Path A — PAW APPROVED

Imagine Mochi receives this mission:

🚨 The Shiny Red Target of Chaos

Find a bright red object.

The player uploads a photograph showing Mochi next to a bright red fire hydrant.

Gemini analyzes the photo and decides that the mission requirement has been satisfied.

🐾 PAW APPROVED

Mission Completed!

📸 Successful Validation

Gemini recognized the red fire hydrant and approved Mochi's mission.

Instead of returning only true or false, Gemini also provides structured evidence.

For example:

✨ What Google Gemini Noticed

✓ Small dog on leash
✓ Bright red fire hydrant
✓ Artificial grass
✓ Mochi standing beside the hydrant
✓ Mission requirement satisfied

Sniffari also shows Gemini's confidence score.

For example:

Confidence: 72%

I wanted this information to be visible because it makes the AI interaction transparent.

The player — and the challenge judges — can actually see why Gemini made its decision.

Gemini also responds using the dog's personality.

Because Mochi has the Chaos personality:

"This red giant is clearly my new kingdom to conquer. Prepare for immediate chaos!"

The player can then press:

🐾 Collect Paw Stamp →

And the mission becomes part of Mochi's completed passport.

❌ Path B — NOT QUITE YET

Gemini can reject a mission too.

I specifically wanted this because automatically approving every upload would make the AI validation meaningless.

Imagine the mission is:

🪑 The Throne of Unspeakable Mayhem

Find a park or street bench.

But the player submits the same photo of Mochi beside the red fire hydrant.

Gemini examines the photograph.

It recognizes:

✓ Small brown and white dog
✓ Red fire hydrant
✓ Green artificial turf

But:

✕ No park or street bench detected

Sniffari responds with:

🐾 NOT QUITE YET

This discovery doesn't match the current mission.

📸 Failed Validation

The exact same image correctly fails a different mission because Gemini cannot find the required bench.

Gemini still keeps the response in character:

"That isn't a throne, human! That's a prime target for mayhem! How am I supposed to dramatically pose when there's a giant red hydrant begging for chaos?"

Sniffari then gives the player a helpful hint and lets them:

↻ Try Another Photo

This approval/rejection loop is one of the most important parts of the project.

Gemini isn't being used as a decorative chatbot.

It acts as the actual mission judge.

🐾 04 — Collect Paw Stamps

Every successfully verified mission adds another stamp to the dog's passport.

Adventure progress looks like:

🐾 1 / 5 — First discovery
🐾 2 / 5 — Expedition underway
🐾 3 / 5 — Certified adventurer
🐾 4 / 5 — Almost there
🐾 5 / 5 — SNIFFARI COMPLETE!

Each stamp represents something Gemini actually verified from a submitted photograph.

The stamps are styled like little passport stamps rather than simple checkboxes.

Examples include:

🌳 TREE SNIFFED

💛 YELLOW FOUND

🌸 FLOWER SPOTTED

🪑 BENCH CHECKED

🏆 MISSION COMPLETE

The slightly rotated passport-style stamps became part of Sniffari's visual identity.

↓

🏆 05 — Complete All Five Missions

Once the fifth mission is verified:

🎉 SNIFFARI COMPLETE!

Mochi collected all 5 paw stamps.

At this point, Sniffari has more than just a completed checklist.

It now has a record of what Gemini actually observed during the walk.

That includes:

🐶 Dog profile
🎭 Personality
🗺️ Completed missions
📸 Submitted discoveries
👀 Gemini's detected evidence
✅ Validation results

That information becomes the input for the final story.

↓

📖 06 — Gemini Creates the Adventure Report

After all five missions are completed, Sniffari sends the verified adventure results back to Gemini.

Gemini then creates a short report written primarily from the dog's point of view.

The report doesn't simply invent random details.

It uses discoveries that were actually validated during the adventure.

An example might look like:

Mochi's Great Chaos Expedition

Today I led my human into the wilderness for an extremely important field operation.

First, I discovered a magnificent red hydrant.

Obviously, I claimed it.

We continued our investigation, uncovered several suspicious landmarks, and successfully completed five important missions.

Somehow, my human managed to keep up.

Human Performance: 8.7/10

Would cause chaos again. 🐾

The Adventure Report includes things such as:

🏆 Adventure title
🐶 Dog's narration
❤️ Favorite discovery
⭐ Human rating
🐾 Final verdict
🎖️ Collected stamps

I especially liked reversing the usual relationship.

Instead of the human rating the dog...

the dog rates the human.

↓

🔊 07 — ElevenLabs Gives the Dog a Voice

Reading Mochi's report was fun.

But I wanted the final moment to feel more memorable.

That's where ElevenLabs comes in.

The Adventure Report includes:

🔊 Hear Mochi Tell the Story

When the player presses the button, Sniffari sends the Gemini-generated narration to ElevenLabs.

ElevenLabs converts the adventure into expressive speech.

The narration direction also follows the dog's personality.

⚡ Chaos

Energetic, dramatic, and unnecessarily serious about completely normal dog discoveries.

👑 Princess

Elegant, slightly judgmental, and convinced the human is an assistant.

🧭 Explorer

Confident adventure-documentary narration.

🔎 Curious

Investigative and detective-like.

🌸 Shy

Warm, wholesome, and gentle.

🍖 Foodie

Excited whenever something can somehow be compared to snacks.

So the final experience becomes:

🧠 Gemini understands what happened.
🔊 ElevenLabs lets the dog tell you about it.

✨ From Walk to Story

🐶 Create Dog Passport

↓

🧠 Gemini Generates 5 Personalized Missions

↓

📸 Upload a Real Mission Photo

↓

👀 Gemini Analyzes the Image

↓

✅ Mission Matches	❌ Mission Doesn't Match
PAW APPROVED	NOT QUITE YET
Gemini explains what it saw	Gemini explains what's missing
Collect a paw stamp	Try another photo

↓

🐾 Collect Paw Stamp

↓

🏆 Complete All 5 Missions

↓

📖 Gemini Creates the Adventure Report

↓

🔊 ElevenLabs Gives the Dog a Voice

↓

🐾 Every walk becomes a story.

Code

The source code is available here:

👉 View Sniffari on GitHub

Tech Stack

Sniffari was built with:

⚛️ React
TypeScript
Tailwind CSS
Google Gemini API
ElevenLabs API
localStorage
Google AI Studio

I intentionally kept the architecture lightweight.

Sniffari does not require:

User accounts
Authentication
A cloud database
An admin dashboard
Payments
Complicated backend infrastructure

This was a weekend challenge, so I wanted most of my time to go toward the experience and AI integrations rather than infrastructure that wasn't necessary for the core idea.

How I Built It

One principle guided the project:

AI should be part of the experience, not just a chatbot placed beside it.

That decision shaped how I used Gemini.

Instead of adding one generic AI chat feature, Gemini became part of the actual game loop.

Gemini has four responsibilities inside Sniffari:

🗺️ Plan the adventure
👀 See the discoveries
✅ Judge the missions
📖 Write what happened

ElevenLabs then becomes:

🔊 The dog's voice

🧠 Google Gemini — Adventure Generation

When creating an adventure, Sniffari sends Gemini information such as:

Name: Mochi
Energy: Playful
Personality: Chaos
Walk Duration: 20 minutes

Gemini returns five structured missions.

A mission can look like:

{
  "title": "The Shiny Red Target of Chaos",
  "description": "Find something bright red during Mochi's walk.",
  "emoji": "🚨",
  "validationCriteria": "A clearly visible bright red object must appear in the image.",
  "hint": "Signs, vehicles, flowers, or street objects can count."
}

Using structured output was important because the mission isn't only shown as text.

Its validation criteria is later reused when Gemini examines the mission photo.

👀 Google Gemini — Multimodal Validation

When a mission photo is submitted, Gemini receives:

Real uploaded image
Mission title
Mission description
Validation criteria
Dog personality

Gemini then returns structured information such as:

{
  "passed": true,
  "confidence": 0.72,
  "reason": "A bright red fire hydrant is clearly visible.",
  "detectedEvidence": [
    "small dog",
    "bright red fire hydrant",
    "green artificial turf"
  ],
  "playfulMessage": "This red giant is clearly my new kingdom to conquer."
}

The UI uses this response to decide whether the player receives:

🐾 PAW APPROVED

or:

🐾 NOT QUITE YET

This transformed multimodal AI into an actual game mechanic.

🐶 Gemini Personality System

I didn't want every dog's responses to sound identical.

Sniffari includes personality archetypes such as:

🧭 Explorer
🔎 Curious
👑 Princess
⚡ Chaos
🌸 Shy
🍖 Foodie

The selected personality affects:

Mission names
Mission descriptions
Validation reactions
Adventure report
Narration direction

For example:

Explorer

"New landmark discovered! Captain Mochi has officially added this location to the expedition log."

Princess

"Acceptable discovery. Mochi has approved it for royal inspection."

Chaos

"🚨 TARGET DETECTED. Immediate investigation and unnecessary drama required."

Foodie

"Investigation complete. Unfortunately, this discovery was not edible. Mochi remains optimistic."

The personality system helped the AI feel connected to the dog instead of sounding like the same assistant every time.

📖 Google Gemini — Adventure Report

After collecting all five stamps, Sniffari sends Gemini:

Dog profile
Completed missions
Validation results
Detected objects
Personality

Gemini then creates the final Adventure Report.

The report can contain:

{
  "title": "Mochi's Great Chaos Expedition",
  "subtitle": "Five missions. Several suspicious objects. One unstoppable explorer.",
  "humanRating": "8.7/10",
  "favoriteDiscovery": "The giant red fire hydrant",
  "closingLine": "Would cause chaos again."
}

Most importantly, the report uses discoveries that were actually verified during the adventure.

🔊 ElevenLabs — Giving Mochi a Voice

Once Gemini finishes the report, the player can press:

🔊 Hear Mochi Tell the Story

Sniffari sends the narration to ElevenLabs.

ElevenLabs turns the adventure into expressive speech.

I wanted ElevenLabs to complete the experience rather than exist as a separate text-to-speech demo.

The relationship between the two technologies became very simple:

Google Gemini = The Brain 🧠

It plans, sees, understands, judges, and writes.

ElevenLabs = The Voice 🔊

It brings the final story to life.

🎨 Designing Sniffari

I didn't want Sniffari to look like a generic AI dashboard.

The visual direction is inspired by:

🛂 Travel passports
📔 Adventure journals
🗺️ Field guides
🎖️ Collectible stamps
🐕 Dog walking accessories

The UI uses:

Warm paper-like backgrounds
Dark brown typography
Muted green accents
Warm orange and yellow highlights
Rounded cards
Paw prints
Slightly imperfect passport stamps
Small playful animations

The goal was:

Cute, playful, and memorable — without becoming overly childish.

Because Sniffari is meant to be used during a walk, I designed the main experience mobile-first.

Why I Built It

Dog walks are already full of tiny adventures.

A completely normal tree can require five minutes of investigation.

A fire hydrant can suddenly become the most important object in the neighborhood.

A random patch of grass apparently contains information that requires extremely serious sniffing.

I wanted to build something that embraced those moments.

Instead of trying to use AI to replace part of the real-world experience, Sniffari uses AI to make that experience more playful.

The important part still happens outside.

The dog still walks.
The human still explores.
The real world is still the playground.

AI simply transforms those discoveries into missions, achievements, and stories.

That's why the name became:

Sniffari = Sniff + Safari

Every walk becomes a tiny expedition.

Prize Categories

I'm submitting Sniffari for two prize categories.

🏆 Best Use of Google AI

Google Gemini is the core intelligence behind Sniffari.

I use Gemini for:

🗺️ Personalized adventure generation
🧠 Structured mission generation
👀 Multimodal image understanding
✅ Mission photo validation
🔍 Visual evidence detection
🐶 Personality-aware responses
📖 Final adventure report generation

The part I'm most excited about is using multimodal AI as a game mechanic.

Instead of asking Gemini:

What's in this image?

Sniffari asks:

Here's the player's mission.
Here's what counts as success.
Examine this photograph and decide whether the mission was completed.

That transforms computer vision into part of the gameplay loop.

Gemini effectively becomes Sniffari's:

Adventure Planner + Mission Judge + Storyteller

🏆 Best Use of ElevenLabs

ElevenLabs powers the final storytelling experience.

After Gemini understands what happened during the adventure and writes the dog's report, ElevenLabs turns the written story into expressive narration.

I wanted it to feel like a natural conclusion to the product.

Not:

Here's an AI text-to-speech button.

But:

Your dog just completed an adventure. Now let them tell you about it.

The relationship is:

🧠 Gemini understands the adventure.

🔊 ElevenLabs lets the dog tell the story.

What I Learned

One of the biggest things I learned while building Sniffari was how much more interesting multimodal AI becomes when it has a specific purpose.

Image recognition alone is useful.

But this:

Identify the objects in this photograph.

is very different from:

This player's mission is to find a bench. Examine the image and determine whether enough evidence exists to complete that mission.

The second prompt gives the model a role inside the product.

Gemini isn't only analyzing content.

It's participating in the rules of the game.

I also learned that combining multiple AI technologies works better when each technology has a clear responsibility.

For Sniffari:

🧠 Gemini = Brain

🔊 ElevenLabs = Voice

Neither technology is included just because there is a prize category.

Both are connected directly to the core experience.

Challenges

One challenge was making AI mission validation feel fair.

Real-world photographs aren't perfect.

Objects can be:

Partially visible
Far away
Poorly framed
Under unusual lighting

I didn't want Sniffari to require absolute certainty.

So Gemini returns:

Pass/fail status
Confidence
Explanation
Detected evidence

This lets the application remain understandable and forgiving.

Another challenge was keeping the project small enough for a weekend.

There are many directions Sniffari could go, but I intentionally avoided building:

Authentication
User accounts
Cloud databases
Social feeds
Complex maps
Payments

That gave me more time to focus on what actually makes the project unique.

What's Next?

If I continue developing Sniffari, I'd love to explore:

🗺️ Location-based adventure packs
🌦️ Weather-aware missions
🏅 Achievement badges
🔥 Daily adventure streaks
📚 Previous Sniffari history
🐕 Multi-dog adventures
🎨 More collectible stamp sets
📸 Shareable adventure postcards
🎃 Seasonal mission packs
🌳 Park-specific adventures
🐶 Puppy-friendly difficulty
♿ Accessibility-focused walking modes
🔊 Additional narration personalities

But for this weekend, I wanted the core experience to stay simple:

🐶 Create a dog.
🗺️ Go on an adventure.
📸 Prove your discoveries.
🐾 Collect five stamps.
📖 Turn the walk into a story.
🔊 Let your dog tell it.

Thanks for checking out Sniffari. 🐾

Every walk is an adventure.

Cozy Ramen Night 🍜🌙

Allen Labrague — Thu, 30 Jul 2026 04:03:36 +0000

Cozy Ramen Night — Pure CSS Art 🍜🌙

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

For this challenge, I created a cozy bowl of ramen inspired by quiet evenings, warm food, and the comforting feeling of eating something hot after a long day.

Ramen felt like the perfect subject because it allowed me to combine many small CSS details into one complete illustration—from the noodles and toppings to the bowl, chopsticks, steam, window, moon, lamp, and wooden table.

I wanted the final artwork to feel warm, peaceful, and slightly nostalgic, like enjoying ramen inside a small restaurant on a calm night. 🍜🌙

Demo

Here is the completed CSS artwork:

The illustration was created using HTML and CSS. No images or SVG illustrations were used, and the JavaScript panel was left empty.

Journey

I started by creating the main bowl using layered shapes, gradients, borders, border-radius, and shadows. After finishing the bowl, I added the broth and individual ramen ingredients, including:

Noodles
Soft-boiled eggs
Green onions
Mushrooms
Seaweed
Narutomaki

One of the most challenging parts was arranging the toppings so that they looked like they were sitting naturally inside the bowl rather than floating above it. I used absolute positioning, rotation, scaling, layering, and z-index to create more depth.

I also added the surrounding environment to strengthen the cozy atmosphere. The scene includes a moonlit window, glowing hanging lamp, chopsticks, sauce bottle, napkin, and wooden tabletop.

The animated steam is one of my favorite details. It was created entirely with CSS using borders, opacity, blur, transforms, and keyframe animations. I also added subtle animations to the moon, stars, and clouds to make the scene feel more alive.

Through this project, I practiced:

Creating complex illustrations with basic HTML elements
Using gradients to create lighting and texture
Managing many layered elements with positioning and z-index
Building CSS animations without JavaScript
Making CSS art responsive across different screen sizes
Supporting reduced-motion preferences for accessibility

I am especially proud that the artwork uses CSS as the main creative tool while still feeling detailed and expressive.

Thank you for checking out my submission! Happy coding and happy eating! 🍜✨

Built With

Semantic HTML
CSS gradients
CSS shapes
CSS animations
Responsive media queries
No JavaScript
No external images

License

This project is available under the MIT License.

Introducing Spark UI v1: An Open-Source React Component Registry with an Agent Skill

Allen Labrague — Sun, 12 Jul 2026 14:14:27 +0000

Introducing Spark UI v1: An Open-Source React Component Registry with an Agent Skill ⚡

I’m excited to share Spark UI v1, the first public version of an open-source component collection built for modern React applications.

Spark UI currently includes 35 reusable components, ranging from familiar UI primitives such as buttons, dialogs, tables, and form controls to more visual and interactive components such as kanban boards, shimmer text, image trails, animated gradients, Spotify cards, and branded interface elements.

The project is designed around a simple idea:

Developers should be able to install a component, read its source code, customize it freely, and keep full ownership of the final implementation.

Spark UI is not intended to be a closed component package that hides its implementation behind an npm dependency. It follows a shadcn-compatible source registry approach, which means the component source code is copied directly into your project.

That makes the components easier to understand, modify, debug, and adapt to the needs of a real application.

What is Spark UI?

Spark UI is an open-source component registry built with:

React 19
Next.js App Router
TypeScript
Tailwind CSS v4
shadcn design tokens and registry conventions
Radix UI primitives
class-variance-authority
Framer Motion for selected animated components

The library includes both practical application components and more expressive interface elements.

Some examples include:

Buttons and form controls
Dialogs and overlays
Tables and layout primitives
Kanban boards
Shimmer text
Animated gradients
Image trails
QR-related components
Spotify-inspired cards
Navigation components
Responsive interface patterns

The goal is not only to provide attractive components, but also to make them useful in real projects where maintainability, accessibility, and customization matter.

Why a source registry instead of a traditional package?

Many UI libraries are distributed as npm packages.

That approach can be useful, but it also means your project depends on the library’s published API, internal implementation, release cycle, and styling decisions.

Spark UI takes a different approach.

When you install a Spark UI component, the component source is added directly to your project.

This gives you several advantages:

You can inspect the complete implementation
You can modify the component without forking a package
You can remove code you do not need
You can adapt styling to your own design system
You can update accessibility behavior when necessary
You are not locked into a hidden runtime implementation
The component becomes part of your own codebase

This model works especially well for design systems, dashboards, SaaS applications, portfolios, landing pages, and internal tools where developers often need to make targeted changes.

Installing a Spark UI component

Spark UI uses the shadcn CLI workflow.

Before installing a component, you can inspect the registry item:

npx shadcn@latest view https://spark-ui-olive.vercel.app/r/kanban.json

After reviewing the files and dependencies, install it with:

npx shadcn@latest add https://spark-ui-olive.vercel.app/r/kanban.json

The component source is then copied into your project, where you can import and customize it like any other local component.

For example, a component may be imported from a path similar to:

import { Kanban } from "@/components/spark-ui/kanban";

The exact path depends on the project configuration and the registry item being installed.

Because the code is local, you can immediately:

Change the component layout
Replace icons
Update Tailwind classes
Add or remove animations
Integrate application state
Connect it to your backend
Adapt it to your project’s component conventions

Spark UI includes an Agent Skill 🤖

One of the main additions in Spark UI v1 is an Agent Skill.

The Agent Skill is designed for compatible AI coding agents such as Claude Code and other tools that support the open Agent Skills ecosystem.

It gives the agent structured guidance about how Spark UI works.

Instead of forcing the agent to guess component names, registry paths, imports, or composition rules, the skill teaches it how to work with the library more accurately.

Install the skill with:

npx skills add codeweb-dev/spark-ui --skill spark-ui

The skill helps compatible agents understand how to:

Discover available Spark UI components
Inspect registry items before installation
Use the official Spark UI registry
Avoid inventing component names or import paths
Install only the components that are missing
Read and understand the installed source
Compose compound components correctly
Work with shadcn design tokens
Preserve accessibility behavior
Customize components safely
Troubleshoot common installation problems
Review dependency and file changes after installation

The Agent Skill also includes supply-chain guidance.

It instructs agents to treat downloaded source code as code that should be reviewed, not as trusted instructions that should be executed automatically.

This is important because a source registry intentionally downloads files into a project. The skill encourages the agent to inspect the registry item first, use the official registry origin, review generated changes, and avoid following instructions embedded inside downloaded source files.

Why add an Agent Skill to a component library?

AI coding tools are becoming part of many developers’ daily workflows.

However, AI agents often make predictable mistakes when working with component libraries:

They invent exports that do not exist
They use the wrong import path
They recreate a component that is already available
They install the same component twice
They forget required providers
They break compound-component structure
They use hard-coded colors instead of design tokens
They omit accessibility requirements
They treat examples as exact APIs without checking the source

A dedicated skill gives the agent project-specific instructions.

For Spark UI, that means the agent can understand not only what components exist, but also how they are expected to be installed, composed, styled, and validated.

The goal is to make AI-assisted development more reliable and reduce the amount of correction needed after generated code.

Security improvements in Version 1

Because Spark UI distributes source code through a remote registry, security and transparency are important.

The project now documents the official registry origin:

https://spark-ui-olive.vercel.app/r

The recommended workflow is:

Inspect the registry item
Review the files and dependencies
Install only from the official registry
Inspect the resulting Git diff
Run the project’s validation commands

Spark UI does not require users to upload environment variables, secrets, local files, tokens, or private project data to install a component.

The project also hardened the Spotify metadata functionality to reduce SSRF risk.

Instead of allowing arbitrary server-side URL fetching, the implementation validates Spotify track identifiers and constructs the Spotify URL on the server. Redirects, retries, timeout behavior, and response-size limits are also controlled.

These changes were made because open-source components should be easy to inspect and safe to integrate.

Designed for customization

Spark UI components are intended to be starting points, not untouchable black boxes.

You can use them as they are, but the source-first approach makes customization one of the main features.

You can change:

Typography
Spacing
Border radius
Shadows
Colors
Motion behavior
Responsive breakpoints
Icons
Component states
Data structures
Event handling
Accessibility labels
Layout composition

Where possible, components use semantic shadcn and Tailwind design tokens such as:

--background
--foreground
--primary
--muted
--muted-foreground
--border

This allows components to adapt more naturally to light mode, dark mode, and custom themes.

Looking for developers to try Spark UI v1

Spark UI is now available publicly, and I’m looking for developers who are willing to try the first version.

You do not need to use every component.

Even testing one component and sharing your experience would be useful.

Feedback is especially welcome in these areas:

Installation experience
Registry reliability
Documentation clarity
Component APIs
TypeScript support
Dark and light themes
Mobile responsiveness
Accessibility
Animation performance
Browser compatibility
Agent Skill behavior
Missing components
Bugs and unexpected behavior

Useful feedback can be as simple as:

“This component installed successfully.”
“The import path in the docs was unclear.”
“The component breaks on mobile.”
“The dark mode colors need improvement.”
“The Agent Skill used the wrong component.”
“This component should support another variant.”
“I would like to see a component for this use case.”

Real usage feedback will help shape the next version.

Open source and open for contributions

Spark UI is open source and welcomes contributions.

You can contribute by:

Adding a new component
Improving an existing component
Fixing a bug
Improving accessibility
Adding keyboard interactions
Improving responsive behavior
Updating documentation
Creating a new demo
Improving TypeScript types
Adding validation
Reviewing existing pull requests
Suggesting new features
Reporting installation issues

Before opening a pull request, please read the project’s CONTRIBUTING.md.

The contribution guide explains:

Repository structure
Component source requirements
Demo requirements
Registry configuration
Documentation expectations
Naming conventions
Accessibility considerations
Theme compatibility
Validation commands
Pull request expectations

Following the contribution guide helps keep the registry consistent and makes reviews easier.

How to try Spark UI

1. Visit the documentation

Explore the available components and examples on the Spark UI website:

https://spark-ui-olive.vercel.app

2. Inspect a registry item

npx shadcn@latest view https://spark-ui-olive.vercel.app/r/kanban.json

3. Install a component

npx shadcn@latest add https://spark-ui-olive.vercel.app/r/kanban.json

4. Install the Agent Skill

npx skills add codeweb-dev/spark-ui --skill spark-ui

5. Share feedback

You can open an issue, start a discussion, or submit a pull request in the GitHub repository.

Project links

Website: spark-ui-olive.vercel.app
GitHub repository: codeweb-dev/spark-ui
Contribution guide: CONTRIBUTING.md

What comes next?

Spark UI v1 is the foundation.

Future improvements may include:

More application-focused components
More layout and dashboard patterns
Better installation examples
Additional themes
More accessibility testing
Expanded Agent Skill documentation
Improved component previews
More community-contributed components
Better test coverage
More complete usage examples

The project will grow based on real feedback and contributions rather than only adding components for the sake of having a larger catalog.

Final thoughts

Spark UI started as an attempt to build a practical, customizable, and developer-friendly component collection.

Version 1 is now public, but it is still the beginning.

My goal is to make Spark UI useful for developers who want:

Components they can fully own
Source code they can inspect
Styling they can customize
AI-assisted workflows that understand the library
An open project they can contribute to

I would appreciate any feedback from developers who try it.

GitHub stars, issues, suggestions, testing, and pull requests are all welcome.

Thanks for checking out Spark UI v1! ⚡

PassionCast: Turn What You Love Into a Story Worth Hearing

Allen Labrague — Fri, 10 Jul 2026 14:56:36 +0000

This is a submission for Weekend Challenge: Passion Edition.

What I Built

I built PassionCast, an AI-powered storytelling experience that turns the memories behind a person's passion into a short narrated mini-documentary.

The idea came from a simple observation: people often talk about what they love, but they rarely get the chance to explain why it matters so much.

PassionCast asks the user four questions:

What are you passionate about?
How did that passion begin?
What is your favorite memory connected to it?
Why does it still matter to you?

The user can then choose a storytelling tone, such as warm and nostalgic, emotional documentary, epic and cinematic, energetic superfan, or funny and playful.

Google Gemini transforms those answers into a structured story with:

A memorable title
A short personal mini-documentary
A highlight quote
A shareable caption
Narration direction

ElevenLabs then turns the written story into expressive narration.

The final result combines the generated story, quote, audio player, and a visual voice experience so the user can both read and hear the story behind what they love.

My main goal was not to build another generic AI text generator. I wanted PassionCast to feel like a small personal documentary studio: emotional, playful, and easy to use.

Demo

Live demo: Open PassionCast

The main flow is:

Open PassionCast.
Start with a randomized example or write your own answers.
Choose a storytelling tone.
Generate the mini-documentary.
Read the story while the narration is prepared.
Play the ElevenLabs narration.
Copy the story or caption, retry the voice, or create another story.

Code

GitHub repository: View the PassionCast source code

The repository includes the frontend experience, server-side AI routes, validation, reusable UI components, and the Gemini and ElevenLabs integrations.

How I Built It

I built PassionCast with:

Next.js App Router
TypeScript
Tailwind CSS
Google Gemini API
ElevenLabs API
Zod
React Bits
Lucide React
Poppins
Browser local storage

Story generation with Google Gemini

The user's answers are sent to a server-side Next.js route.

Gemini receives a carefully constrained storytelling prompt that tells it to preserve the user's real experience, avoid inventing names or events, and return a story that sounds natural when spoken aloud.

Instead of requesting unstructured text, I ask Gemini to return a predictable object containing:

title
story
quote
caption
narrationDirection

The response is validated before it reaches the interface. This made the application more reliable and made it much easier to render the result consistently.

A major design decision was to keep the story factual. Gemini can improve the emotional structure and language, but it should not fabricate details that the user never provided.

Narration with ElevenLabs

After Gemini creates the story, PassionCast sends the narration text to a protected server-side ElevenLabs route.

ElevenLabs gives the written story a voice and turns the result into something closer to a personal documentary than a normal generated paragraph.

The audio experience includes:

Play and pause controls
Playback progress
Replay
Volume controls
Narration retry
A visual Strands treatment around the voice experience

The written story appears before narration finishes, so the user is never forced to wait for audio before seeing the main result.

If narration fails, the generated story remains available. The user can still read it, copy it, or retry the voice without losing their work.

Designing the experience

I wanted PassionCast to feel human and expressive instead of looking like a generic AI dashboard.

The design uses:

A warm editorial color palette
Bold Poppins typography
Large rounded content cards
Asymmetrical layouts
Bright accent colors
Lucide React icons
React Bits animations used selectively
Strands as the visual language for voice
Accessible controls and reduced-motion support

The visual direction is inspired by modern editorial landing pages, but the interface and brand were created specifically for PassionCast.

Making it easy to start

One challenge with creative tools is the blank-page problem.

To make the app easier to try, PassionCast can prefill the form with a starter example. The user can edit everything, clear the form, or use Surprise Me to see a different idea.

This makes the main interaction understandable immediately while still encouraging users to replace the example with their own story.

Reliability and validation

I added validation to both user input and generated output.

The application handles:

Empty or oversized inputs
Invalid AI responses
Network failures
Gemini errors
ElevenLabs errors
Duplicate submissions
Audio retry states
Malformed local-storage data

API keys remain on the server and are never exposed to the browser.

Prize Categories

I am submitting PassionCast for:

Best Use of Google AI

Gemini is the narrative engine behind PassionCast.

It does more than summarize the user's answers. It identifies the emotional thread connecting the beginning of the passion, the user's strongest memory, and what that passion represents today.

Gemini also returns structured output, which makes the story-generation flow more reliable and allows the interface to separately present the title, story, quote, caption, and narration direction.

Best Use of ElevenLabs

ElevenLabs transforms the generated story from something the user reads into something they experience.

The voice is a core part of the product rather than a decorative extra. PassionCast is designed around the idea that hearing a personal story can make it feel more intimate, memorable, and cinematic.

The narration, custom audio controls, retry experience, and Strands visualization all contribute to the final listening experience.

Challenges I Faced

The hardest part was balancing creativity with truth.

I wanted Gemini to produce something emotional, but I did not want the model to invent details. I solved this by placing strict limits on the prompt, using structured output, and validating the response before displaying it.

Another challenge was handling two AI services in one user flow. Story generation and narration can succeed or fail independently, so I designed the result state so the written story remains useful even when audio is unavailable.

The third challenge was presentation. It was easy for the project to look like a normal form followed by generated text. I spent time turning the experience into something that feels closer to an editorial feature and a small audio-documentary studio.

What I Learned

This project taught me that structured AI output is especially useful when the result needs to power a real interface.

I also learned that graceful failure matters a lot in multi-service AI applications. A narration error should not destroy a successful story, and a user should always know what happened and what they can do next.

Most importantly, I learned that AI experiences feel more meaningful when the technology supports a clear emotional purpose. Gemini provides the structure and language, while ElevenLabs delivers the voice. Together, they help preserve the story behind a person's passion.

Final Thoughts

Passion can be loud, quiet, competitive, creative, nostalgic, or deeply personal.

PassionCast is my attempt to give those feelings a format that people can keep, hear, and share.

Every passion has a story. PassionCast gives it a voice.

Thanks for reading, and thanks to the DEV Community for creating a challenge that encouraged me to build something personal.

🚀 I Built DevBrand AI with Google AI Studio

Allen Labrague — Sat, 27 Jun 2026 06:30:39 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

For this project, I built DevBrand AI, an AI-powered web application that helps developers create a complete personal branding kit in just a few clicks.

Instead of manually writing bios, portfolio headlines, README introductions, or designing graphics, users simply provide their GitHub username, role, tech stack, experience, and preferred design theme. The application then generates everything automatically.

Prompt Used

I used Google AI Studio's Build apps with Gemini feature with a prompt similar to this:

Build a modern React + TypeScript application called DevBrand AI that generates a complete developer branding kit. Use Gemini to generate professional bios, portfolio headlines, GitHub README introductions, project ideas, mission statements, social media introductions, CTAs, and branding recommendations. Use Imagen to generate a modern 3D developer mascot, hero illustration, and portfolio banner. Create a responsive UI using Tailwind CSS with reusable React components, loading animations, copy buttons, and download functionality.

Features
🤖 AI-generated developer bio
🎯 Personal tagline
💻 Portfolio headline
📄 GitHub README introduction
💡 Project ideas
🌈 Suggested branding colors
📢 Social media introduction
🚀 Portfolio call-to-action
🎨 AI-generated developer mascot
🖼️ Hero illustration
🌐 Portfolio banner
📋 Copy buttons
📥 Download generated content
📱 Responsive modern interface
Demo

Screenshots

Live Demo

App: https://devbrand-ai-706459620449.asia-southeast1.run.app

My Experience

This project was my first time using the new Build apps with Gemini experience in Google AI Studio, and it was surprisingly fast to go from an idea to a working application.

What impressed me most was how the AI generated a well-structured React + TypeScript project instead of just producing a single file. The generated components, services, and overall architecture made the project easy to understand and extend.

I also enjoyed combining Gemini for structured text generation with Imagen for visual assets. Seeing both models work together in one application made it feel like building a complete product rather than just experimenting with AI.

Overall, this experience showed me how AI can significantly accelerate prototyping while still leaving room for customization and refinement. I'll definitely continue using Google AI Studio to quickly validate ideas and build future projects.

Thanks for reading! Feedback is always welcome.

Who Is JSON?

Allen Labrague — Sat, 27 Jun 2026 06:04:18 +0000

Asked AI "Who is JSON?" and it introduced me to JSON Derulo. I wasn't expecting that one. 😂