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

paulkinlan

veo-feed

Public
Like
veo-feed
Home
Code
9
backend
3
frontend
5
shared
2
.vtignore
AGENTS.md
README.md
deno.json
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
/
README.md
Code
/
README.md
Search
10/8/2025
Viewing readonly version of main branch: v419
View latest version
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

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)}
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.