DEV Community: Nishchay

Programmatic Video with Remotion: Building Videos in React with AI Skills

Nishchay — Tue, 06 Oct 2026 17:04:50 +0000

Every time you finish building a side project, SaaS product, or game, you face the same chore: creating a promo video that looks clean.

Usually, that means opening Premiere Pro, After Effects, or DaVinci Resolve. You end up nudging keyframes on a timeline, wrestling with GUI export settings, manually lining up sound effects, and repeating the whole cycle whenever you need to fix copy in a 30-second clip. For developers used to code, Git, and component design, the workflow feels slow and disconnected from how we build software.

Instead of timeline editors, you can build video animations using the tools you already know: React components, JSX, CSS flexbox, and spring physics, then render them directly into MP4 files from your terminal.

This is where Remotion fits in.

What is Remotion?

Remotion is an open-source framework that allows developers to create videos programmatically using React, TypeScript/JavaScript, and CSS. Instead of manual timeline editing, video frames are rendered deterministically based on React state and frame numbers, enabling automated video generation, CI/CD rendering, and dynamic personalized video pipelines.

Learn more: Remotion Official Website | Remotion GitHub Repository

While building Tambola Live, a real-time WebRTC multiplayer game (covered in my Tambola Architecture Case Study), I needed a 40-second animated promo trailer. Using Remotion, the official Remotion AI skills, and Gemini 3.7 Flash, I built the entire 1080p video with scene transitions, kinetic typography, and synchronized sound effects in React.

Here is a breakdown of how programmatic video works, how Remotion's preview studio speeds up iteration, and how AI skills help you generate complete scenes without trial and error.

Remotion vs. traditional video editors: why code wins

If you know how to build web apps, you already know most of what it takes to build a Remotion video. Similar to automating social images with Satori and Sharp, programmatic video replaces manual GUI work with reproducible code.

Feature / Dimension	Traditional GUI Editors (Premiere / After Effects)	Programmatic Video (Remotion)
Workflow Interface	Proprietary timeline GUI with visual tracks	React components, JSX, and standard CSS
Version Control	Heavy, binary `.prproj` or `.aep` files	Standard Git diffs, pull requests, and code reviews
Asset Reusability	Manual copy-pasting across timeline layers	Composable React components and design tokens
Dynamic Data	Manual re-editing per data variation	Direct API, JSON, WebSocket, or database inputs
Feedback Loop	Background timeline rendering for previews	Fast browser Studio with instant Hot Module Replacement (HMR)
Automation & CI/CD	Complex desktop rendering macros	Headless CLI or serverless cloud rendering

Traditional Video Workflow:
[GUI Timeline] ---> [Manual Keyframes] ---> [Heavy Local Render] ---> [Hard to Update / Automate]

Programmatic Remotion Workflow:
[React & CSS] ---> [Frame & Spring Hooks] ---> [Live Studio Preview] ---> [CLI / Cloud Render]

The core mental model: how Remotion turns React into video

In Remotion, a video is a sequence of still frames rendered at a fixed frame rate (such as 30 or 60 frames per second).

Instead of relying on browser wall-clock timers like setTimeout or CSS @keyframes (which can drift or drop frames during heavy CPU loads), Remotion uses deterministic hooks tied directly to the current frame index:

useCurrentFrame(): Returns the integer index of the active frame (0, 1, 2, ...).
useVideoConfig(): Provides composition metadata such as fps, durationInFrames, width, and height.
interpolate(): Maps a frame range to numerical values (for instance, fading opacity from 0 to 1 between frames 0 and 30).
spring(): Computes natural, physics-based motion using mass, stiffness, and damping parameters.

A simple 3-second animated title

Here is a minimal Remotion component:

import React from 'react';
import { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';

export const IntroTitle = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Calculate smooth physics-based spring entrance
  const entrance = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 100 },
  });

  const scale = interpolate(entrance, [0, 1], [0.8, 1]);
  const opacity = interpolate(entrance, [0, 1], [0, 1]);

  return (
    <div
      style={{
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#090d16',
        color: '#ffffff',
        fontSize: 64,
        fontWeight: 800,
        transform: `scale(${scale})`,
        opacity,
      }}
    >
      Tambola Live
    </div>
  );
};

Because entrance depends strictly on frame, Remotion guarantees pixel-perfect, frame-accurate rendering whether your local machine runs at 10 fps or 120 fps.

Speeding up scene generation with Remotion AI skills & Gemini 3.7 Flash

