I Built Yahoo Pipes 2.0 in 7 Days Using Kiro's Spec-Driven AI Development
TL;DR: Recreated Yahoo Pipes as a modern Chrome extension with AI-powered recommendations, industrial-grade SVG editor, and real-time webhooks. Built 100% with Kiro using specs and steering docs. 7 days vs 2 months traditional development.
The Yahoo Pipes Problem
If you're a certain age in tech, you remember Yahoo Pipes fondly. It was magical:
- Visual programming for data workflows
- No coding required
- Fetch RSS feeds, filter, merge, transform
- Output to anything
Yahoo shut it down in 2015. The dev community mourned. Alternatives existed (Zapier, IFTTT, n8n) but none captured that perfect balance of power and simplicity.
I decided to rebuild it. With 2025 superpowers.
What I Built: GhostPipes
Core Features
🎯 ML-Powered Recommendations
The "Netflix for pipelines." Paste a URL, upload CSV, drop text—Ghost Pipes analyzes:
- Input type (file/url/text)
- MIME type and structure
- Your usage history
- Pipeline success rates
Then scores every pipeline 0-100 and suggests the top 5. It learns from every execution.
🎨 Industrial-Grade Visual Editor
Not your typical node editor with simple lines. I wanted realistic pipes:
Bad: Node1 -----> Node2
Good: Node1 ═══╗
║
Node2
Features:
- 10px thick SVG pipes
- 90° bends with smooth cubic bezier corners
- Collision avoidance (pipes route around nodes)
- Decorative joint patches at elbows
- 60fps drag-and-drop with
requestAnimationFrame
⚡ 35+ Node Types
Input, processing, and output nodes covering:
- HTTP requests (scheduled or one-time)
- Webhooks (generate unique URLs)
- File operations (CSV, JSON, HTML parsing)
- AI processing (summarize, translate, extract)
- Logic (loops, conditionals, switches)
- Destinations (download, API POST, email)
🔗 Real-Time Webhooks
Generate a unique URL for each pipeline. When external services trigger it:
- Backend validates token
- Checks payload size
- If <4KB: sends data via Web Push
- If ≥4KB: sends "fetch data" instruction
- Extension shows notification
☁️ Offline-First + Cloud Sync
- IndexedDB for local storage
- 15-second debounced sync to AWS
- Conflict resolution (server timestamp wins)
- Works completely offline
The Kiro Difference
Traditional AI Coding (Vibe Coding)
You: "Build me a visual pipeline editor"
AI: [generates 500 lines of React]
You: "No, use my custom framework Om.js"
AI: [generates broken code that doesn't work]
You: "Fix the reactivity"
AI: [different broken code]
[repeat 10x until you just rewrite it manually]
Time: 2-3 weeks of iteration
Quality: Mixed, requires heavy refactoring
Maintainability: Poor, no documentation
Kiro's Spec-Driven Approach
Step 1: Write Comprehensive Specs
/specs/
├── backend-architecture.md (3,500 words)
├── database-design.md
├── api-contracts.md (every endpoint)
├── pipeline-recommendation.md (ML algorithm)
└── pipeline-builder-visual-editor.md
I spent 2 days writing these. Detailed requirements, edge cases, data models, algorithms.
Step 2: Add Steering Docs
/steering/
├── coding-guidelines.md (my style rules)
├── om-js-framework.md (custom reactive system)
└── svg-best-practices.md
This teaches Kiro my preferences:
- Use Om.js, not React
- Ternaries over if-else
- Object lookups over switch statements
- Classes for separation of concerns
- Modern CSS nesting
Step 3: Let Kiro Build
> kiro build backend
[Kiro reads specs + steering]
[Generates 15 files, 3,500 lines]
[Tests pass on first run]
Time: 5 days of implementation
Quality: Production-ready immediately
Maintainability: Fully documented, follows my style
Real Examples of Kiro's Magic
Example 1: The SVG Pipe Challenge
My Fear: "I don't know SVG. Creating realistic pipes will take weeks of research."
What I Did:
- Wrote text description: "Industrial pipes, 10px thick, 90° bends, smooth corners"
- Uploaded reference image of factory pipes
- Kiro analyzed image + specs
- Generated complete PathCalculator class:
export class PathCalculator {
calculateOrthogonalPath(start, end, obstacles) {
// 120 lines of collision detection
// Waypoint generation
// Bezier curve insertion
}
generateSVGPath(waypoints) {
// Converts to SVG with smooth corners
}
}
Result: Worked perfectly. Looks professional. 200+ lines I never had to write.
Example 2: 35+ Om.js Web Components
The Problem: AI trained on React produces garbage for custom frameworks.
My Solution:
-
Documented Om.js in
/steering/om-js-framework.md:- Reactive proxy system
-
htmltemplate literals - Event binding with
@click - No shadow DOM
Asked Kiro to generate FilterNode component
Kiro's Output:
import { react, html } from '/lib/om.compact.js';
export class FilterNode extends HTMLElement {
state = react({
mode: 'permit',
rules: []
});
render() {
return html`
<div class="filter-node">
<select .value=${() => this.state.mode}>
<option value="permit">Permit</option>
<option value="block">Block</option>
</select>
${this.state.rules.map(rule => this.renderRule(rule))}
</div>
`;
}
}
Perfect Om.js syntax. First try.
I then asked for 34 more nodes. All perfect. No rewrites.
Example 3: AWS Integration via MCP
Background: I'm a frontend dev. Last touched AWS 3 years ago. Forgot everything.
The Issue:
- Set up Aurora PostgreSQL
- Migrations wouldn't run
- Database doesn't exist?
- Spent 4 hours Googling
Kiro + AWS MCP:
Me: "Here's my terraform config. Migrations fail. Database 'ghostpipes' doesn't exist."
Kiro: "RDS instance created, but database not initialized. Run:
CREATE DATABASE ghostpipes;
Also, your connection string missing db name. Add: ?database=ghostpipes"
Fixed in 5 minutes.
The Agent Hooks Secret Weapon
Kiro's hooks continuously monitor code quality:
.kiro/hooks/pre-commit.js
// Check for leaked API keys
if (detectAPIKeys(changedFiles)) {
fail("API key detected in commit!");
}
// Check manifest.json permissions
if (hasNewPermissions(manifest)) {
warn("New permission added: " + newPerms);
}
.kiro/hooks/on-build.js
// Remove console.logs in production
stripDebugCode(distFiles);
// Check bundle size
if (extensionSize > 5MB) {
fail("Extension too large: " + size);
}
These caught 12 issues during development:
- 2x hardcoded test API keys
- 1x accidental
<all_urls>permission - 8x leftover console.logs
- 1x bundle size spike (included wrong library)
The Numbers
| Metric | Traditional | With Kiro |
|---|---|---|
| Dev Time | 6-8 weeks | 7 days |
| Lines of Code | ~8,000 | ~8,000 |
| Rewrites | 3-4 major | 0 |
| Documentation | Written after | Written before |
| Test Coverage | ~60% | ~85% |
| Bugs in Production | 15-20 | 3 |
What I Learned
1. Specs Are Worth It
Spending 2 days on specs felt slow. But the code Kiro generated was so clean, I saved 2 weeks of refactoring.
Bad Approach: Code first, document later (if ever)
Good Approach: Spec first, code second
2. Steering Docs = 10x Multiplier
For custom frameworks/styles, steering docs are non-negotiable. 2 hours documenting Om.js saved me 40 hours of manual coding.
3. MCP Transforms Domain-Specific Work
AWS MCP, Svelte MCP—these aren't just "ChatGPT with docs." They have current, accurate knowledge that generic AI lacks.
4. Agent Hooks Prevent Embarrassment
The API key hook alone justified Kiro. Chrome Web Store would've rejected my extension otherwise.
Try It Yourself
GhostPipes: [Chrome Web Store Link]
Source Code: [GitHub]
Kiro: [kiro.dev]
Top comments (0)