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

paulkinlan

veo-feed

Public
Like
veo-feed
Home
Code
11
backend
3
frontend
5
shared
2
.vtignore
AGENTS.md
HACKERNEWS_CRON_SETUP.md
README.md
deno.json
C
hackernews-cron.ts
test-db.ts
test-polling.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
/
Code
/
Search
index.ts
https://paulkinlan--5a85bb5e9f7911f0be2e0224a6c84d84.web.val.run
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.

HTTP
  • index.ts
    paulkinlan--5a…84.web.val.run
Cron
  • hackernews-cron.ts
Code
backendfrontendshared.vtignoreAGENTS.mdHACKERNEWS_CRON_SETUP.mdREADME.mddeno.json
C
hackernews-cron.ts
test-db.tstest-polling.ts
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
Β© 2025 Val Town, Inc.