DEV Community: Allen Labrague

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. 😂