@viralspin/mcp 0.1.0 → 0.2.0

package/engine/src/KineticText.tsx

@@ -0,0 +1,253 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  interpolate,
+  spring,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+
+export type KineticEffect = "typing" | "billboard_flip" | "isometric";
+export type KineticStyle = "terminal" | "cinematic" | "minimal";
+
+export interface CameraTransform {
+  rotateX: number;
+  rotateY: number;
+  rotateZ: number;
+  translateZ: number;
+}
+
+export interface KineticTextProps {
+  text: string;
+  effect: KineticEffect;
+  style: KineticStyle;
+  fontSize: number;
+  format: "9x16" | "16x9" | "1x1";
+  fps: number;
+  totalFrames: number;
+  camera: CameraTransform;
+}
+
+export const EFFECT_CAMERA_DEFAULTS: Record<KineticEffect, CameraTransform> = {
+  typing:        { rotateX: 8,  rotateY: 0,   rotateZ: 0,   translateZ: -120 },
+  billboard_flip: { rotateX: 0, rotateY: 0,   rotateZ: 0,   translateZ: 0    },
+  isometric:     { rotateX: 55, rotateY: 0,   rotateZ: -45, translateZ: -80  },
+};
+
+const STYLE_THEMES = {
+  terminal:  { bg: "#0d1117",     text: "#00ff88", font: "'Courier New', 'Consolas', monospace", cursor: true,  vignette: false, scanlines: true  },
+  cinematic: { bg: "#000000",     text: "#ffffff", font: "'Inter', 'Segoe UI', sans-serif",      cursor: false, vignette: true,  scanlines: false },
+  minimal:   { bg: "transparent", text: "#ffffff", font: "'Inter', 'Segoe UI', sans-serif",      cursor: false, vignette: false, scanlines: false },
+};
+
+export const DEFAULT_KINETIC: KineticTextProps = {
+  text: "create_video_assembly --aroll talk.mp4",
+  effect: "typing",
+  style: "terminal",
+  fontSize: 72,
+  format: "9x16",
+  fps: 30,
+  totalFrames: 150,
+  camera: EFFECT_CAMERA_DEFAULTS.typing,
+};
+
+// ─── Typing effect ────────────────────────────────────────────────────────────
+const TypingText: React.FC<{
+  text: string;
+  frame: number;
+  totalFrames: number;
+  theme: typeof STYLE_THEMES.terminal;
+  fontSize: number;
+}> = ({ text, frame, totalFrames, theme, fontSize }) => {
+  const typingFrames = Math.floor(totalFrames * 0.72);
+  const visibleChars = Math.min(text.length, Math.floor((frame / typingFrames) * text.length));
+  const isTyping = visibleChars < text.length;
+  const showCursor = theme.cursor && (isTyping || frame % 30 < 20);
+
+  return (
+    <div style={{
+      fontFamily: theme.font,
+      fontSize,
+      fontWeight: 700,
+      color: theme.text,
+      lineHeight: 1.6,
+      whiteSpace: "pre-wrap",
+      wordBreak: "break-word",
+      maxWidth: "85%",
+      textShadow: theme.text === "#00ff88"
+        ? `0 0 20px ${theme.text}99, 0 0 7px ${theme.text}`
+        : "0 2px 14px rgba(0,0,0,0.9)",
+      letterSpacing: "0.02em",
+    }}>
+      {text.slice(0, visibleChars)}
+      {showCursor && (
+        <span style={{ opacity: frame % 15 < 9 ? 1 : 0 }}>▋</span>
+      )}
+    </div>
+  );
+};
+
+// ─── Billboard flip effect ────────────────────────────────────────────────────
+const BillboardFlipText: React.FC<{
+  text: string;
+  frame: number;
+  fps: number;
+  theme: typeof STYLE_THEMES.terminal;
+  fontSize: number;
+}> = ({ text, frame, fps, theme, fontSize }) => {
+  const words = text.split(/\s+/);
+  const stagger = 14;
+
+  return (
+    <div style={{
+      fontFamily: theme.font,
+      fontSize,
+      fontWeight: 700,
+      color: theme.text,
+      display: "flex",
+      flexWrap: "wrap",
+      gap: `${Math.round(fontSize * 0.28)}px`,
+      justifyContent: "center",
+      maxWidth: "85%",
+      textShadow: "0 2px 24px rgba(0,0,0,0.85)",
+    }}>
+      {words.map((word, i) => {
+        const elapsed = Math.max(0, frame - i * stagger);
+        const s = spring({ frame: elapsed, fps, config: { damping: 14, stiffness: 140, mass: 0.6 } });
+        const tz = interpolate(s, [0, 1], [-800, 0]);
+        const ry = interpolate(s, [0, 1], [90, 0]);
+        const opacity = interpolate(elapsed, [0, 6], [0, 1], { extrapolateRight: "clamp" });
+        return (
+          <span key={i} style={{
+            display: "inline-block",
+            transform: `translateZ(${tz}px) rotateY(${ry}deg)`,
+            opacity,
+          }}>
+            {word}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+// ─── Isometric extrude effect ─────────────────────────────────────────────────
+const IsometricText: React.FC<{
+  text: string;
+  frame: number;
+  fps: number;
+  theme: typeof STYLE_THEMES.terminal;
+  fontSize: number;
+}> = ({ text, frame, fps, theme, fontSize }) => {
+  const chars = text.split("");
+  const stagger = 3;
+  const shadowColor = theme.text === "#00ff88" ? "#006633" : "rgba(0,0,0,0.55)";
+
+  return (
+    <div style={{
+      fontFamily: theme.font,
+      fontSize,
+      fontWeight: 900,
+      color: theme.text,
+      display: "flex",
+      flexWrap: "wrap",
+      justifyContent: "center",
+      maxWidth: "85%",
+      letterSpacing: "0.06em",
+    }}>
+      {chars.map((char, i) => {
+        const elapsed = Math.max(0, frame - i * stagger);
+        const s = spring({ frame: elapsed, fps, config: { damping: 18, stiffness: 200, mass: 0.5 } });
+        const ty = interpolate(s, [0, 1], [80, 0]);
+        const opacity = interpolate(elapsed, [0, 8], [0, 1], { extrapolateRight: "clamp" });
+        return (
+          <span key={i} style={{
+            display: "inline-block",
+            transform: `translateY(${ty}px)`,
+            opacity,
+            textShadow: `0 5px 0 ${shadowColor}, 0 2px 12px rgba(0,0,0,0.7)`,
+          }}>
+            {char === " " ? " " : char}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+// ─── Main composition ─────────────────────────────────────────────────────────
+export const KineticText: React.FC<KineticTextProps> = ({
+  text,
+  effect,
+  style,
+  fontSize,
+  camera,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+  const theme = STYLE_THEMES[style];
+
+  // Camera eases from identity to target over first 60% of duration
+  const camP = interpolate(frame, [0, Math.floor(durationInFrames * 0.6)], [0, 1], {
+    extrapolateRight: "clamp",
+    // cubic ease-in-out
+    easing: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
+  });
+  const cameraTransform = [
+    `rotateX(${camera.rotateX * camP}deg)`,
+    `rotateY(${camera.rotateY * camP}deg)`,
+    `rotateZ(${camera.rotateZ * camP}deg)`,
+    `translateZ(${camera.translateZ * camP}px)`,
+  ].join(" ");
+
+  const prefix = style === "terminal" ? "$ " : "";
+
+  const textNode = (() => {
+    if (effect === "typing") {
+      return (
+        <TypingText
+          text={prefix + text}
+          frame={frame}
+          totalFrames={durationInFrames}
+          theme={theme}
+          fontSize={fontSize}
+        />
+      );
+    }
+    if (effect === "billboard_flip") {
+      return <BillboardFlipText text={text} frame={frame} fps={fps} theme={theme} fontSize={fontSize} />;
+    }
+    return <IsometricText text={text} frame={frame} fps={fps} theme={theme} fontSize={fontSize} />;
+  })();
+
+  return (
+    <AbsoluteFill style={{ background: theme.bg, perspective: "1200px" }}>
+      {/* CRT scanlines for terminal style */}
+      {theme.scanlines && (
+        <AbsoluteFill style={{
+          backgroundImage: "repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 4px)",
+          pointerEvents: "none",
+          zIndex: 10,
+        }} />
+      )}
+      {/* Radial vignette for cinematic style */}
+      {theme.vignette && (
+        <AbsoluteFill style={{
+          background: "radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.8) 100%)",
+          pointerEvents: "none",
+          zIndex: 10,
+        }} />
+      )}
+      {/* 3D camera layer — no overflow:hidden here, that flattens Z-space */}
+      <AbsoluteFill style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transformStyle: "preserve-3d",
+        transform: cameraTransform,
+      }}>
+        {textNode}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/engine/src/Root.tsx

@@ -0,0 +1,39 @@
+import { Composition } from "remotion";
+import { Assembly, DEFAULT_EDIT, EditData } from "./Assembly";
+import { KineticText, DEFAULT_KINETIC, KineticTextProps } from "./KineticText";
+
+const dimsFor = (fmt: EditData["format"]) =>
+  fmt === "1x1" ? { width: 1080, height: 1080 } : fmt === "16x9" ? { width: 1920, height: 1080 } : { width: 1080, height: 1920 };
+
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="Assembly"
+        component={Assembly}
+        durationInFrames={DEFAULT_EDIT.totalFrames}
+        fps={DEFAULT_EDIT.fps}
+        {...dimsFor(DEFAULT_EDIT.format)}
+        defaultProps={DEFAULT_EDIT}
+        calculateMetadata={({ props }) => ({
+          durationInFrames: props.totalFrames,
+          fps: props.fps,
+          ...dimsFor(props.format),
+        })}
+      />
+      <Composition
+        id="KineticText"
+        component={KineticText}
+        durationInFrames={DEFAULT_KINETIC.totalFrames}
+        fps={DEFAULT_KINETIC.fps}
+        {...dimsFor(DEFAULT_KINETIC.format)}
+        defaultProps={DEFAULT_KINETIC}
+        calculateMetadata={({ props }: { props: KineticTextProps }) => ({
+          durationInFrames: props.totalFrames,
+          fps: props.fps,
+          ...dimsFor(props.format),
+        })}
+      />
+    </>
+  );
+};

package/engine/src/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);

package/engine/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "lib": ["ESNext", "DOM"]
+  },
+  "include": ["src"]
+}

package/package.json

@@ -1,29 +1,29 @@
-{
-  "name": "@viralspin/mcp",
-  "version": "0.1.0",
-  "description": "ViralSpin MCP server — publish local videos and carousels to TikTok, Instagram, and YouTube from Claude Code",
-  "main": "dist/index.js",
-  "bin": {
-    "viralspin-mcp": "dist/index.js"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "ts-node src/index.ts",
-    "start": "node dist/index.js",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": ["mcp", "viralspin", "tiktok", "instagram", "youtube", "social-media"],
-  "license": "MIT",
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.0.0",
-    "form-data": "^4.0.0"
-  },
-  "devDependencies": {
-    "@types/form-data": "^2.5.0",
-    "@types/node": "^20.0.0",
-    "typescript": "^5.0.0"
-  },
-  "engines": {
-    "node": ">=18"
-  }
-}
+{
+  "name": "@viralspin/mcp",
+  "version": "0.2.0",
+  "description": "ViralSpin MCP server — publish local videos and carousels to TikTok, Instagram, and YouTube from Claude Code",
+  "main": "dist/index.js",
+  "bin": {
+    "viralspin-mcp": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "ts-node src/index.ts",
+    "start": "node dist/index.js",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": ["mcp", "viralspin", "tiktok", "instagram", "youtube", "social-media"],
+  "license": "MIT",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "form-data": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/form-data": "^2.5.0",
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/client.ts

@@ -1,80 +1,119 @@
-import FormData from "form-data";
-import fs from "fs";
-import path from "path";
-
-const API_URL = (process.env.VIRALSPIN_API_URL || "https://viralspinbackend.onrender.com").replace(/\/$/, "");
-const API_KEY = process.env.VIRALSPIN_API_KEY || "";
-
-if (!API_KEY) {
-  process.stderr.write("[viralspin-mcp] Warning: VIRALSPIN_API_KEY not set\n");
-}
-
-function headers(extra: Record<string, string> = {}): Record<string, string> {
-  return { "X-API-Key": API_KEY, ...extra };
-}
-
-async function apiFetch<T>(endpoint: string, init: RequestInit = {}): Promise<T> {
-  const url = `${API_URL}${endpoint}`;
-  const resp = await fetch(url, {
-    ...init,
-    headers: { ...(init.headers as Record<string, string> ?? {}), ...headers() },
-  });
-  if (!resp.ok) {
-    const text = await resp.text().catch(() => "");
-    let detail = text;
-    try { detail = JSON.parse(text).detail ?? text; } catch {}
-    throw new Error(`API error ${resp.status}: ${detail}`);
-  }
-  return resp.json() as Promise<T>;
-}
-
-export function get<T>(endpoint: string): Promise<T> {
-  return apiFetch<T>(endpoint, { method: "GET" });
-}
-
-export function post<T>(endpoint: string, body: unknown): Promise<T> {
-  return apiFetch<T>(endpoint, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body),
-  });
-}
-
-export function del<T>(endpoint: string, body?: unknown): Promise<T> {
-  return apiFetch<T>(endpoint, {
-    method: "DELETE",
-    headers: body ? { "Content-Type": "application/json" } : {},
-    body: body ? JSON.stringify(body) : undefined,
-  });
-}
-
-/** Upload one or more local files. Returns { url, storage_path } or { urls, storage_paths } */
-export async function uploadFiles(filePaths: string[]): Promise<{ urls: string[]; storage_paths: string[] }> {
-  const form = new FormData();
-  const fieldName = filePaths.length === 1 ? "file" : "files";
-  for (const fp of filePaths) {
-    form.append(fieldName, fs.createReadStream(fp), path.basename(fp));
-  }
-
-  const resp = await fetch(`${API_URL}/v1/media/upload`, {
-    method: "POST",
-    headers: { "X-API-Key": API_KEY, ...form.getHeaders() },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    body: form as any,
-  });
-  if (!resp.ok) {
-    const text = await resp.text().catch(() => "");
-    let detail = text;
-    try { detail = JSON.parse(text).detail ?? text; } catch {}
-    throw new Error(`Upload failed ${resp.status}: ${detail}`);
-  }
-  const data = await resp.json() as { url?: string; storage_path?: string; urls?: string[]; storage_paths?: string[] };
-  if (data.urls) return { urls: data.urls, storage_paths: data.storage_paths! };
-  return { urls: [data.url!], storage_paths: [data.storage_path!] };
-}
-
-/** Delete uploaded files from storage (cleanup after publish) */
-export async function deleteFiles(storagePaths: string[]): Promise<void> {
-  if (!storagePaths.length) return;
-  await del(`/v1/media/${storagePaths[0]}`, storagePaths.length > 1 ? { storage_paths: storagePaths } : undefined);
-}
+import fs from "fs";
+import path from "path";
+
+const API_URL = (process.env.VIRALSPIN_API_URL || "https://viralspinbackend.onrender.com").replace(/\/$/, "");
+// Python backend — Higgsfield, review-sessions, OAuth, narrative-render
+const PY_API_URL = (process.env.VIRALSPIN_PY_API_URL || "https://viralspin-api.onrender.com").replace(/\/$/, "");
+const API_KEY = process.env.VIRALSPIN_API_KEY || "";
+// OAuth token takes precedence over API key (set after "Sign in with ViralSpin" flow)
+const OAUTH_TOKEN = process.env.VIRALSPIN_OAUTH_TOKEN || "";
+
+if (!API_KEY && !OAUTH_TOKEN) {
+  process.stderr.write("[viralspin-mcp] Warning: Neither VIRALSPIN_API_KEY nor VIRALSPIN_OAUTH_TOKEN is set\n");
+}
+
+function headers(extra: Record<string, string> = {}): Record<string, string> {
+  // OAuth Bearer token (from "Sign in with ViralSpin" flow) takes priority
+  if (OAUTH_TOKEN) {
+    return { "Authorization": `Bearer ${OAUTH_TOKEN}`, ...extra };
+  }
+  // Legacy API key — retained for backward compatibility with personal installs
+  return { "X-API-Key": API_KEY, ...extra };
+}
+
+async function apiFetch<T>(endpoint: string, init: RequestInit = {}, base = API_URL): Promise<T> {
+  const url = `${base}${endpoint}`;
+  const resp = await fetch(url, {
+    ...init,
+    headers: { ...(init.headers as Record<string, string> ?? {}), ...headers() },
+  });
+  if (!resp.ok) {
+    const text = await resp.text().catch(() => "");
+    let detail = text;
+    try { detail = JSON.parse(text).detail ?? text; } catch {}
+    throw new Error(`API error ${resp.status}: ${detail}`);
+  }
+  return resp.json() as Promise<T>;
+}
+
+export function get<T>(endpoint: string): Promise<T> {
+  return apiFetch<T>(endpoint, { method: "GET" });
+}
+
+export function post<T>(endpoint: string, body: unknown): Promise<T> {
+  return apiFetch<T>(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  });
+}
+
+/** Python backend helpers — for routes that live in viralspin-api (Higgsfield, OAuth, etc.) */
+export function pyGet<T>(endpoint: string): Promise<T> {
+  return apiFetch<T>(endpoint, { method: "GET" }, PY_API_URL);
+}
+
+export function pyPost<T>(endpoint: string, body: unknown): Promise<T> {
+  return apiFetch<T>(endpoint, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body),
+  }, PY_API_URL);
+}
+
+export function del<T>(endpoint: string, body?: unknown): Promise<T> {
+  return apiFetch<T>(endpoint, {
+    method: "DELETE",
+    headers: body ? { "Content-Type": "application/json" } : {},
+    body: body ? JSON.stringify(body) : undefined,
+  });
+}
+
+/** Upload one or more local files. Returns { url, storage_path } or { urls, storage_paths } */
+export async function uploadFiles(filePaths: string[]): Promise<{ urls: string[]; storage_paths: string[] }> {
+  // Use the native Web FormData + Blob (Node 18+). The npm 'form-data' package
+  // streams in a way native fetch can't serialize correctly, which previously
+  // caused Busboy on the backend to fail with "Failed to parse upload".
+  const form = new FormData();
+  const fieldName = filePaths.length === 1 ? "file" : "files";
+  for (const fp of filePaths) {
+    const buffer = await fs.promises.readFile(fp);
+    const ext = path.extname(fp).toLowerCase();
+    const mime =
+      ext === ".png" ? "image/png" :
+      ext === ".jpg" || ext === ".jpeg" ? "image/jpeg" :
+      ext === ".gif" ? "image/gif" :
+      ext === ".webp" ? "image/webp" :
+      ext === ".mp4" ? "video/mp4" :
+      ext === ".mov" ? "video/quicktime" :
+      ext === ".webm" ? "video/webm" :
+      "application/octet-stream";
+    const blob = new Blob([buffer], { type: mime });
+    form.append(fieldName, blob, path.basename(fp));
+  }
+
+  const authHeader: Record<string, string> = OAUTH_TOKEN
+    ? { "Authorization": `Bearer ${OAUTH_TOKEN}` }
+    : { "X-API-Key": API_KEY };
+  const resp = await fetch(`${API_URL}/v1/media/upload`, {
+    method: "POST",
+    // Don't set Content-Type manually — fetch will set it with the correct multipart boundary.
+    headers: authHeader,
+    body: form,
+  });
+  if (!resp.ok) {
+    const text = await resp.text().catch(() => "");
+    let detail = text;
+    try { detail = JSON.parse(text).detail ?? text; } catch {}
+    throw new Error(`Upload failed ${resp.status}: ${detail}`);
+  }
+  const data = await resp.json() as { url?: string; storage_path?: string; urls?: string[]; storage_paths?: string[] };
+  if (data.urls) return { urls: data.urls, storage_paths: data.storage_paths! };
+  return { urls: [data.url!], storage_paths: [data.storage_path!] };
+}
+
+/** Delete uploaded files from storage (cleanup after publish) */
+export async function deleteFiles(storagePaths: string[]): Promise<void> {
+  if (!storagePaths.length) return;
+  await del(`/v1/media/${storagePaths[0]}`, storagePaths.length > 1 ? { storage_paths: storagePaths } : undefined);
+}