Calculating animation timings, keyframe curves, and scene transitions by hand can take time. To help with this, the Remotion team created official Agent Skills that give coding assistants direct knowledge of Remotion's architecture and APIs.

You can install Remotion skills into your AI agent environment with one command:

npx -y skills@latest add remotion-dev/skills -g -y

This installs 12 specialized Remotion skills into your project:

Skill	Purpose
`remotion-best-practices`	Enforces frame determinism, avoiding non-deterministic timers, and memory optimizations.
`remotion-create`	Scaffolds new video projects, compositions, and sequence structures.
`remotion-studio`	Guides interactive preview workflows and debugging via the local studio.
`remotion-render`	Handles headless CLI rendering, codecs (H.264, ProRes, WebM), and output flags.
`remotion-transitions`	Implements `@remotion/transitions` (`fade`, `slide`, `wipe`, `flip`).
`remotion-multimedia`	Orchestrates audio tracks, sound effects synchronization, and video assets.
`remotion-captions`	Generates dynamic word-by-word animated subtitles.

Pairing with Gemini 3.7 Flash

With these skills installed, I gave Gemini 3.7 Flash the scene outline for the promo video:

"Create a 40-second 1080p promo video for an online WebRTC Tambola game. We need 6 scenes: Hook, Host creating room, Player scanning QR code to join, Live number calling & ticket dabbing, Winning claim fanfare with confetti, and an Outro with a call to action. Use @remotion/transitions with fade, spring-loaded kinetic typography, and synchronized sound effects."

Because the model had direct access to remotion-dev/skills, it avoided common AI errors like using setInterval or non-deterministic CSS animations. Instead, it generated clean, modular Remotion sequence components with proper frame calculations and spring curves right away.

Fast iteration with Remotion preview studio

The most convenient part of developing with Remotion is the Remotion Studio.

You start the preview studio with:

npx remotion studio src/remotion/index.js

This launches a local preview interface on http://localhost:3000:

Interactive Timeline: Drag the playhead to scrub across frames smoothly.
Frame-by-Frame Stepping: Use arrow keys to step through individual frames and inspect alignment.
Responsive Canvas Zoom: Scale from 10% to 200% to verify typography, badges, and mobile mockups.
Instant Hot Module Replacement (HMR): Update CSS padding, color values, or spring physics in your code editor, and see the canvas update in milliseconds without restarting.

