• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
paulkinlan

paulkinlan

veo-feed

Public
Like
veo-feed
Home
Code
13
backend
3
frontend
5
shared
2
.vtignore
AGENTS.md
HACKERNEWS_CRON_SETUP.md
README.md
C
cleanup-cron.ts
deno.json
C
hackernews-cron.ts
test-db.ts
test-polling.ts
C
video-processing-cron.ts
Branches
1
Pull requests
Remixes
History
Environment variables
4
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
10/21/2025
README.md

TikTok-Style Video Feed Generator

A web application that converts URLs into TikTok-style videos using AI-generated summaries and screenshots.

Features

  • Convert any URL into a video using Veo AI
  • Fetch markdown content and screenshots from URLs
  • Generate AI summaries using Gemini API
  • TikTok-style scrolling feed with scroll-snap
  • Auto-play videos when scrolled into view
  • Audio controls with mute/unmute toggle
  • Admin interface for prompt management
  • Configurable video generation prompts (no redeploy required)
  • Video re-processing with updated prompts
  • Version tracking for reprocessed videos
  • HackerNews integration - Automated cron job to generate videos for top stories

Project Structure

β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ index.ts           # Main Hono server
β”‚   β”œβ”€β”€ routes/
β”‚   β”‚   β”œβ”€β”€ videos.ts      # Video generation endpoints
β”‚   β”‚   └── static.ts      # Static file serving
β”‚   └── database/
β”‚       β”œβ”€β”€ migrations.ts  # SQLite schema
β”‚       └── queries.ts     # Database operations
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ index.html         # Main HTML template
β”‚   β”œβ”€β”€ index.tsx          # React app entry point
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ App.tsx        # Main app component
β”‚   β”‚   β”œβ”€β”€ VideoFeed.tsx  # TikTok-style feed
β”‚   β”‚   β”œβ”€β”€ VideoCard.tsx  # Individual video component
β”‚   β”‚   └── URLInput.tsx   # URL input form
β”‚   └── style.css          # Custom styles
└── shared/
    β”œβ”€β”€ types.ts           # Shared TypeScript types
    └── utils.ts           # Shared utility functions

API Endpoints

Public Endpoints

  • POST /api/videos/generate - Generate video from URL
  • GET /api/videos - Get all generated videos
  • GET /api/videos/:id - Get specific video
  • DELETE /api/videos/:id - Delete video
  • POST /api/videos/poll - Poll for processing video updates

Admin Endpoints (Password Protected)

  • GET /api/admin/prompt - Get current default video prompt
  • PUT /api/admin/prompt - Update default video prompt
  • GET /api/admin/videos - Get all videos for admin management
  • POST /api/admin/reprocess - Reprocess selected videos with new prompt

Environment Variables

  • GEMINI_API_KEY - Google Gemini API key for summaries (required)
  • ADMIN_PASSWORD - Password for admin interface access (required for admin features)
  • VEO_API_KEY - Veo API key for video generation (optional - currently using placeholder)

Setup Instructions

  1. Get a Gemini API key from Google AI Studio
  2. Add the GEMINI_API_KEY environment variable in Val Town
  3. The Veo integration is currently a placeholder - you'll need to implement the actual Veo API calls
  4. The application uses external services:
    • https://markdownify.val.run/ for converting web pages to markdown
    • https://screenshot.val.run/ for taking page screenshots

Usage

Video Generation

  1. Enter URLs in the input form
  2. Videos are generated automatically using:
    • Markdown content from the URL
    • Screenshot of the page
    • AI-generated summary
    • Configurable video generation prompt
  3. Scroll through the TikTok-style feed to view videos

Admin Interface

  1. Navigate to /admin in your browser
  2. Enter the admin password (set via ADMIN_PASSWORD environment variable)
  3. Edit the default video generation prompt
  4. Select videos to reprocess with the updated prompt
  5. Track video versions and regenerations

Admin Features

  • Prompt Editor: Edit the default video generation prompt without redeploying
  • Video Selector: Choose specific videos or all videos to reprocess
  • Version Tracking: Each reprocessed video creates a new version while preserving the original
  • Bulk Operations: Reprocess multiple videos at once with the updated prompt

⚠️ CRITICAL TECHNICAL REQUIREMENTS

Google Generative AI Package

  • NEVER USE: https://esm.sh/@google/generative-ai@0.1.3
  • ALWAYS USE: https://esm.sh/@google/genai
  • Correct Import: import { GoogleGenAI } from "https://esm.sh/@google/genai";
  • Correct Initialization:
    const genAI = new GoogleGenAI({ apiKey: Deno.env.get("GEMINI_API_KEY") || "", });
  • Correct API Call:
    const result = await genAI.models.generateContent({ model: "gemini-flash-latest", contents: summaryPrompt, }); const summary = result.text;

External Services

  • Markdown Service: https://markdownifyurl.val.run/?url=${encodeURIComponent(url)}
  • Screenshot Service: https://screenshot.val.run/?url=${encodeURIComponent(url)}

Original prompt

Create a funky, engaging video overview of this web page content.
Make it visually interesting with dynamic transitions, colorful graphics, and modern design elements.
The video should be vertical (9:16 aspect ratio) like a TikTok video.
Include text overlays highlighting key points from the summary.
Use the screenshot as a reference for the original page design but make it more dynamic and engaging.
Keep it under 30 seconds and make it scroll-friendly for social media.

HackerNews Integration

This project includes an automated cron job that fetches top HackerNews stories and generates videos for them.

Features

  • Runs every hour automatically
  • Processes top 10 stories (configurable)
  • Only processes external URLs (skips Ask HN, Show HN text posts)
  • Prevents duplicates - never processes the same URL twice
  • Uses your default video generation prompt
  • Cost-controlled with configurable limits

Setup

For detailed setup instructions, see HACKERNEWS_CRON_SETUP.md

Quick Start:

  1. Upload hackernews-cron.ts to Val.Town as a new Val
  2. Set the BASE_URL environment variable to your deployed application URL
  3. Schedule the Val to run every hour (0 * * * *)
  4. Adjust TOP_STORIES_LIMIT in the code to control how many stories to process

The cron job will automatically:

  • Fetch the latest HackerNews top stories
  • Filter for new URLs not already in your database
  • Trigger video generation for each new URL
  • Log detailed processing results

Videos generated by the cron job appear in your feed just like manually submitted URLs.

FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
Β© 2026 Val Town, Inc.