{
"version": 2,
"repo": "rahmanef63/resource-site",
"branch": "main",
"aliases": {
"blog-section": "sections",
"faq-section": "sections",
"portfolio-section": "sections",
"changelog-feed": "sections",
"feature-grid": "sections",
"testimonials-grid": "sections",
"pricing-page": "sections",
"files": "file-upload",
"onboarding-wizard": "site-setup-wizard",
"media-studio": "design-studio",
"loading-states": "feedback-states",
"empty-states": "feedback-states",
"resume": "profile",
"about-profile": "profile",
"settings-page": "settings",
"shell-settings": "settings",
"doku-payment": "payment",
"midtrans-payment": "payment",
"landing-sections": "sections",
"notion-shell": "notion-ui",
"notion-database": "notion-ui",
"notion-sidebar": "notion-ui",
"notion": "notion-app",
"admin-console": "admin",
"ai-chat": "ai-workspace",
"ai-studio": "ai-workspace",
"ai-agents": "ai-workspace"
},
"layouts": [],
"recipes": [],
"features": [
{
"slug": "image-editor",
"title": "Image Editor — layered raster editor",
"category": "os",
"description": "A Photoshop-style raster image editor built on Konva. Layers panel (reorder, opacity, visibility, lock, 16 blend modes), free transform (move/scale/rotate/flip via a Transformer), image + text + shape + paint layers, brush & eraser with size/opacity/hardness, non-destructive adjustments + filters, canvas resize/aspect presets, and LAYER STYLES: stroke, drop shadow, outer glow, clipping mask. One-click BACKGROUND REMOVAL runs fully in-browser via @imgly/background-removal (free, no API key — downloads a small ONNX model on first use). Undo/redo, zoom/pan, shortcuts, PNG/JPG/WebP export. v2 adds an AI FUNCTION-CALLING layer: every editor operation is a named, schema'd command (EDITOR_COMMANDS registry + useEditorCommands binding) driven by an in-editor chat; the streaming bridge is injectable via configureAgentStream(fn) and everything except the chat works without it. A headless server barrel (server.ts) runs commands against documents with no DOM. Image I/O via props (initialImage / onSave).",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add image-editor",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { ImageEditor } from \"@/features/image-editor\";\n\nexport default function ImageEditorDemo() {\n // No props → opens a blank 1080×1080 canvas with one paint layer. Brush/erase,\n // add text/shapes, open an image + remove its background (free, in-browser),\n // apply layer styles + filters, then export PNG/JPG/WebP. Konva stage is\n // client-only (loaded via next/dynamic) so SSR never touches canvas/window.\n return (\n \n console.log(\"save\", dataUrl.slice(0, 32))} />\n
\n );\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui + Konva. A layered raster image editor. Image I/O is via props; background removal runs in-browser (no backend).\n\nSTEP 1 — Install. `npx rr add image-editor`. Ensure `@/features/image-editor` resolves in tsconfig paths and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `konva react-konva @imgly/background-removal lucide-react`. shadcn: `npx shadcn@latest add button input slider select tabs scroll-area separator tooltip label switch popover`.\n\nSTEP 3 — Mount. It is fully self-contained; the Konva stage is loaded client-only (next/dynamic ssr:false) inside the slice, so just render it in a height-bearing box:\n```tsx\n\"use client\";\nimport { ImageEditor } from \"@/features/image-editor\";\nexport default function Page() {\n return (\n \n console.log(dataUrl)} />\n
\n );\n}\n```\nProps: `initialImage?` (data/object/remote URL opened on mount), `width?`/`height?` (blank canvas size, default 1080²), `onSave?(dataUrl)` (fires from the Save button with a PNG data URL; omit to hide Save), `className?`.\n\nSTEP 4 — Background removal. The \"Remove BG\" button calls removeImageBackground() from @imgly/background-removal — free, in-browser, no key. First run downloads a small model to the browser cache, then runs locally via WASM. You can also import `removeImageBackground(src) => Promise` directly.\n\nSTEP 5 — Export. PNG/JPG/WebP at 1×/2×/3× via the Export tab, or call `exportStage(stage, {...})` / `stageToDataURL(stage, {...})`. The container owns the box — render inside h-dvh / h-full.",
"tags": [
"image-editor",
"photoshop",
"canvas",
"konva",
"layers",
"filters",
"background-removal",
"paint",
"ai",
"ui"
]
},
{
"slug": "reel-editor",
"title": "Reel — video timeline editor",
"category": "os",
"description": "A complete in-browser video editor. Real media clips (image/video/audio) on a layered multi-track timeline — the top row renders frontmost, with ▲▼ reorder and per-track lock/hide/mute. ONE Canvas-2D draw path is shared by the live preview and the realtime MediaRecorder exporter, so what you see is exactly what renders (WebM with real mixed audio: per-clip volume/fades/auto-duck through a streaming audio graph). Per-clip trim/speed (0.25–4×)/reverse, dissolve/wipe/slide transitions via clip overlap, keyframes (opacity/scale/x/y/rotation) with easing + one-click In/Out animation presets, text styling with preset grid, color grading + vignette, filmstrip thumbnails + real waveforms, snapping, split/duplicate. The workspace is config-driven: 6 resizable layout presets (react-resizable-panels v4) incl. quick-import files-pane layouts, plus custom composition size. Drafts auto-save to localStorage. Self-contained: toasts via sonner, the files pane runs on an injectable fs adapter (configureReelFs; in-memory mock by default), and shell hooks (inspector/activity) are inert seams in lib/host.ts.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add reel-editor",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { ReelEditor } from \"@/features/reel-editor\";\n\nexport default function VideoEditorDemo() {\n // Opens with a sample composition. Import media via File menu (local picker\n // works with zero backend — object URLs), arrange clips on layered tracks,\n // add text/transitions/keyframes, then Render → realtime WebM with audio.\n return (\n \n \n
\n );\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. An in-browser video timeline editor with realtime WebM export. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add reel-editor`. Ensure `@/features/reel-editor` resolves in tsconfig paths and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react react-resizable-panels sonner`. shadcn: `npx shadcn@latest add button input slider tooltip dialog dropdown-menu resizable sheet sonner`. Mount `` (sonner) once in your root layout.\n\nSTEP 3 — Mount. Render in a height-bearing box:\n```tsx\n\"use client\";\nimport { ReelEditor } from \"@/features/reel-editor\";\nexport default function Page() {\n return
;\n}\n```\nOr register the `reelEditorApp` descriptor in an appshell manifest for windowed hosts.\n\nSTEP 4 — Files pane backend (optional). The quick-import pane ships with an in-memory mock. Wire a real filesystem with `configureReelFs({ list, mkdir, rawUrl })` — list/mkdir mirror a simple fs API, rawUrl resolves a listed path to a fetchable media URL.\n\nSTEP 5 — Export. The Render button records the live canvas + mixed audio to WebM via MediaRecorder in realtime (duration = composition length). Users can also import local media via the file picker — object URLs, no upload needed.",
"tags": [
"video",
"video-editor",
"timeline",
"nle",
"keyframes",
"transitions",
"webm",
"canvas",
"ui"
]
},
{
"slug": "media-viewer",
"title": "Preview — media quick-look",
"category": "os",
"description": "A quick-look media viewer in the macOS Preview spirit. Images render on a zoomable (40–300%) checkerboard stage so transparency reads; audio gets a card player with a CSS-bar waveform + transport; video gets play/pause + scrubber + volume; PDFs embed full-bleed and text gets a simple surface. The toolbar carries a type-indicator chip, zoom, Download, Open-in-editor, and prev/next. Two integration seams in lib/host.ts make it portable: configureMediaSource maps fs paths to fetchable URLs (identity by default, so public URLs work with zero wiring) and configureMediaOpener routes the Open-in-editor handoff (image → image-editor, video/audio → reel-editor) to your shell — both inert until set. Launched bare it shows a fully offline sample gallery (inline SVG gradients, simulated A/V playback). Pairs with file-explorer (onOpenFile → MediaViewer payload) and the editors.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add media-viewer",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { MediaViewer } from \"@/features/media-viewer\";\n\nexport default function PreviewDemo() {\n // No payload → offline sample gallery (gradient images, simulated A/V).\n // Pass { path, name, kind } to view a real file; wire configureMediaSource\n // when paths need resolving against your own fs API.\n return (\n \n \n
\n );\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A quick-look media viewer (image/video/audio/pdf/text). Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add media-viewer`. Ensure `@/features/media-viewer` resolves in tsconfig paths and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button badge separator tooltip slider`.\n\nSTEP 3 — Mount. `` with no payload shows the offline sample gallery. Pass a file to view it:\n```tsx\n\"use client\";\nimport { MediaViewer } from \"@/features/media-viewer\";\nexport default function Page() {\n return
;\n}\n```\nOr register the `mediaViewerApp` descriptor in an appshell manifest for windowed hosts.\n\nSTEP 4 — Remote files (optional). Paths resolve through `configureMediaSource({ rawUrl })` — identity by default, so public/absolute URLs already work. Point rawUrl at your fs endpoint for private files.\n\nSTEP 5 — Editor handoff (optional). `configureMediaOpener((appId, title, size, payload) => …)` routes the \"Open in Image/Video Editor\" actions to your shell (no-op until set). Wire it to openWindow when running inside appshell with image-editor / reel-editor installed.",
"tags": [
"media",
"preview",
"viewer",
"quick-look",
"image",
"video",
"audio",
"pdf",
"ui"
]
},
{
"slug": "code-editor",
"title": "Code — overlay syntax editor",
"category": "os",
"description": "A lightweight code editor in the VS-Code spirit without the weight: a transparent textarea layered over a highlighted pre (regex tokenizer for JS/TS/JSON/CSS) gives real editing with live syntax color and a line-number gutter; a tab strip tracks dirty buffers with Cmd/Ctrl+S save; a status bar shows path, Ln/Col, tab size, language and save state. The explorer is a lazy per-directory tree — each folder lists on expand, with inline new-file/new-folder affordances — rendered as a rail on desktop and a Sheet on mobile, and the new-file form is a responsive dialog ⇄ bottom drawer. The filesystem is INJECTED via a small CodeFsAdapter (list/read/write/mkdir): point configureCodeFs at a real API or use the bundled writable in-memory mock (seeded sample tree) so it works with zero backend. Writes are best-effort — a read-only host flags the save but keeps the local buffer. Pairs with file-explorer (onOpenFile → payload) and appshell.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add code-editor",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { CodeEditor } from \"@/features/code-editor\";\n\nexport default function CodeDemo() {\n // No payload → seeded sample tree on the writable in-memory mock fs.\n // Explorer lazy-lists each directory on expand; + buttons create\n // files/folders; Cmd/Ctrl+S saves. Wire configureCodeFs for a real backend.\n return (\n \n \n
\n );\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A lightweight overlay-highlighting code editor with a lazy explorer tree. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add code-editor`. Ensure `@/features/code-editor` resolves in tsconfig paths and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button badge input scroll-area sheet dialog`.\n\nSTEP 3 — Mount. `` opens the seeded sample tree (writable in-memory mock). Open a specific file with a payload:\n```tsx\n\"use client\";\nimport { CodeEditor } from \"@/features/code-editor\";\nexport default function Page() {\n return
;\n}\n```\nOr register the `codeEditorApp` descriptor in an appshell manifest for windowed hosts.\n\nSTEP 4 — Real filesystem (optional). `configureCodeFs({ list, read, write, mkdir })` — list returns { path, entries: [{ name, kind }] } for ONE directory (the tree fetches per expand), read returns the file body, write/mkdir mutate. Writes are best-effort: on failure the editor keeps the local buffer and flags the status bar.\n\nSTEP 5 — Cross-app open. From a file manager (e.g. the file-explorer slice), wire onOpenFile to re-render CodeEditor with payload={{ path }} — the editor adds a tab and hydrates the buffer.",
"tags": [
"code",
"editor",
"syntax-highlight",
"ide",
"tabs",
"file-tree",
"ui"
]
},
{
"slug": "system-monitor",
"title": "System Monitor — host telemetry dashboard",
"category": "os",
"description": "An Activity-Monitor-style dashboard: circular CPU/RAM/disk/GPU gauges, rolling CPU + network sparklines on glass panels, and a live process table — polling every 1.5s with a ~40-point history. Telemetry is INJECTED via a small SysMonAdapter (stats/processes): point configureSysmon at a real host API (/proc, an agent, a cloud endpoint) or keep the bundled wavy in-browser mock so the dashboard renders alive with zero backend. Self-contained: shell inspector hooks are inert seams in lib/host.ts.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add system-monitor",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { SystemMonitor } from \"@/features/system-monitor\";\n\nexport default function MonitorDemo() {\n // Unwired -> wavy mock telemetry; configureSysmon for a real host.\n return
;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Host telemetry dashboard. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add system-monitor`. Ensure `@/features/system-monitor` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add scroll-area`.\n\nSTEP 3 — Mount. `` in a height-bearing box — unwired it runs a wavy in-browser telemetry mock. Or register `systemMonitorApp` in an appshell manifest.\n\nSTEP 4 — Real telemetry. `configureSysmon({ mode:\"live\", stats, processes })` — stats returns { cpu:{pct,cores}, mem:{used,total}, disk:{used,total}, net?:{rx,tx}, uptime }; processes returns [{ pid, name, status, cpu, mem }].",
"tags": [
"monitoring",
"telemetry",
"dashboard",
"gauges",
"sparkline",
"processes",
"ui"
]
},
{
"slug": "booking",
"title": "Booking — session request form + owner inbox",
"category": "os",
"description": "One app that is BOTH a public 'book a session' request form AND the owner's triage inbox — it flips to show the inbox when the viewer can manage. Visitors submit name/email/topic (+ optional preferred time / note); the owner sees pending requests with Confirm / Decline. The backend is INJECTED via a small BookingAdapter (submit/list/setStatus/canManage): point configureBooking at your store, or keep the bundled in-memory mock so it renders fully interactive — form + inbox — with zero backend.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add booking",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { Booking } from \"@/features/booking\";\n\nexport default function BookingDemo() {\n // Unwired -> in-memory mock; configureBooking for a real backend.\n return
;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A booking request form + owner inbox. Fully client-side; backend optional.\n\nSTEP 1 — Install. `npx rr add booking`. Ensure `@/features/booking` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea scroll-area`.\n\nSTEP 3 — Mount. `` in a height-bearing box — unwired it runs on an in-memory mock store (form + inbox both live). Or register `bookingApp` in an appshell manifest.\n\nSTEP 4 — Real backend. `configureBooking({ mode:\"live\", submit, list, setStatus, canManage })` — submit takes { name, email, topic, preferredTime?, note? }; list returns rows with { id, status, createdAt }; omit list/canManage for a write-only public form.",
"tags": [
"booking",
"contact",
"form",
"inbox",
"lead",
"scheduling",
"ui"
]
},
{
"slug": "html-studio",
"title": "HTML Studio — sandboxed HTML/CSS/JS editor with live preview",
"category": "os",
"description": "A tiny web-page studio: write HTML / CSS / JS and see it render LIVE in a sandboxed iframe (srcdoc + sandbox=allow-scripts WITHOUT allow-same-origin, so user code runs in an opaque origin and cannot read the host) — then Save to a shareable /p/. Code / Split / Preview view toggle, a device-width preview (responsive / tablet / phone), a saved-pages rail, and public/private visibility. The backend is INJECTED via a small HtmlStudioAdapter (save/load/list/remove): point configureHtmlStudio at your store, or keep the bundled in-memory mock so the editor + live preview + saved list are fully interactive with zero backend.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add html-studio",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { HtmlStudio } from \"@/features/html-studio\";\n\nexport default function HtmlStudioDemo() {\n // Unwired -> in-memory mock; configureHtmlStudio for a real backend.\n return
;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A sandboxed HTML/CSS/JS studio: editor + live iframe preview + saved pages. Fully client-side; backend optional.\n\nSTEP 1 — Install. `npx rr add html-studio`. Ensure `@/features/html-studio` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea scroll-area`.\n\nSTEP 3 — Mount. `` in a height-bearing box — unwired it runs on an in-memory mock (editor + live sandboxed preview + saved list all live). Pass `payload={{ slug }}` to open a page, or register `htmlStudioApp` in an appshell manifest.\n\nSTEP 4 — Real backend. `configureHtmlStudio({ mode:\"live\", save, load, list, remove })` — save takes { slug?, title, html, visibility } and returns { slug }; load(slug) -> SavedPage | null; omit save for a read-only sandbox or list to hide the saved rail. KEEP the iframe sandbox without allow-same-origin — it is the security boundary.",
"tags": [
"html",
"editor",
"sandbox",
"iframe",
"preview",
"playground",
"code",
"ui"
]
},
{
"slug": "resources-launcher-admin",
"title": "Resources Admin — curated icon-launcher CRUD",
"category": "os",
"description": "An owner-gated admin app for a curated icon-launcher: add / edit / remove / reorder links (label, lucide icon NAME, url, group, order) that open in a new tab. The backend is INJECTED via a small ResourcesAdapter (list/upsert/remove/canManage): point configureResources at your store, or keep the bundled in-memory mock so the whole CRUD — including reorder — is interactive with zero backend. Icons are stored as lucide NAME strings and resolved client-side, so the same data drives a public launcher surface.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add resources-launcher-admin",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { ResourcesAdmin } from \"@/features/resources-launcher-admin\";\n\nexport default function ResourcesAdminDemo() {\n // Unwired -> in-memory mock; configureResources for a real backend.\n return
;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A curated icon-launcher admin (CRUD + reorder). Fully client-side; backend optional.\n\nSTEP 1 — Install. `npx rr add resources-launcher-admin`. Ensure `@/features/resources-launcher-admin` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input label scroll-area native-select`.\n\nSTEP 3 — Mount. `` in a height-bearing box — unwired it runs on an in-memory mock store (add / edit / remove / reorder all live). Or register `resourcesAdminApp` in an appshell manifest.\n\nSTEP 4 — Real backend. `configureResources({ mode:\"live\", list, upsert, remove, canManage })` — list returns rows { id, label, icon, url, group, order }; upsert takes the same minus id to insert (pass id to patch); canManage gates the editor + reorder. Icons are lucide NAME strings resolved via resolveIcon.",
"tags": [
"launcher",
"links",
"bookmarks",
"admin",
"crud",
"icons",
"ui"
]
},
{
"slug": "profile",
"title": "Profile — CV + identity card",
"category": "os",
"description": "One owner's identity in two co-located variants, behind one slug. resume: a clean one-column résumé / CV — name, roles, location, contacts, summary, skills, experience (role · org · period + bullets), projects — rendered by off a configureResume() seam, with a Print / PDF button. card: an \"About This Mac\"-style identity card — avatar / monogram, name, roles, outbound links, FAQ accordion — rendered by off a configureAbout() seam. Both render a populated placeholder unwired (zero backend). Install one surface with `npx rr add profile resume|card`, or both with `npx rr add profile`.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add profile",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { Resume, AboutProfile } from \"@/features/profile\";\n\nexport default function ProfileDemo() {\n // Unwired -> generic placeholders; configureResume(cv) / configureAbout(card) for real data.\n return (\n \n );\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Two identity renderers driven by injected data. Fully client-side; no backend required.\n\nSTEP 1 — Install. `npx rr add profile` for both, or `npx rr add profile resume` / `card` for one. Ensure `@/features/profile` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area avatar`.\n\nSTEP 3 — Mount. `` (CV) or `` (card) in a height-bearing box — unwired each renders a generic placeholder. Or register `resumeApp` / `aboutProfileApp` in an appshell manifest.\n\nSTEP 4 — Real data. `configureResume(profile)` with a ResumeProfile { name, roles[], location, summary, contacts[], skills[], experience[], projects[] }, and/or `configureAbout(card)` with { name, roles[], description, links[], faq[] }, once at boot from Convex / a CMS / a JSON file. Resume's \"Print / PDF\" button calls window.print() against a print-friendly layout.",
"tags": [
"resume",
"cv",
"profile",
"portfolio",
"about",
"identity",
"bio",
"card",
"links",
"faq",
"print",
"ui"
]
},
{
"slug": "start-here",
"title": "Start Here — guided OS onboarding tour",
"category": "os",
"description": "A guided 'Start Here' tour that lays the OS out as a path of stages, each stage opening real apps from the LIVE registry — drift-proof, it reads the injected app catalog instead of a hardcoded list, so adding an app surfaces it automatically (in a stage if listed, else a final 'Everything else' bucket). The catalog, the open(id) callback, and the stage journey are INJECTED via a small StartHereAdapter (apps / open / stages): point configureStartHere at your live app registry + window opener, or keep the bundled in-memory mock (a few generic apps + 3 stages) so the welcome tour renders fully alive with zero host.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add start-here",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { StartHere } from \"@/features/start-here\";\n\nexport default function StartHereDemo() {\n // Unwired -> in-memory mock catalog; configureStartHere for the live registry.\n return
;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A guided onboarding tour that renders your live app catalog as a path of stages. Fully client-side; the catalog is injected.\n\nSTEP 1 — Install. `npx rr add start-here`. Ensure `@/features/start-here` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button scroll-area`.\n\nSTEP 3 — Mount. `` in a height-bearing box — unwired it reads an in-memory mock catalog (generic apps + 3 stages) so the tour is fully alive. Or register `startHereApp` in an appshell manifest.\n\nSTEP 4 — Real catalog. `configureStartHere({ mode:\"live\", apps, open, stages })` — apps is your live registry as [{ id, title, icon, description? }]; open(id) launches the real app/window; stages is [{ title, blurb, appIds }] (apps not placed fall into a final \"Everything else\" stage). Drift-proof: read the registry, never hardcode the list.",
"tags": [
"onboarding",
"tour",
"welcome",
"launcher",
"guide",
"os",
"ui"
]
},
{
"slug": "os-terminal",
"title": "Terminal — shell emulator with live passthrough + PTY seam",
"category": "os",
"description": "A React-DOM terminal: monospace glass aesthetic, colored prompt, arrow-key history, red stderr. Built-ins (ls·cd·pwd·cat·mkdir·touch·rm·mv·cp·echo·whoami·date·uname·df·ps·neofetch·help·clear) run against an in-memory FsModel, so it works with ZERO backend. Wire configureTerminal({ mode:\"live\", fs, exec }) and ls/cat read through your real filesystem, file mutations mirror to it, and any unknown command passes through exec.run as a one-shot shell call (stdout/stderr/exit rendered). Self-contained: shell inspector hooks are inert seams in lib/host.ts.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add os-terminal",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { Terminal } from \"@/features/os-terminal\";\n\nexport default function TerminalDemo() {\n // Mock mode: 17 built-ins over an in-memory fs. configureTerminal to go live.\n return
;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Shell emulator with optional live passthrough. Fully client-side by default.\n\nSTEP 1 — Install. `npx rr add os-terminal`. Ensure `@/features/os-terminal` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. No shadcn components required.\n\nSTEP 3 — Mount. `` in a height-bearing box — mock mode runs entirely on the in-memory FsModel. Or register `osTerminalApp` in an appshell manifest.\n\nSTEP 4 — Go live. `configureTerminal({ mode:\"live\", fs:{list,read,write,mkdir,remove,move,copy}, exec:{run} })`. In live mode ls/cat read through your fs, mutations mirror, and unknown commands hit exec.run (one-shot; treat the endpoint like SSH).",
"tags": [
"terminal",
"shell",
"cli",
"emulator",
"exec",
"ui"
]
},
{
"slug": "assistant",
"title": "Assistant — agent workspace with streaming chat",
"category": "os",
"description": "A full agent workspace: streaming chat with typing deltas and graceful error notes, plus a library where users CREATE and manage agents (persona, avatar gradient, system prompt), skills, and automations (trigger + schedule forms) — all persisted in localStorage, no backend. Preset agents/skills ship as starting points. The model is INJECTED: configureAssistantStream takes any (messages) => AsyncIterable — your SSE endpoint, the AI SDK, an agent loop — and until wired a typing demo stream keeps the whole UI working offline. Self-contained: shell inspector hooks are inert seams in lib/host.ts.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add assistant",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { Assistant } from \"@/features/assistant\";\n\nexport default function AssistantDemo() {\n // Unwired -> typing demo stream. configureAssistantStream for a real LLM.\n return ;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Agent workspace with streaming chat. Fully client-side; model injected.\n\nSTEP 1 — Install. `npx rr add assistant`. Ensure `@/features/assistant` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input textarea tabs badge scroll-area dropdown-menu dialog select switch`.\n\nSTEP 3 — Mount. `` in a height-bearing box. Unwired, a typing demo stream answers so the UI works offline; agents/skills/automations persist in localStorage.\n\nSTEP 4 — Wire a model. `configureAssistantStream(async function* (messages) { ...yield text deltas... })` — SSE endpoint, AI SDK, or an agent loop. Throw Error(\"no_api_key\") / Error(\"unauthorized\") for the chat's friendly error notes.",
"tags": [
"ai",
"assistant",
"chat",
"agents",
"streaming",
"automations",
"ui"
]
},
{
"slug": "browser",
"title": "Browser — remote headless-browser chrome",
"category": "os",
"description": "Full browser chrome for a REMOTE headless browser: omnibar with search-or-URL detection, bookmark bar, history view (localStorage-persisted), favicons with globe fallback, busy states, and a screenshot viewport that forwards clicks/typing/keys/scroll into the remote page. The backend is INJECTED via a small BrowserAdapter (state/screenshot/act): point configureBrowser at a real headless-Chromium service (e.g. Playwright behind an authed route — any site renders, no X-Frame-Options problem) or keep the bundled offline canvas demo renderer that fakes the viewport so the whole chrome works with zero backend. Self-contained: shell inspector hooks are inert seams in lib/host.ts.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add browser",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { Browser } from \"@/features/browser\";\n\nexport default function BrowserDemo() {\n // Unwired -> offline canvas demo renderer. configureBrowser for Playwright.\n return
;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Remote headless-browser chrome. Demo renderer by default; real backend injected.\n\nSTEP 1 — Install. `npx rr add browser`. Ensure `@/features/browser` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input badge dropdown-menu tooltip scroll-area`.\n\nSTEP 3 — Mount. `` in a height-bearing box — unwired, an offline canvas demo renderer fakes the viewport (omnibar/bookmarks/history all work). Or register `browserApp` in an appshell manifest.\n\nSTEP 4 — Real headless browser. `configureBrowser({ state, screenshot, act })` against a Playwright service: state → { url, title }; screenshot → PNG Blob; act(path, body) handles navigate|click|type|key|scroll|back|forward|reload. AUTH those routes — a remote browser holds logged-in sessions.",
"tags": [
"browser",
"headless",
"playwright",
"remote",
"omnibar",
"bookmarks",
"ui"
]
},
{
"slug": "app-store",
"title": "App Store — install, create + toggle apps",
"category": "os",
"description": "The dynamic half of an app registry, in two surfaces. AppStore: a storefront with featured hero, category sidebar, install/uninstall cards for a curated catalog, and toggles that disable built-in apps/shell features (the DISABLED set is persisted so new apps always ship enabled). CreateApp: build a custom app — name, glyph, accent gradient, runtime (html/node/python/shell), entry — with live manifest preview. Both write one localStorage registry; useInstalledApps() turns it into appshell-style descriptors (html apps mount in a sandboxed iframe, command apps in a terminal-style console). The console's shell is INJECTED via configureAppStoreExec (demo echo by default). Self-contained: inspector hooks are inert seams in lib/host.ts; the Create-App flow is bundled in (no cross-slice imports).",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add app-store",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { AppStore } from \"@/features/app-store\";\n\nexport default function StoreDemo() {\n // Install/uninstall + Create-App write one localStorage registry.\n return ;\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. Storefront + Create-App over a localStorage app registry. Fully client-side.\n\nSTEP 1 — Install. `npx rr add app-store`. Ensure `@/features/app-store` resolves and Tailwind scans the slice folder.\n\nSTEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button input badge separator scroll-area switch tooltip`.\n\nSTEP 3 — Mount. `` (storefront) and/or `` (custom-app builder) — or register `appStoreApp` / `createAppApp` in an appshell manifest.\n\nSTEP 4 — Feed your launcher. `useInstalledApps()` returns AppDescriptor[] for everything installed/created (html → sandboxed iframe, command → console); `useDisabledIds()` filters your built-in manifest.\n\nSTEP 5 — Console exec (optional). `configureAppStoreExec({ mode:\"live\", exec:{run} })` so command/script apps run on a real one-shot shell (auth it like SSH).",
"tags": [
"app-store",
"registry",
"installer",
"dynamic-apps",
"launcher",
"ui"
]
},
{
"slug": "file-explorer",
"title": "File Explorer — Tree + CRUD + Breadcrumb",
"category": "os",
"description": "A complete, portable file-directory explorer: a collapsible folder TREE sidebar (lazy-loaded per dir), a responsive BREADCRUMB that auto-collapses to a dropdown, grid + list views with sort, multi-select, a right-click context menu, drag-and-drop (internal move + external file/folder upload), inline rename, and full CRUD (new folder, rename, cut/copy/paste, move, delete/trash, empty trash). The filesystem backend is INJECTED via a small FileExplorerAdapter (list/mkdir/remove/move/copy/upload/usage/rawUrl) — point it at a real API or use the bundled createMockAdapter() (a writable in-memory tree) so it works with zero backend. Opening a file fires an onOpenFile(path, entry) callback you wire to your own viewer/editor. Self-contained: imports only @/components/ui/* + @/lib/utils. Ported from os-vps (Topside) files manager. Pairs with appshell as the file-dir counterpart to a notion-style sidebar.",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add file-explorer",
"npmPackages": [],
"exampleCode": "\"use client\";\nimport { FileExplorer } from \"@/features/file-explorer\";\n\nexport default function FileExplorerDemo() {\n // No adapter prop → uses the backend from lib/backend.ts (mock by default):\n // a writable in-memory tree, so create/rename/delete/move/upload all work with\n // no backend. Flip FILE_EXPLORER_BACKEND to \"live\"/\"convex\" in that one file to\n // go real — nothing here changes. Pass adapter={…} to override per-instance.\n return (\n \n console.log(\"open file\", entry.name, path)}\n />\n
\n );\n}",
"agentRecipe": "Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. The slice is self-contained — imports only @/components/ui/* + @/lib/utils (cn). The filesystem backend is injected; nothing is hardcoded.\n\nSTEP 1 — Install. `npx rr add file-explorer`. Ensure `@/features/file-explorer` resolves in tsconfig paths and Tailwind's content globs scan the slice folder.\n\nSTEP 2 — shadcn + npm. `npx shadcn@latest add button input scroll-area separator dropdown-menu sheet`. npm: lucide-react.\n\nSTEP 3 — Mount it. Drop it in with NO adapter prop — it falls back to the backend configured in lib/backend.ts (the writable in-memory mock by default), so it works out of the box with realistic seed data and full CRUD:\n```tsx\n\"use client\";\nimport { FileExplorer } from \"@/features/file-explorer\";\nexport default function Page() {\n return (\n \n console.log(\"open\", path)} />\n
\n );\n}\n```\n\nSTEP 4 — The backend switch (ONE file). Go to a real filesystem without touching any component: edit `slices/file-explorer/lib/backend.ts` and set `FILE_EXPLORER_BACKEND = \"mock\" | \"live\" | \"convex\"` (or set env `NEXT_PUBLIC_FILE_EXPLORER_BACKEND`). \"live\" = REST host fs (os-vps /api/v1/fs shape, base via NEXT_PUBLIC_FILES_API_URL — see adapter/live.ts). \"convex\" = self-hosted Convex fs functions, PREPARED but inert until you wire your generated client + api in the switch (see adapter/convex.ts; the slice imports nothing from @convex so the build stays green even without Convex). You can still pass `adapter={…}` to override per-instance.\n\nSTEP 5 — Custom adapter. Implement FileExplorerAdapter: { mode: \"live\"|\"mock\"|\"readonly\", list(path), mkdir(path), remove(path), move(from,to), copy(from,to), upload(dest,files), usage(), rawUrl(path), write?(path,content) }. `list` returns { path, entries:[{name,kind,size,ext?}], roots?, parent? }. Set mode:\"readonly\" to show an inline notice instead of mutating. `rawUrl(path)` returns a bytes URL for image thumbnails (return \"\" to fall back to icons).\n\nThe container owns the box — render inside something with a height (h-dvh / h-full). It self-provides its adapter context; no extra provider needed.",
"tags": [
"files",
"file-manager",
"explorer",
"tree",
"breadcrumb",
"crud",
"sidebar",
"ui"
]
},
{
"slug": "appshell",
"title": "AppShell — Desktop + Mobile OS Shell",
"category": "os",
"description": "Generic, brand-free OS-style shell framework. One wrapper provider gives a project a macOS-style window manager (drag/snap/maximize, dock, menu bar, Spotlight) AND an iOS-style mobile surface (home pager, app library, control center, widgets), driven entirely by a manifest: brand, apps, features, surface regions, capabilities, persistence, keymap. Five shell features (search, inspector, notifications, control-center, widgets) are bundled as defineFeature() contributions inside the slice and mount via named s. Responsiveness is a single ResponsiveProvider + 4 DRY primitives (AppFrame, MasterDetail, ResponsiveToolbar, TouchList). Imports nothing project-specific — the consumer injects data/auth/AI through manifest.capabilities. Lifted from os-vps (Topside).",
"source": "rahmanef63/os-vps",
"install": "npx rahman-resources add appshell",
"npmPackages": [],
"exampleCode": "// ════════ VARIANT A — simplest: no URL sync (app/page.tsx) ════════\n// Mount AppShell full-bleed. Verified-working shape.\n\"use client\";\n\nimport { FileText } from \"lucide-react\";\nimport {\n AppShell,\n searchFeature,\n inspectorFeature,\n notificationsFeature,\n controlCenterFeature,\n widgetsFeature,\n type ShellManifest,\n} from \"@/features/appshell\";\nimport \"@/features/appshell/appshell.css\"; // REQUIRED — the shell's theme tokens\n\n// Your app. It receives { payload } (whatever opened the window).\nfunction NotesApp({ payload }: { payload?: unknown }) {\n return (\n \n Your app UI here. payload: {String(payload ?? \"—\")}\n
\n );\n}\n\n// ⚠ Capability hooks MUST return STABLE references (module-level / useMemo),\n// or Spotlight's search effect loops forever. Define once, return the same ref.\nconst NOOP = () => {};\nconst APPEARANCE = {\n theme: \"light\" as const,\n setTheme: NOOP, // wire to your theme store; also toggle `.dark` on \n device: \"auto\" as const,\n wallpaper: \"aurora\",\n};\n\nconst manifest: ShellManifest = {\n brand: { name: \"My OS\", logo: \"▲\", idleAppName: \"Finder\" },\n apps: [\n {\n id: \"notes\",\n title: \"Notes\",\n icon: FileText,\n gradient: \"linear-gradient(160deg,#ffd34d,#ff9a3d)\",\n defaultSize: { w: 560, h: 380 },\n multi: true, // several Notes windows at once\n load: async () => ({ default: NotesApp }),\n },\n // add more apps = add more entries (each lazy-loads its own bundle)\n ],\n features: [\n searchFeature,\n inspectorFeature,\n notificationsFeature,\n controlCenterFeature,\n widgetsFeature,\n ],\n routing: false, // set true ONLY if you add app/[[...slug]]/page.tsx (notFound _next)\n capabilities: {\n useAppearance: () => APPEARANCE,\n useCpuPercent: () => null,\n // optional, all must be stable refs:\n // useSearch: () => myStableSearchFn, // (q) => Promise\n // useSystemStats: () => myStatsOrNull,\n // useChat: () => myStableChatFn,\n // useServerToggle: () => myToggleOrNull,\n },\n};\n\nexport default function Page() {\n return ;\n}\n\n// ════════ VARIANT B — addressable URLs (deep-link /notes, back/forward) ════════\n// Same manifest as A, but: DROP `routing: false` (default is ON) and give each\n// app a `slug`. Mount from a CATCH-ALL route instead of app/page.tsx. The dock\n// uses History-API URL sync (window.history, NOT router.push) — handled inside\n// the slice; you only provide the catch-all route below.\n\n// 1) components/shell.tsx — the client mount (apps carry slugs, routing left ON)\n\"use client\";\nimport { FileText } from \"lucide-react\";\nimport {\n AppShell, searchFeature, inspectorFeature, notificationsFeature,\n controlCenterFeature, widgetsFeature, type ShellManifest,\n} from \"@/features/appshell\";\nimport \"@/features/appshell/appshell.css\";\n\nfunction NotesApp({ payload }: { payload?: unknown }) {\n return Notes · {String(payload ?? \"—\")}
;\n}\nconst NOOP = () => {};\nconst APPEARANCE = { theme: \"light\" as const, setTheme: NOOP, device: \"auto\" as const, wallpaper: \"aurora\" };\n\nconst manifest: ShellManifest = {\n brand: { name: \"My OS\", logo: \"▲\", idleAppName: \"Finder\" },\n apps: [\n {\n id: \"notes\",\n slug: \"notes\", // deep-link: /notes focuses (or opens) this app\n title: \"Notes\",\n icon: FileText,\n gradient: \"linear-gradient(160deg,#ffd34d,#ff9a3d)\",\n defaultSize: { w: 560, h: 380 },\n multi: true,\n load: async () => ({ default: NotesApp }),\n },\n ],\n features: [searchFeature, inspectorFeature, notificationsFeature, controlCenterFeature, widgetsFeature],\n // routing omitted => defaults TRUE => focused app + launch path mirror to the URL\n capabilities: { useAppearance: () => APPEARANCE, useCpuPercent: () => null },\n};\n\nexport function Shell() {\n return ;\n}\n\n// 2) app/[[...slug]]/page.tsx — ONE optional catch-all (server). No per-app pages;\n// the window manager stays client-side, only the URL is mirrored.\nimport { notFound } from \"next/navigation\";\nimport { Shell } from \"@/components/shell\";\n\nexport async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) {\n const { slug } = await params;\n return { title: slug?.[0] ? `${slug[0]} — My OS` : \"My OS\" };\n}\n\nexport default async function Page({ params }: { params: Promise<{ slug?: string[] }> }) {\n const { slug } = await params;\n // ⚠ MUST notFound() reserved paths: a missing /_next/* chunk has to 404 — else\n // this catch-all returns the app HTML with 200 (wrong MIME, no client recovery).\n if (slug?.[0] === \"_next\") notFound();\n return ;\n}",
"agentRecipe": "Stack required: Next 16 (App Router) + React 19 + Tailwind 4 + shadcn/ui. The slice is self-contained — it imports only @/components/ui/* + @/lib/utils (cn); everything project-specific arrives via the manifest. Follow ALL steps; the ⚠ ones are where installs break.\n\nSTEP 1 — Install. `npx rr add appshell` (alias `npx rahman-resources add appshell`). It copies to your slices dir. Ensure `@/features/appshell` resolves in tsconfig paths (point it at that dir), and that Tailwind's content globs SCAN the slice folder (else the shell renders unstyled).\n\nSTEP 2 — shadcn + npm deps. Add any missing shadcn primitives: `npx shadcn@latest add button tooltip scroll-area sheet drawer dialog alert-dialog dropdown-menu`. npm: lucide-react class-variance-authority clsx tailwind-merge vaul.\n\nSTEP 3 — ⚠ Theme. Import the slice's tokens ONCE in the root layout: `import \"@/features/appshell/appshell.css\"`. These are the glass/dock/window/wallpaper CSS variables the shell needs — they are NOT shadcn defaults, so skipping this = an unstyled, broken-looking shell. It pairs with your shadcn tokens (--background etc.). Dark mode = toggle the `.dark` class on (appshell.css ships light + dark).\n\nSTEP 4 — Mount full-bleed. Render from a CLIENT component that owns one full viewport (the page is h-dvh w-screen / the root). AppShell auto-picks the macOS desktop on wide viewports and the iOS surface on narrow — you write nothing extra for mobile.\n\nSTEP 5 — Build the ShellManifest:\n• brand: { name, logo (string or ReactNode), idleAppName?, wallpaper?: \"aurora\"|\"dusk\"|\"mist\"|\"noir\" }.\n• apps: AppDescriptor[] — { id, title, icon (a lucide-react icon component), gradient (a CSS gradient string for the glossy icon), load: async () => ({ default: YourAppComponent }), slug?, defaultSize?: {w,h}, multi?: true (spawn a new window per open, e.g. a file manager), noDock?: true }. Your app component receives props { payload }.\n• features: the fastest path is `features: DEFAULT_FEATURES` — the bundled default system-feature set (all five, generic + brand-free) exported from \"@/features/appshell\". Or import individually and list only what you want: searchFeature (⌘K Spotlight), inspectorFeature (⌘I AI/context panel), notificationsFeature (toasts + iOS dynamic island), controlCenterFeature (iOS control center), widgetsFeature (iOS Today widgets). The surfaces are slot-driven, so spreading/trimming DEFAULT_FEATURES just mounts/omits a feature — `features: [...DEFAULT_FEATURES.filter(f => f.id !== \"widgets\")]`.\n• capabilities: ShellCapabilities — your data/auth/AI injection seam. useAppearance() and useCpuPercent() are REQUIRED; useSearch/useSystemStats/useChat/useServerToggle are optional (defaults degrade gracefully). ⚠ CRITICAL: every capability hook MUST return a REFERENTIALLY STABLE value — a module-level const, or useMemo/useCallback. Returning a fresh object/closure each render makes Spotlight's search effect re-fire forever (\"Maximum update depth exceeded\"). e.g. define APPEARANCE once at module scope and `useAppearance: () => APPEARANCE`.\n• persistKey?: localStorage namespace for the saved window layout (default \"appshell:layout\").\n• routing?: defaults TRUE — it mirrors the focused app to the URL via the History API (window.history, NOT router.push). ⚠ If true you MUST add a catch-all route `app/[[...slug]]/page.tsx` that renders the mount AND calls notFound() for reserved paths (slug[0] === \"_next\"), or missing chunks return wrong-MIME 200s. SIMPLEST first install: set `routing: false` to skip the catch-all entirely.\n\nExtending: add an app = one manifest entry; add a shell feature = a new defineFeature({id, slots}) listed in features[]. No surface edits ever (open/closed). exampleCode ships BOTH variants: Variant A = routing:false mount in app/page.tsx (simplest); Variant B = catch-all app/[[...slug]]/page.tsx with routing on + app slugs for addressable, deep-linkable URLs (the catch-all MUST notFound() \"_next\").",
"tags": [
"shell",
"window-manager",
"desktop",
"mobile",
"responsive",
"framework",
"ui"
]
},
{
"slug": "convex-auth",
"title": "Convex Auth — Multi-Provider Sign-in",
"category": "auth",
"description": "@convex-dev/auth with Password (PBKDF2-SHA256 100k, self-hosted-friendly), Anonymous (guest), Google OAuth, and Resend magic-link. Ships a production SignInPage plus a presentational, props-driven AuthCard (v0.3) — choose `methods` (google, github, magic-link, password signin/signup tabs, phone OTP, anonymous) and render the card anywhere with different props; handlers default to a mock so it's interactive with zero wiring. i18n via labels. No Clerk.",
"source": "rahmanef63/resource-site",
"docsUrl": "https://labs.convex.dev/auth",
"install": "npm i @convex-dev/auth @auth/core resend",
"npmPackages": [
"@convex-dev/auth",
"@auth/core",
"resend"
],
"exampleCode": "// convex/auth.ts\nimport { convexAuth } from \"@convex-dev/auth/server\";\nimport Resend from \"@convex-dev/auth/providers/Resend\";\n\nexport const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({\n providers: [Resend({ from: \"auth@yourdomain.com\" })],\n});\n\n// app/proxy.ts (Next 16 — NOT middleware.ts)\nimport { convexAuthNextjsMiddleware } from \"@convex-dev/auth/nextjs/server\";\nexport default convexAuthNextjsMiddleware();",
"agentRecipe": "Run `rr add convex-auth`. Then create convex/auth.ts using the kitab pattern (Resend provider). Set env via `npx convex env set` for self-hosted.",
"tags": [
"auth",
"convex",
"password",
"magic-link",
"google",
"anonymous",
"no-clerk",
"pbkdf2"
]
},
{
"slug": "payment",
"title": "Payment — Indonesia PSP (DOKU · Midtrans)",
"category": "integrations",
"description": "Indonesia payment providers behind one slug + ONE shared Convex backend (convex/features/payment discriminates on a provider column: paymentOrders + paymentWebhookEvents, unprefixed). Two frontend variants: doku — DOKU Hosted Checkout + Direct (VA / QRIS / e-Wallet / PayLater), HMAC-SHA256 signed REST, signature-verified webhook, idempotent retries, dependency-free, server-side env only. midtrans — Snap hosted-modal checkout + orders history (needs npm midtrans-client + a NEXT_PUBLIC_MIDTRANS_CLIENT_KEY). Install one with `npx rr add payment doku|midtrans`, or both. A future stripe variant is reserved in the schema's provider union.",
"source": "rahmanef63/resource-site",
"docsUrl": "https://sandbox.doku.com/integration",
"install": "",
"npmPackages": [],
"exampleCode": "",
"agentRecipe": "Run `npx rr add payment` for both providers, or `npx rr add payment doku` / `midtrans`. Either variant copies the shared convex/features/payment backend. doku: Checkout (hosted) or Direct (single channel → VA/QRIS/deeplink); webhook /webhooks/doku verifies HMAC-SHA256; server-only, no NEXT_PUBLIC_*. midtrans: Snap.js + window.snap.pay(token); webhook verifies signature_key; needs NEXT_PUBLIC_MIDTRANS_CLIENT_KEY. Both patch paymentOrders by orderId; sandbox by default.",
"tags": [
"payment",
"checkout",
"indonesia",
"doku",
"midtrans",
"snap",
"qris",
"virtual-account",
"ewallet",
"psp"
]
},
{
"slug": "resend-newsletter",
"title": "Resend — Transactional & Newsletter",
"category": "integrations",
"description": "Transactional email + newsletter blast via Resend. Double opt-in flow + audience segmentation. Magic-link delivery for Convex Auth. Bundles the subscribers list backend (subscribe / confirm / unsubscribe / count) — formerly the standalone `subscribers` slice, merged here in v0.1.3.",
"source": "rahmanef63/resource-site",
"docsUrl": "https://resend.com/docs",
"install": "npm i resend react-email @react-email/components",
"npmPackages": [
"resend",
"react-email",
"@react-email/components"
],
"exampleCode": "",
"agentRecipe": "Run `npx rr add resend-newsletter`. Use Resend Audiences API for newsletter — store subscriber emails in Convex too for segmentation. Double opt-in: subscriber.create with status 'pending' → click link → status 'confirmed'.",
"tags": [
"email",
"newsletter",
"resend"
]
},
{
"slug": "ai-workspace",
"title": "AI Workspace — chat · studio · agents",
"category": "ai",
"description": "Three AI surfaces as shadcn-style variants — `npx rr add ai-workspace ` for one, or `npx rr add ai-workspace` for all + a switcher. Only the chat variant pulls a Convex backend (per-variant convex gating).\n\n • chat — floating + createAgenticChatSend: real function-calling over any ToolHost (@/shared/agentic), key-guarded, over convex/features/aiChat.\n • studio — single-prompt generation canvas (variation grid + version tree, Suno / Midjourney / Lovable pattern) + aiStudioTools so a shared agent can drive generations.\n • agents — autonomous-worker run dashboard + createAgentRunner(host) which drives the shared function-calling loop and records each tool_use as a RunStep trace.\n\nUse cases: support chatbot in a marketing site, AI generation product (image / code / text / audio), background workers (nightly audits, scheduled crawls, moderation). studio + agents are frontend-only — wire your own persistence.",
"source": "rahmanef63/resource-site",
"docsUrl": "https://sdk.vercel.ai/docs",
"install": "npm i ai @ai-sdk/anthropic @ai-sdk/openai",
"npmPackages": [
"ai",
"@ai-sdk/anthropic",
"@ai-sdk/openai"
],
"exampleCode": "",
"agentRecipe": "Run `npx rr add ai-workspace ` for one surface, or `npx rr add ai-workspace` for all. chat: mount . studio: mount + drive via aiStudioTools. agents: mount + trigger via createAgentRunner(host).",
"tags": [
"ai",
"ai:chatbot",
"ai:studio",
"ai:agent",
"agent-mode",
"tool-calls",
"streaming",
"generation",
"async",
"traces",
"multimodal"
]
},
{
"slug": "ai-admin",
"title": "AI Admin — Console (Instructions · Skills · Tools · Agents · Providers)",
"category": "ai",
"description": "Central operator console for the whole AI stack. Every other ai-* feature reads its registries from here. Tabs ordered to match the build-flow:\n\n 1. Providers — register Anthropic / OpenAI / Google / Mistral / Ollama (API keys AES-encrypted at rest)\n 2. Models — per-provider catalog (capabilities, context window, pricing)\n 3. Instructions — custom system-prompt library (Claude Projects-style)\n 4. Skills — named instruction + model default + tool defaults (consumed by chat + studio)\n 5. Tools — JSON-schema function specs + impl (http / convex / shell) + sandbox flag\n 6. Agents — skill × model × tools × max-iter (consumed by ai-agents)\n 7. Budgets — per-workspace cost caps + alerts + hard kill\n 8. Audit — every AI call: actor / agent / tokens / cost / latency / outcome\n\nIncludes Create-Agent / Create-Skill / Create-Tool / Create-Instruction wizards.",
"source": "rahmanef63/resource-site",
"install": "",
"npmPackages": [],
"exampleCode": "",
"agentRecipe": "Run `npx rr add ai-admin`. Adds an `AI` section to the admin-panel ADMIN_SECTIONS registry. Sub-tabs ordered to match build-flow: Providers → Models → Instructions → Skills → Tools → Agents → Budgets → Audit. Includes Create-* wizards for instructions / skills / tools / agents. API keys AES-encrypted via AI_ADMIN_ENCRYPTION_KEY env. The instruction / skill / tool / agent registries are SSOTs consumed by every ai-* consumer slice (chat + studio + agents).",
"tags": [
"ai",
"ai:admin",
"instructions",
"skills",
"tools",
"agents",
"providers",
"models",
"budgets",
"audit"
]
},
{
"slug": "ai-router",
"title": "AI Router — Backend Provider Proxy",
"category": "ai",
"description": "Backend infrastructure (no UI). Single proxy that every other ai-* feature calls. Tier-routed — nano (Haiku) for classification, mid (Sonnet) for chat, flagship (Opus) for deep reasoning. Per-call usage log + cost guard. Works with direct provider keys or OpenRouter umbrella.\n\nNot something you mount — installed automatically as a peer when you add ai-workspace.",
"source": "rahmanef63/resource-site",
"docsUrl": "https://sdk.vercel.ai/docs",
"install": "npm i ai @openrouter/ai-sdk-provider",
"npmPackages": [
"ai",
"@openrouter/ai-sdk-provider"
],
"exampleCode": "",
"agentRecipe": "Run `npx rr add ai-router`. Wrap every AI call through ai-router. Tiers: nano = quick classification (spam-flag, headline-suggest), mid = chat / draft, flagship = methodology-review / deep-think. Token usage logs to ai_usage table for the cost dashboard.",
"tags": [
"ai",
"ai:backend",
"tier-routing",
"cost-guard"
]
},
{
"slug": "vector-search",
"title": "Convex Vector Search",
"category": "data",
"description": "Embeddings-based search via Convex's built-in vector index. Embed via OpenAI text-embedding-3-small (1536-dim), query via vectorIndex().",
"source": "rahmanef63/resource-site",
"docsUrl": "https://docs.convex.dev/database/vector-search",
"install": "npm i openai",
"npmPackages": [
"openai"
],
"exampleCode": "",
"agentRecipe": "Run `npx rr add vector-search`. Add embedding field + vectorIndex per searchable table. Re-embed on upsert via Convex action. Cache embeddings — don't re-call OpenAI on every read.",
"tags": [
"search",
"vector",
"embeddings",
"convex",
"rag"
]
},
{
"slug": "cal-com-booking",
"title": "Cal.com Booking",
"category": "data",
"description": "Embedded Cal.com booking widget + webhook receiver to mirror bookings into Convex.",
"source": "rahmanef63/resource-site",
"docsUrl": "https://cal.com/docs/integrations/web-app/embed",
"install": "npm i @calcom/embed-react",
"npmPackages": [
"@calcom/embed-react"
],
"exampleCode": "",
"agentRecipe": "Run `npx rr add cal-com-booking`. Embed Cal.com via @calcom/embed-react di halaman services. Configure webhook di Cal.com dashboard → POST ke /api/cal-webhook → upsert booking di Convex.",
"tags": [
"data",
"scheduling",
"cal-com",
"bookings"
]
},
{
"slug": "command-menu",
"title": "Command Menu",
"category": "ui",
"description": "Renderless ⌘K command palette + generic search modal. Consumer supplies CommandGroup[] + onSelect + label bag; slice owns dialog chrome, ⌘K hotkey, MRU history. Pulled UP from notion-page-clone's command-palette renderless surface (Wave N+3.7) — Nosion adapters dropped at the kitab boundary.",
"source": "notion-page-clone (consumerVersion 0.3.0) + earlier superspace facade",
"docsUrl": "https://cmdk.paco.me",
"install": "npm i cmdk",
"npmPackages": [
"cmdk"
],
"exampleCode": "",
"agentRecipe": "Run `npx rr add command-menu`. Wire at the dashboard shell. Build groups from your feature registry; each item.onSelect handles navigation. Use for the search dialog — see slice README.md for adapter shapes.",
"tags": [
"ui",
"palette",
"cmd-k",
"navigation",
"keyboard",
"search",
"notion-like"
]
},
{
"slug": "motion-primitives",
"title": "Motion Primitives (8)",
"category": "ui",
"description": "Eight ready-to-style motion components: marquee, kinetic-heading, magnetic, cursor-spotlight, stat-counter, reading-progress, grain, lightbox. Framer-Motion-powered, tree-shakeable. Facade slice — pulls from template-base/frontend/slices/motion-primitives.",
"source": "rahmanef.com",
"docsUrl": "",
"install": "npm i framer-motion",
"npmPackages": [
"framer-motion"
],
"exampleCode": "",
"agentRecipe": "Run `npx rr add motion-primitives`. Each primitive is independently importable from @/features/motion-primitives. Use marquee for logo strips, kinetic-heading for hero text, magnetic for CTA buttons, cursor-spotlight for hover-reveal panels, stat-counter for animated numbers, reading-progress for blog top bar, grain for film texture, lightbox for image gallery.",
"tags": [
"ui",
"motion",
"animation",
"marquee",
"framer-motion"
]
},
{
"slug": "responsive-dialog",
"title": "Responsive Dialog (Sheet ↔ Modal)",
"category": "ui",
"description": "ResponsiveDialog — auto-switches between bottom Sheet (mobile) and centered Dialog (desktop) at the md breakpoint. Same API as shadcn Dialog. Kitab forbids raw