electricblaze
Social feeds for sites that AI writes. One schema for every source, a
component with demo data in one command, and the account connection handled
for you. The UI is yours, or your agent's. The data layer is ours.
npx electricblaze add instagram-feed
That puts a working Instagram feed into the project: a component for Next.js
App Router, the feed JSON and types for Astro, SvelteKit, Nuxt and friends, or
a drop-in kit for plain HTML, with twelve realistic demo posts so the page
renders before anyone signs up for anything.
Status: 0.1.2, Instagram only. add, preview, doctor and skill work
today, in demo mode. Real posts today come from the ElectricBlaze
widget: the site owner connects the Instagram
account there and pastes the embed snippet. The JSON API that feeds the
generated component, with login, connect and list, ships in 0.2. TikTok
and YouTube are planned; add tiktok-feed exits 2 rather than pretending.
Three ways in
| You use | Run |
|---|
| Any terminal | npx electricblaze add instagram-feed |
| shadcn CLI | npx shadcn@latest add ElectricBlaze/electricblaze/instagram-feed |
| Claude Code, Codex | npx electricblaze skill (installs the agent skill into the project) |
Claude Code can also install the skill as a plugin:
/plugin marketplace add ElectricBlaze/electricblaze, then
/plugin install electricblaze@electricblaze.
Pin the version when a script or an agent runs it: npx [email protected].
Every version is published from GitHub Actions with npm provenance
(npm audit signatures), and SECURITY.md says what the CLI
touches.
Commands
All commands are non-interactive, never prompt, and accept --json.
Exit codes: 0 done, 1 error, 2 needs something that is not there yet
(the output always says what to run next). An unknown flag, a flag that does
not apply to the command or a flag without its value is exit 2 too, never a
silent no-op.
npx electricblaze add instagram-feed # component + demo data into this project
npx electricblaze preview instagram # the feed as JSON (demo until connected)
npx electricblaze doctor # check the setup, get the next command
npx electricblaze skill # agent skill into .claude/skills and .agents/skills
npx electricblaze login # 0.2: device flow, like gh / vercel
npx electricblaze connect instagram # 0.2: prints a URL for the user, polls
Flags: --json, --force (replace files you edited), --dir=<path>,
--framework=next|html|data, --agent=claude,codex, --limit=<n>,
--formats=reel,post.
What add writes
Next.js App Router (detected from package.json and app/):
components/eb/InstagramFeed.tsx async Server Component, grid with badges
components/eb/InstagramFeed.module.css restyle freely
lib/eb/instagram.ts getInstagramFeed(): demo now, API when a key is set (0.2)
lib/eb/feed.d.ts the feed schema (types)
lib/eb/demo/instagram.json 12 sample posts
.env.example ELECTRICBLAZE_API_KEY=
Render it anywhere: <InstagramFeed limit={8} formats={["reel"]} />. The
output names the import path, using the @/* alias when tsconfig.json
has one.
Astro, SvelteKit, Nuxt, Remix, React Router, Gatsby, Vite (data, detected
from package.json): only the data, because those frameworks would not serve
a kit dropped into the project root.
lib/eb/feed.d.ts the feed schema (types)
lib/eb/demo/instagram.json 12 sample posts
Both land under src/ when the project has it. Read the JSON in the
framework's loader and render it; the skill below tells an agent exactly how.
Plain HTML (the fallback for everything else):
electricblaze/instagram-feed.js renders [data-eb-feed="instagram"] elements
electricblaze/instagram-feed.css
electricblaze/instagram.json the feed
electricblaze/instagram.demo.js the same feed, loadable from file://
electricblaze/feed.d.ts
<link rel="stylesheet" href="electricblaze/instagram-feed.css">
<div data-eb-feed="instagram" data-limit="8"></div>
<script src="electricblaze/instagram.demo.js"></script>
<script src="electricblaze/instagram-feed.js" defer></script>
add never overwrites a file you changed (line endings do not count as a
change); it reports the file as kept and --force replaces it. If the project
has AGENTS.md or CLAUDE.md, add appends a short marked block that tells
coding agents how the feed works and where real posts come from.
doctor finds whichever kit is installed, even one that does not match the
detected framework, validates the feed file against the schema and warns if
ELECTRICBLAZE_API_KEY is set before the API exists.
Real posts
Two routes, both honest about today:
- The widget, today. Sign up at https://electricblaze.com, create an
Instagram Feed widget, connect the Instagram account (Business or Creator;
Instagram does not share posts from personal profiles) and paste the
generated snippet where the feed belongs. Free plan: 5 widgets, 1,000 views
a month, refresh every 24 hours; the Start plan removes the view limit and
refreshes hourly.
- JSON in the generated component, 0.2.
npx electricblaze connect instagram prints a link for the account owner; real posts then flow into
the same schema and the demo label goes away. Until then leave
ELECTRICBLAZE_API_KEY unset: the loader would call an endpoint that does
not answer yet.
The agent skill
skills/electricblaze-feeds/ is an Agent Skill:
a SKILL.md with the workflow (add, wire in, restyle, filter, doctor, hand the
account connection to a human) and two references: the feed schema and the
current platform API facts with their check date (Basic Display is gone,
professional accounts only, 60-day tokens, media_product_type for reels,
YouTube quotas and unflagged Shorts). It triggers on requests like "add an
Instagram feed to the footer" and stops the agent from writing a fragile Graph
API fetch by hand.
- Claude Code:
.claude/skills/electricblaze-feeds/ (project) or the plugin above.
- Codex:
.agents/skills/electricblaze-feeds/ (project) or ~/.agents/skills/.
npx electricblaze skill writes both; --agent=claude or --agent=codex
picks one. It never overwrites a skill you edited.
The shadcn registry
registry.json at the repository root makes this repo a shadcn registry with
no build step or hosting. npx shadcn@latest add ElectricBlaze/electricblaze/instagram-feed
installs the same Next.js files as add, into your configured components/
and lib/ aliases, and adds ELECTRICBLAZE_API_KEY= to .env.local.
Feed schema
Every source is returned in one shape: schema/feed.d.ts (TypeScript types)
and schema/validate.js (dependency-free runtime check). A Feed wraps an
origin (profile, hashtag, playlist, board or channel) and a list of Posts.
A post has a type that tells a renderer what to draw (image, video,
carousel, text, link) and a format that tells what the platform calls
it (post, reel, short, live, clip, ...). Platform-specific data stays
in raw.
import type { Feed, Post } from "electricblaze";
import { validateFeed } from "electricblaze/schema";
Demo feeds
demo/instagram.json is a synthetic feed in schema v1: 12 posts covering
images, carousels, feed videos and reels, with demo: true. Nothing in it
points at a real Instagram account. Demo media (photos and short videos) live
in demo/media/ and are served through jsDelivr until the ElectricBlaze CDN
exists; sources and licenses are in demo/media/SOURCES.md. The media folder
is not part of the npm package.
Links
Site: https://electricblaze.com · Source: https://github.com/ElectricBlaze/electricblaze
· Changelog · Security
License: MIT