+-------------------------------------------------------------------+
|  Remotion Studio (http://localhost:3000)                          |
+-------------------------------------------------------------------+
|  [ Play / Pause ]  [ Frame: 450 / 1200 ]  [ 30 FPS ]  [ 1080p ]   |
|                                                                   |
|  +-------------------------------------------------------------+  |
|  |                                                             |  |
|  |           [ Animated Ticket & Live Ball Calling ]           |  |
|  |                                                             |  |
|  +-------------------------------------------------------------+  |
|                                                                   |
|  [================== Timeline Scrubbing Bar ===================]  |
|  |-- Scene 1 --|-- Scene 2 --|-- Scene 3 --|-- Scene 4 Gameplay -|  |
+-------------------------------------------------------------------+

Case study: building the Tambola Live promo video

Here is how the promo video was organized in /src/remotion/ for Tambola Live.

1. Root Composition setup (`Root.jsx`)

The video root declares the compositions available in the project, defining the resolution, frame rate, and total duration in frames (40 seconds at 30 fps = 1,200 frames):

import React from 'react';
import { Composition } from 'remotion';
import { PromoVideo } from './PromoVideo.jsx';

export const Root = () => {
  return (
    <Composition
      id="PromoVideo"
      component={PromoVideo}
      durationInFrames={1200}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

export default Root;

2. Scene sequencing with transitions (`PromoVideo.jsx`)

Rather than manually offsetting start frames for every scene, @remotion/transitions chains scenes together cleanly:

import React from 'react';
import { AbsoluteFill } from 'remotion';
import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';
import AudioManager from './audio/AudioManager.jsx';
import Scene1Hook from './scenes/Scene1Hook.jsx';
import Scene2Host from './scenes/Scene2Host.jsx';
import Scene3Join from './scenes/Scene3Join.jsx';
import Scene4Gameplay from './scenes/Scene4Gameplay.jsx';
import Scene5Winning from './scenes/Scene5Winning.jsx';
import Scene6Outro from './scenes/Scene6Outro.jsx';

export function PromoVideo() {
  return (
    <AbsoluteFill style={{ backgroundColor: '#090d16', color: '#ffffff' }}>
      {/* Synchronized Audio & SFX Layer */}
      <AudioManager />

      {/* Cinematic Transition Sequences */}
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={155}>
          <Scene1Hook />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene2Host />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene3Join />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={305}>
          <Scene4Gameplay />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={245}>
          <Scene5Winning />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene6Outro />
        </TransitionSeries.Sequence>
      </TransitionSeries>
    </AbsoluteFill>
  );
}

3. Adding audio and synthetic sound effects without external files

For the audio layer, we layered background music using Remotion's <Audio> component alongside synthetic PCM WAV sound effects generated directly in JavaScript:

import React from 'react';
import { Audio, Sequence, staticFile } from 'remotion';
import { SOUND_POP, SOUND_DAB, SOUND_WIN, SOUND_CHIME } from './sounds.js';

export default function AudioManager() {
  return (
    <>
      {/* 40-Second Upbeat Background Music Track */}
      <Audio src={staticFile('promo-music.wav')} volume={0.8} />

      {/* Synchronized Sound Effects */}
      <Sequence from={180} durationInFrames={20}>
        <Audio src={SOUND_CHIME} volume={0.4} />
      </Sequence>

      <Sequence from={540} durationInFrames={15}>
        <Audio src={SOUND_POP} volume={0.5} />
      </Sequence>

      <Sequence from={570} durationInFrames={15}>
        <Audio src={SOUND_DAB} volume={0.55} />
      </Sequence>

      <Sequence from={870} durationInFrames={60}>
        <Audio src={SOUND_WIN} volume={0.65} />
      </Sequence>
    </>
  );
}

By generating data-URI WAV sounds mathematically (sine waves with exponential decay envelopes at 22,050 Hz), sound effects like ball pop sounds, ticket dabs, chimes, and victory fanfares are completely self-contained, requiring zero external asset downloads during rendering.

Rendering to production MP4 from the CLI

When you are ready to produce the final video, render it directly from your terminal:

# Render high-quality MP4 using H.264 codec
npx remotion render src/remotion/index.js PromoVideo public/promo-video.mp4 --codec h264

You can also extract poster images and video thumbnails at specific frames:

# Extract frame 100 as high-resolution poster JPEG
npx remotion still src/remotion/index.js PromoVideo public/promo-poster.jpg --frame 100

For large-scale production (such as generating personalized recap videos for users), you can deploy Remotion to AWS Lambda or Google Cloud Run using @remotion/lambda to render videos in parallel across distributed serverless functions.

See the game and video live in action

The complete promo video generated through this workflow is live today.

You can visit Tambola Live (tambola.nkaushik.in) to:

Play the game: Host a room, invite friends via QR code or direct link, roll 1-90 numbers with real-time WebRTC sync, and auto-verify winning tickets.
Watch the promo video: Scroll down to the "How To Play" section on the homepage to watch the full Remotion-rendered video running in the web player.

Final thoughts

Code is a practical video tool: If you know React and CSS, Remotion gives you full control over animations, typography, and automated rendering.
AI skills remove the boilerplate: Installing remotion-dev/skills gives models like Gemini 3.7 Flash the exact context needed to write working sequence timings and spring curves without guesswork.
The Studio provides immediate feedback: You can inspect frames, test responsive viewports, and tweak CSS without waiting for full exports.

If you have put off creating a promo video for your project because video editing software feels cumbersome, building it in React with Remotion is worth exploring.

Originally published at nkaushik.in

AdGuard Home: Stop Ads & Trackers for Your Entire Family

Nishchay — Tue, 06 Oct 2026 17:04:28 +0000

How often have you encountered the scenario where you search something and suddenly everywhere you go, you start seeing ads for it. Or, when you try to read a news article and you can barely read anything with all the ads showing up.

Although you might use apps like Firefox or extensions such as Adblock, they must be installed on every device, which is often impractical.

I faced a similar issue because my family, like many others, isn't tech-savvy. I needed a solution that could be implemented to shield them from ads and malware without requiring any changes on their part.

Enter, AdGuard Home

AdGuard Home is an open-source, network-wide DNS server that blocks ads, telemetry, and tracking domains before they ever reach your smartphones, laptops, smart TVs, or IoT devices.

In this guide, we'll cover how to install AdGuard Home, configure the best 2026 blocklists, optimize upstream DNS settings, and deploy it across your entire home network.

🤖

Let's assume we're working in a Linux environment (such as a Raspberry Pi, Debian mini PC, or Docker container), as it simplifies 24/7 reliability. However, the installation and web interface steps are identical across platforms.

Installation

Head over to the AdGuard Home Automated Install. Installing AdGuard is as simple as running a single command.

To install with curl run the following command:

curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v

To install with wget run the following command:

wget --no-verbose -O - https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v

This installs the AdGuard Home service, which will act as your local recursive/forwarding DNS server.

What is DNS?

DNS stands for Domain Name System. In simple terms, it is the internet's address book. Every website you visit has an underlying IP address (e.g. 66.11.184.216). When your browser asks for google.com, DNS translates that human-friendly name into the server's IP address. By acting as your DNS server, AdGuard Home inspects domain requests and instantly drops requests to known advertising, tracker, and phishing domains.

Setting Up AdGuard Home & Web Interface

After installation, the setup wizard starts on port 3000. Open your browser and navigate to http://<your-server-ip>:3000.

Step 1: Click Get Started.

Step 2: Configure Admin Web Interface & DNS Port.

By default, the admin web UI listens on port 80. If you already run a web server (like Nginx or Traefik), change the admin port to 3000 or 8080.
Keep the DNS server port on 53 (standard DNS port).

Step 3: Set your admin username and password.

Once the wizard completes, log into the dashboard at http://<your-server-ip>:3000.

Best AdGuard Home Blocklists (2026 Recommended)

To add blocklists, go to Filters → DNS blocklists → Add blocklist → Add a custom list in your AdGuard Home dashboard.

Here is our curated, tested stack of blocklists that provides maximum protection with zero false positives (safe for family use without breaking online banking or streaming):

Blocklist Name	Focus Category	Recommended Source URL	Best For
AdGuard DNS Filter	Ads & Trackers	`https://adguardteam.github.io/HostlistsRegistry/assets/filter_1.txt`	Core ad blocking
OISD Basic / Big	Universal Ad & Telemetry	`https://big.oisd.nl`	Zero false positives (Family-safe)
Peter Lowe's List	Ad & Tracking Servers	`https://pgl.yoyo.org/adservers/serverlist.php?hostformat=adblockplus&showintro=0&mimetype=plaintext`	High performance & lightweight
Steven Black Unified Hosts	Malware + Adware	`https://raw.githubusercontent.com/StevenBlack/hosts/master/hosts`	Malicious domain protection
Phishing URL Blocklist	Phishing & Scams	`https://adguardteam.github.io/HostlistsRegistry/assets/filter_30.txt`	Security & Anti-Phishing
AdGuard Popup Hosts	Annoying Popups	`https://adguardteam.github.io/HostlistsRegistry/assets/filter_11.txt`	Notification & popup spam

Recommended DNS Settings & Upstream DNS

To maximize speed and prevent ISP snooping, navigate to Settings → DNS Settings and configure encrypted upstream DNS providers (DoH / DoT):

Upstream DNS Servers (Copy & Paste)

https://dns.quad9.net/dns-query
https://cloudflare-dns.com/dns-query
https://dns.adguard-dns.com/dns-query

Optimal DNS Settings:

Upstream mode: Parallel requests (queries all upstream servers concurrently and uses the fastest response).
DNS cache size: 67108864 (64 MB cache for instant sub-millisecond local responses).
Optimistic caching: Enable (serves cached responses while refreshing stale entries in background).

Can AdGuard Home Block YouTube Ads in 2026? (The Truth & Workarounds)

One of the most frequent questions homelabbers ask is: "Can I block YouTube ads network-wide using AdGuard Home?"

The short answer: No, not via DNS alone.

Why? Google serves YouTube video advertisements from the exact same content delivery networks (CDNs) and domain names (e.g., *.googlevideo.com) as the real video you are trying to watch. If AdGuard Home blocks that domain, the YouTube video will simply fail to buffer.

Effective Workarounds for YouTube Ads:

Desktop / Mobile Browser: Use uBlock Origin or the Brave Browser, which perform deep cosmetic and request filtering inside the browser DOM.
Android & Android TV: Use open-source third-party clients like SmartTube (for Android TV) or ReVanced (for Android smartphones).
Parental Controls on AdGuard: While it cannot block YouTube ads, AdGuard Home can enforce YouTube SafeSearch or schedule full blocking of YouTube during study hours under Filters → Blocked Services.

Deploying AdGuard Home to All Devices (Router Level)

To protect your entire house without configuring every phone, tablet, and TV individually, set AdGuard Home as your home router's primary DNS server.

Log into your Wi-Fi router's admin panel (typically 192.168.1.1 or 192.168.0.1).
Navigate to DHCP Settings / LAN Settings / DNS.
Set Primary DNS Server to your AdGuard Home IP address (e.g. 192.168.1.150).
Set Secondary DNS Server to your backup DNS or leave blank.
Save and reboot your router.

Once refreshed, every phone, laptop, and smart appliance connecting to your Wi-Fi will automatically query AdGuard Home, blocking ads and tracking seamlessly.

Parental Controls & Service Scheduling

AdGuard Home includes built-in service blocking under Filters → Blocked services.

You can toggle one-click restrictions on specific platforms (TikTok, Roblox, Discord, adult domains) or schedule service downtime for bedtime:

💬 Frequently Asked Questions (FAQ)

What are the best AdGuard Home blocklists to use in 2026?

The ideal blocklist stack includes AdGuard DNS Filter (for general ads), OISD Basic/Big (near-zero false positives, family-friendly), Steven Black's Unified Hosts (malware and adware), and Peter Lowe's List.

Can AdGuard Home block YouTube ads?

No, DNS blockers cannot block YouTube video ads because the ads and the video streams originate from identical domain names (*.googlevideo.com). Use browser extensions like uBlock Origin or client apps like SmartTube on Android TV.

What are the best upstream DNS servers for AdGuard Home?

Use encrypted DNS-over-HTTPS (DoH) providers such as Quad9 (https://dns.quad9.net/dns-query) for malware filtering and Cloudflare (https://cloudflare-dns.com/dns-query) for speed.

Does AdGuard Home slow down internet connection speeds?

No. In fact, AdGuard Home accelerates browsing by caching frequent DNS queries locally and blocking heavy tracking scripts and media ads from ever downloading.

Related Homelab & Self-Hosting Guides

Originally published at nkaushik.in

Top 4 ways to Run LLM locally on Android and iOS

Nishchay — Tue, 06 Oct 2026 16:29:29 +0000

In my previous blog, I explored the technical rabbit hole of running Llama.cpp in Termux on an old Android phone. While that was a rewarding experiment, let's be honest: it wasn't exactly "plug-and-play" for most people.

But it's 2026, and the game has changed. You no longer need to be a Linux wizard to have a private, powerful AI in your pocket. In this guide, I'm covering the Top 4 ways you can run LLMs locally on your Android or iOS device—completely for free, with unlimited requests, and zero data leaving your phone.

Quick Comparison Matrix (2026 Tested)

App / Method	Best For	Platform	RAM Required	Supported Formats	Offline Mode
Google Edge Gallery	One-click setup & NPU speed	Android / iOS	2GB - 4GB	LiteRT / Gemma 4 / Gemma 3	✅ 100% Offline
PocketPal AI	Daily chat & Uncensored models	Android / iOS	4GB - 8GB	GGUF (llama.cpp)	✅ 100% Offline
AnythingLLM	PDF & Document RAG	Android / iOS	6GB - 12GB	GGUF / Ollama API / Cloud	✅ 100% Offline
Termux + Ollama	Power users & CLI automation	Android	4GB - 8GB	Ollama Library / GGUF	✅ 100% Offline

1. Google AI Edge Gallery: The "One-Click" Starter

https://github.com/google-ai-edge/gallery

Google's official showcase is the perfect starting point. It's the easiest way to see what your phone is actually capable of. It's optimized for mobile NPUs, meaning it's fast and efficient for tasks like tone refinement, audio transcription, and image understanding.

The latest version now supports Gemma 4 and Gemma 3, models specifically "distilled" to run on mobile hardware without eating up your RAM. For a dedicated deep-dive on setting up Gemma 4 with Edge Gallery, check out my Running Gemma 4 Locally on iOS & Android Guide.

The "Skills" Update: One of the coolest additions is support for SKILLS. You can now extend what the AI can do by pulling from a vast library at skills.sh. My personal favorite is the Humanizer skill—it's great for making AI-generated text sound more, well, human.

Demo

https://youtube.com/shorts/1H6z2-K7gvw

Models Available

Gemma 4 E2B and E4B
Gemma 3 1B
Gemma 3n E2B and E4B
DeepSeek R1 Distill Qwen 1.5B
Qwen 2.5 1.5B
LiteRT distilled models

Bundling your own model

If you're feeling adventurous, you can even bundle your own models by following the LiteRT community guide. It walks you through converting models from Pytorch or other formats.

2. PocketPal AI (Best for General Chat & Uncensored Models)

PocketPal AI is the one I keep coming back to. It's built on llama.cpp (the industry standard), but the interface is actually designed for a human using a phone, not a developer staring at a terminal.

The 'Pals' feature is the standout here. Instead of one messy chat thread, you can set up different "Pals" with their own system prompts. I have one for coding and another for creative writing. It also handles the latest architectures like Qwen 3.5 and LFM 2.5, which are incredibly fast on mobile.

Why it works for me:

Easy Model Setup: You can download GGUF models directly within the app. For a smooth experience, I recommend any GGUF model (try Unsloth's uploads) with Q4_K_M quantization.
100% Private: Once the model is on your phone, you can go into Airplane Mode and the AI won't even notice.
Live Stats: It shows you tokens per second in real-time. It's satisfying to see your phone's hardware in action.

Running Uncensored Local LLMs on Android with PocketPal

If you need a local model without restrictive alignment filters for creative writing or raw coding analysis, PocketPal AI makes loading uncensored GGUFs simple:

Open PocketPal AI → Navigate to the Models tab.
Tap Add Custom Model (Hugging Face URL).
Paste a direct GGUF link for an uncensored model (such as Dolphin-2.9.4-Llama3.1-8B-GGUF in Q4_K_M quantization or Qwen2.5-1.5B-Instruct-GGUF).
PocketPal downloads the GGUF weights directly to internal storage and runs them completely sandboxed with 0 guardrails.

3. AnythingLLM: The Researcher's Workspace

If you need your AI to actually do something with your files, AnythingLLM is a different beast. It's less of a chatbot and more of a portable workspace.

The killer feature is On-Device RAG. You can feed it a PDF or text file sitting on your phone, and the AI will answer questions based only on that document. I've used this to summarize 50-page technical docs during flights with zero internet.

What sets it apart:

Chat with your docs: Local indexing means your data never touches a server.
Tools & Agents: It supports web scraping, calendar editing, and the Model Context Protocol (MCP), so it's slowly becoming a true mobile agent.
The "Infinite Power" Trick: If your phone is struggling, you can connect it to a massive 70B model running on your home PC via API and use your phone as a remote window into that power.

4. Termux + Ollama: The Power User Shortcut

This is for my Android users who miss the command line. We're using Termux to run Ollama directly on the device. It's the closest you'll get to a desktop experience on a mobile screen.

The Quick Setup:

Install Termux (use the version from F-Droid, not the Play Store).
Run pkg install ollama.
Type ollama run qwen2.5:0.5b or ollama run qwen3.5:0.8b.

For the full setup guide, check out my companion tutorials:

How to Install and Run Ollama in Termux on Android (2026 Guide)

How to Install llama.cpp on Windows, Mac, Linux, and Termux (2026)

Running 24/7 Local AI on an Old Android without Overheating

That's it. Ollama will auto-download the model and drop you into a CLI chat. You can run pretty much anything from the Ollama Library as long as your RAM can handle it. It's the fastest way to test new models the second they drop.

Summary: Which one should you pick?

Method	Best For	RAM & Hardware Specs	Supported Models & Classes	Ease of Use	Customization
Google Edge Gallery	Beginners & NPU Acceleration	2GB - 4GB RAM (Tensor / Snapdragon NPUs like Pixel 8/9, Galaxy S24)	Gemma 3 1B/4B, Gemma 4, LiteRT distilled models	⭐⭐⭐⭐⭐	⭐⭐
PocketPal AI	Daily Chats & Uncensored Models	4GB - 8GB RAM (OnePlus 11/12, Galaxy S23/S24, iPhone 15/16)	Qwen 3.5, LFM 2.5, Llama 3.2 (1B/3B GGUF)	⭐⭐⭐⭐	⭐⭐⭐⭐
AnythingLLM	Document RAG & Local Workspaces	6GB - 12GB RAM (Galaxy S24 Ultra, iPhone 16 Pro Max)	Custom Local GGUF, Ollama endpoints, Cloud APIs	⭐⭐⭐	⭐⭐⭐⭐⭐
Termux + Ollama	Developers & Command Line Users	4GB - 8GB RAM (64-bit ARM devices on Android 10+)	Qwen 2.5/3.5 (0.8B/1.5B), Llama 3.2 1B/3B	⭐	⭐⭐⭐⭐

Related Local AI Guides

Happy (Local) Chatting!

Originally published at nkaushik.in

Building Web ScreenShare using WebRTC

Nishchay — Tue, 06 Oct 2026 16:15:30 +0000

The web is a very powerful platform it grants you the ability to share something with everyone irrespective of what device they are using, be it an Android or iOS phone or a Windows, Linux, or Mac laptop.

With time the things, a browser could do have also increased greatly (except IE11, switch to Firefox already). A webpage is no longer about some text and images, you can add a lot more power-hungry features to your webpage. You can create Games, Build Services like Google Docs, Browser Stack, and a lot more all running on a browser.

This post is going to talk about one of the browser’s features I had a chance to work with and the tech I explored for integrating it.

Problem Statement

The problem statement I had in front of me was to implement a screen-share feature where-in when a User is sharing the screen it would be possible for others to view it over the internet as a real-time video.

The first step was to break down this problem into smaller problems and build a prototype around it.

As I saw it, the problem had two pieces, first figuring out how to capture the screen, second, how to send it across to other users as a live video feed.

I’ll start with the Screen-share bit first.

Screen-share/Record

I knew websites already do it (you would’ve seen it in action on Zoom or Google Meet) but wasn’t aware How easy it is to do it on our own.

const promise = navigator.mediaDevices.getDisplayMedia(constraints);

The above line is all it takes to get started with screen-sharing. It is supported by all the latest browsers and you can read more on its support at https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

When you run the above code snippet you will get a Promise<MediaStream>, now it is up-to us to decide how we want to use this.

We can either share it with other people using WebRTC (more on it later) or even record it and download the video.

Example snippet to download the recorded video (taken from https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)

promise.then(stream => {
    var recordedChunks = [];

    console.log(stream);

    var options = { mimeType: "video/webm; codecs=vp8" };
    mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();

    function handleDataAvailable(event) {
        console.log("data-available");
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
            console.log(recordedChunks);
            download();
        } else {
        // ...
        }
    }

    function download() {
        var blob = new Blob(recordedChunks, {
            type: "video/webm"
        });
        var url = URL.createObjectURL(blob);

        var a = document.createElement("a");

        document.body.appendChild(a);
        a.style = "display: none";
        a.href = url;
        a.download = "test.webm";
        a.click();
        window.URL.revokeObjectURL(url);
    }

    // demo: to download after 9sec
    setTimeout(event => {
        console.log("stopping");
            mediaRecorder.stop();
        }, 9000);
    });
}

One thing to note about the above getDisplayMedia API is it behaves differently on browsers. For example, Chrome lets you share between a single tab/window/desktop, Firefox shares the whole window and Safari shares the entire desktop.

A limitation this API has is, it won’t let you share only a part of your webpage.

Now that we have solved half of the problem, let’s get to the second part.

WebRTC

If you haven’t heard about it, don’t worry, I will add resources for you to read. It is an interesting topic so you should give it a try.

WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.

The above definition is taken from MDN docs which captures the gist of what WebRTC is (https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API).

WebRTC is a very detailed topic and it won’t be easy to cover all that it provides in this article. I’d highly recommend going through this video on YouTube.

https://www.youtube.com/watch?v=p2HzZkd2A40

Based on the above video, we derive two important steps, we need to acquire a video/audio stream and then use WebRTC to communicate it with peers.

This video stream that we share can either be a stream from your webcam or any MediaStream from other sources.

If you recall, the screen-share stream we acquired is also a MediaStream which can be used with WebRTC.

So once we have set-up our WebRTC connection we can simply publish this Screen-share stream on it and make it available to peers in real-time.

Implementing WebRTC from scratch using the basic API can be a tedious task, there are various libraries and frameworks available for use. These libraries hides away the software complexity, but to ensure WebRTC works for 100% of the users you would also need to setup a server of your own.

PeerJS (https://peerjs.com) is one such example, which makes it easier for you to get started.

Various companies provide you with the infrastructure and SDK needed to get started with real-time video, for example, Twilio. This takes away both the software and hardware complexity and makes it easier for you to implement and support a wide variety of users and devices.

In my case, we were already utilizing Twilio for the video call feature and it also let us publish more MediaStream if needed for a user.

This made sharing screen-share with other users a breeze, as all it required was to acquire the screen-share stream and then publish it on the connection for a user.

Twilio also has a sample app that you can refer to for understanding how to do the above.

https://github.com/twilio/twilio-video-app-react

Conclusion

This was just one example of what can be achieved using these 2 pieces of technologies: WebRTC & getDisplayMedia.

The possibilities are limitless.

For example, You can make a piece of software which records your webcam as well as your screen to make a coding tutorial with few lines of code right from your browser.

A small experiment I did was to find a way to only share a part of webpage. For this I wrapped the area which I wanted to share with a distinctive color border and on other users before showing the video stream I simply used image processing to crop the pieces outside of the border. This isn’t a very great solution and is extremely memory intensive to do it in JavaScript so I won’t recommend it.

Special shout-out to Punit Gupta for helping me with this article.

Thanks for reading.

Do share your thoughts and suggestions.

Originally published at nkaushik.in

Hello World!

Nishchay — Tue, 06 Oct 2026 15:50:21 +0000

Hi there👋, I’m Nishchay, an Engineer, I am currently exploring the world of AI and Self Hosting. This is my space to share my thoughts with you.

I have over ten years of experience in the software industry, where I have worked with various organizations in both B2C and B2B sectors.

Over the years, I have worked with many technologies and tools that fascinated me. I began my journey with PHP and have since built Native Android Apps and React Native Apps. I've also had the chance to work with Ruby on Rails, Golang, and Python. Additionally, I have hands-on experience in maintaining services and infrastructure on both Google Cloud (GCP) and AWS, as well as with Kubernetes (k8s).

I currently work in the JavaScript/TypeScript ecosystem, specializing in React.JS & Node.js.

I possess extensive expertise in the frontend domain, which I recently leveraged to build a comprehensive Performance Testing platform from the ground up. This project encompassed not only the frontend but also the backend and the data engineering aspects. I undertook this ambitious endeavor with a very small team, yet we successfully implemented the entire platform. It is now widely used throughout the organization and serves as a crucial guardrail for performance-related checks across the entire company. The platform's integration has significantly enhanced our ability to monitor and optimize performance, ensuring that all our systems operate efficiently and effectively. This achievement has not only streamlined our processes but also reinforced the importance of performance testing within our organizational framework.

I enjoy building things and trying out new ideas. I've been working to keep up with the rapid advancements in the Generative AI space.

Originally published at nkaushik.in

DEV Community: Nishchay

Programmatic Video with Remotion: Building Videos in React with AI Skills

Remotion vs. traditional video editors: why code wins

The core mental model: how Remotion turns React into video

A simple 3-second animated title

Speeding up scene generation with Remotion AI skills & Gemini 3.7 Flash

Pairing with Gemini 3.7 Flash

Fast iteration with Remotion preview studio

Case study: building the Tambola Live promo video

1. Root Composition setup (Root.jsx)

2. Scene sequencing with transitions (PromoVideo.jsx)

3. Adding audio and synthetic sound effects without external files

Rendering to production MP4 from the CLI

See the game and video live in action

Final thoughts

AdGuard Home: Stop Ads & Trackers for Your Entire Family

Enter, AdGuard Home

Installation

What is DNS?

Setting Up AdGuard Home & Web Interface

Best AdGuard Home Blocklists (2026 Recommended)

Recommended DNS Settings & Upstream DNS

Upstream DNS Servers (Copy & Paste)

Optimal DNS Settings:

Can AdGuard Home Block YouTube Ads in 2026? (The Truth & Workarounds)

Effective Workarounds for YouTube Ads:

Deploying AdGuard Home to All Devices (Router Level)

Parental Controls & Service Scheduling

💬 Frequently Asked Questions (FAQ)

What are the best AdGuard Home blocklists to use in 2026?

Can AdGuard Home block YouTube ads?

What are the best upstream DNS servers for AdGuard Home?

Does AdGuard Home slow down internet connection speeds?

Related Homelab & Self-Hosting Guides

Top 4 ways to Run LLM locally on Android and iOS

Quick Comparison Matrix (2026 Tested)

1. Google AI Edge Gallery: The "One-Click" Starter

Demo

Models Available

Bundling your own model

2. PocketPal AI (Best for General Chat & Uncensored Models)

Running Uncensored Local LLMs on Android with PocketPal

3. AnythingLLM: The Researcher's Workspace

4. Termux + Ollama: The Power User Shortcut

Summary: Which one should you pick?

Related Local AI Guides

Building Web ScreenShare using WebRTC

Problem Statement

Screen-share/Record

WebRTC

Conclusion

Hello World!

1. Root Composition setup (`Root.jsx`)

2. Scene sequencing with transitions (`PromoVideo.jsx`)