DEV Community: Kumar Deepanshu

I Built Dedicated Email Inboxes for AI Agents (REST API + Full Send/Receive)

Kumar Deepanshu — Tue, 10 Mar 2026 08:09:14 +0000

The Problem

When building AI agent workflows, I kept hitting the same wall: agents needed to send and receive emails, but there was no clean infrastructure for it.

Sharing your main domain? Messy. Forwarding rules for each agent? Breaks at scale. One shared inbox for all agents? You lose attribution and context completely.

What I Built

AgentMailr gives each AI agent its own dedicated email inbox via a simple REST API.

Key features:

Provision inboxes on demand per agent
Full send & receive support
Auth flows built-in for outreach agents
Multi-agent support — isolated inboxes, no cross-agent bleed
Works with LangChain, AutoGen, CrewAI, or any custom agent framework

Example Use Cases

Outreach agents — each agent sends from its own address, tracks replies
Support bots — dedicated inbox per customer segment or agent
Multi-agent pipelines — agents communicate with each other via email
Automated follow-up systems — clean, auditable email trails per agent

Why Not Just Use a Gmail/SMTP?

You could, but:

You're sharing credentials across agents (security risk)
No per-agent isolation
Rate limits hit fast at scale
Auth flows for outreach require separate identities

AgentMailr is purpose-built for agent workloads.

Try It

agentmailr.com

Would love feedback from devs building agent systems. What email challenges are you running into?

How I built an email inbox for AI agents (OTP, bulk sending, and marketing emails)

Kumar Deepanshu — Sat, 28 Feb 2026 21:32:11 +0000

if you've ever tried to make an AI agent fully autonomous, you've hit this wall: the agent needs to log into something, and boom, there's a 2FA/OTP email waiting.

the agent has no inbox. it can't read emails. your whole automation just... stops.

i ran into this exact problem and ended up building AgentMailr to solve it. here's what i learned and where it's going.

the core problem

most AI agent setups treat email as an afterthought. you can send emails fine, but receiving them in a way that's agent-friendly is a pain. IMAP polling adds latency and burns context. scraping webmail is fragile. forwarding to a webhook works but means you have to build and maintain the correlation logic yourself.

what i really wanted was something like this:

const otp = await inbox.waitForOtp({ timeout: 60000 })

one call. blocks until the email arrives. returns the code. done.

how it works

each agent gets a real email address (like my-agent@agentmailr.com). when an email arrives, we parse it across plain text, HTML, and subject line to extract the most likely OTP code. the connection stays open (long-polling) so your agent doesn't have to poll.

you can also filter by sender domain so your agent doesn't accidentally grab an OTP from the wrong email:

const otp = await inbox.waitForOtp({
  timeout: 60000,
  from: 'accounts.google.com'
})

works with LangChain, LangGraph, CrewAI, or any custom agent setup.

beyond OTP - bulk and marketing email

once you have a real email infrastructure layer for agents, a lot more becomes possible.

we're building out two more capabilities:

bulk email sending - your agent can send emails at scale. think outreach agents, notification systems, or any workflow that needs to email thousands of people without you manually managing SMTP configs or deliverability.

marketing email - full campaign support. drip sequences, newsletters, broadcast emails. the idea is your AI agent can run your entire email marketing loop, from writing the copy to sending it to the right segments, all programmatically.

so AgentMailr is becoming the full email layer for AI agents, not just the OTP receiver.

why this matters for agentic systems

most agent frameworks think of tools as "call an API, get a result". email doesn't work like that. it's async. something sends you an email and you have to wait for it, sometimes seconds, sometimes minutes.

bulk and marketing email flips it the other way: your agent needs to initiate thousands of outbound messages reliably, with tracking, with deliverability guarantees.

none of the existing email tools were built with agents as the primary user. that's the gap AgentMailr fills.

current status

OTP/inbox receiving: live, you can use it today
bulk sending: coming soon
marketing email / campaigns: on the roadmap

if you're building agents and running into the email problem, check it out at agentmailr.com. happy to answer questions in the comments.

Revamping Dev.UI piece by piece! 🛠️

Kumar Deepanshu — Sat, 30 Aug 2025 23:25:44 +0000

Revamping Dev.UI piece by piece! 🛠️
✨ 10+ new component variations
📦 Updated Modal, Card, Hero
⚡ Clean React/Tailwind code
🎨 Sleek, minimal design incoming
What’s your fave component to build with? 👇
devui.in

Extracting Audio from Video in the Browser using React and FFmpeg WASM

Kumar Deepanshu — Wed, 10 Jul 2024 16:59:20 +0000

Extracting Audio from Video in the Browser using React and FFmpeg WASM

In today's web development landscape, performing complex media operations directly in the browser has become increasingly possible. One such operation is extracting audio from video files without server-side processing. This blog post will guide you through implementing an audio extraction feature in a React application using FFmpeg WASM.

What We'll Build

We'll create a React application that allows users to:

Upload an MP4 video file
Extract the audio from the video
Download the extracted audio as an MP3 file

All of this will happen client-side, leveraging the power of WebAssembly through FFmpeg WASM.

Prerequisites

To follow along, you should have:

Basic knowledge of React and TypeScript
Node.js and npm installed on your machine
A code editor of your choice

Setting Up the Project

First, let's set up a new React project using Vite:

npm create vite@latest audio-extractor -- --template react-ts
cd audio-extractor
npm install

Next, install the required dependencies:

npm install @ffmpeg/ffmpeg@0.12.10 @ffmpeg/util@0.12.1

Implementing the Audio Extractor

Let's break down the implementation into steps:

1. Importing Dependencies

import React, { useState, useRef } from 'react'
import { FFmpeg } from '@ffmpeg/ffmpeg'
import { toBlobURL, fetchFile } from '@ffmpeg/util'

We import the necessary React hooks and FFmpeg utilities.

2. Setting Up State and Refs

const [loaded, setLoaded] = useState(false)
const [videoFile, setVideoFile] = useState<File | null>(null)
const ffmpegRef = useRef(new FFmpeg())
const messageRef = useRef<HTMLParagraphElement | null>(null)

We use state to track whether FFmpeg is loaded and to store the selected video file. Refs are used for the FFmpeg instance and a message display element.

3. Loading FFmpeg

const load = async () => {
  const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm'
  const ffmpeg = ffmpegRef.current
  ffmpeg.on('log', ({ message }) => {
    if (messageRef.current) messageRef.current.innerHTML = message
  })
  await ffmpeg.load({
    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
    workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript'),
  })
  setLoaded(true)
}

This function loads the FFmpeg WASM core and sets up logging.

4. Extracting Audio

const extractAudio = async () => {
  if (!videoFile) {
    alert('Please select an MP4 file first')
    return
  }
  const ffmpeg = ffmpegRef.current
  await ffmpeg.writeFile('input.mp4', await fetchFile(videoFile))
  await ffmpeg.exec(['-i', 'input.mp4', '-vn', '-acodec', 'libmp3lame', '-q:a', '2', 'output.mp3'])
  const data = await ffmpeg.readFile('output.mp3')
  const audioBlob = new Blob([data], { type: 'audio/mp3' })
  const audioUrl = URL.createObjectURL(audioBlob)
  const link = document.createElement('a')
  link.href = audioUrl
  link.download = 'extracted_audio.mp3'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

This function handles the audio extraction process using FFmpeg commands and creates a download link for the extracted audio.

5. Handling File Selection

const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  if (event.target.files && event.target.files[0]) {
    const file = event.target.files[0]
    if (file.type === 'video/mp4') {
      setVideoFile(file)
    } else {
      alert('Please select an MP4 file.')
      event.target.value = ''
    }
  }
}

This function ensures that only MP4 files are selected.

Configuring Vite

To ensure proper functioning of FFmpeg WASM, we need to configure Vite. Create a vite.config.ts file in your project root:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
  },
  server: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
    },
  },
})

This configuration excludes FFmpeg from dependency optimization and sets necessary headers for WASM to work correctly.

Conclusion

We've successfully implemented a browser-based audio extraction feature using React and FFmpeg WASM. This approach allows for efficient client-side processing of media files, reducing server load and improving user experience.

By leveraging WebAssembly technology, we can bring powerful media manipulation capabilities directly to the browser, opening up new possibilities for web-based media applications.

Full Code Reference

Here's the complete code for the AudioExtractor component:

import React, { useState, useRef } from 'react'
import { FFmpeg } from '@ffmpeg/ffmpeg'
import { toBlobURL, fetchFile } from '@ffmpeg/util'

const AudioExtractor: React.FC = () => {
  const [loaded, setLoaded] = useState(false)
  const [videoFile, setVideoFile] = useState<File | null>(null)
  const [message, setMessage] = useState('')
  const ffmpegRef = useRef(new FFmpeg())

  const load = async () => {
    const baseURL = 'https://unpkg.com/@ffmpeg/core-mt@0.12.6/dist/esm'
    const ffmpeg = ffmpegRef.current
    ffmpeg.on('log', ({ message }) => {
      setMessage(message)
    })
    await ffmpeg.load({
      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
      workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, 'text/javascript'),
    })
    setLoaded(true)
  }

  const extractAudio = async () => {
    if (!videoFile) {
      alert('Please select an MP4 file first')
      return
    }
    const ffmpeg = ffmpegRef.current
    await ffmpeg.writeFile('input.mp4', await fetchFile(videoFile))
    await ffmpeg.exec([
      '-i',
      'input.mp4',
      '-vn',
      '-acodec',
      'libmp3lame',
      '-q:a',
      '2',
      'output.mp3',
    ])
    const data = await ffmpeg.readFile('output.mp3')
    const audioBlob = new Blob([data], { type: 'audio/mp3' })
    const audioUrl = URL.createObjectURL(audioBlob)
    const link = document.createElement('a')
    link.href = audioUrl
    link.download = 'extracted_audio.mp3'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files[0]) {
      const file = event.target.files[0]
      if (file.type === 'video/mp4') {
        setVideoFile(file)
      } else {
        alert('Please select an MP4 file.')
        event.target.value = ''
      }
    }
  }

  return (
    <div className="my-8 rounded-lg border bg-gray-50 p-6">
      <h2 className="mb-4 text-2xl font-semibold">Audio Extractor</h2>
      {!loaded ? (
        <button
          onClick={load}
          className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
        >
          Load FFmpeg
        </button>
      ) : (
        <>
          <input type="file" accept="video/mp4" onChange={handleFileChange} className="mb-4" />
          <br />
          <button
            onClick={extractAudio}
            disabled={!videoFile}
            className="rounded bg-green-500 px-4 py-2 font-bold text-white hover:bg-green-700 disabled:opacity-50"
          >
            Extract Audio
          </button>
          <p className="mt-4 text-sm text-gray-600">{message}</p>
        </>
      )}
    </div>
  )
}

export default AudioExtractor

Using JavaScript slice() in React

Kumar Deepanshu — Mon, 06 Feb 2023 18:11:04 +0000

React is a JavaScript library for creating user interfaces that frequently involves manipulating data arrays. The slice() method in JavaScript can be useful for extracting a portion of an array and returning a new one, which can be useful in a variety of situations.

Understanding the JavaScript slice() method

The slice() method is used to extract elements from an array based on the indexes at the beginning and end. It returns a new array containing the extracted elements while leaving the original array unchanged. The slice() syntax is as follows:

array.slice(start, end)

start: The index from which to start extraction. If start is negative, counting will begin at the end of the array.
end: The index at which extraction should be terminated. If end is not specified, slice() will extract the remainder of the array. If end is negative, it will cease counting from the array's end.

In React, you can use the slice() method to extract elements from an array before passing it down as props to a child component. This can be useful for displaying a portion of the data, such as pagination or a limited number of items per page.

Example

Here's an example of how you might use slice() in a React component:

import React from 'react'

const ItemsList = ({ items }) => {
  const slicedItems = items.slice(0, 10)

  return (
    <ul>
      {slicedItems.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  )
}

export default ItemsList

ItemsList is a functional component in this example that gets an array of items as props. By using slice()on items, we extract the top ten elements and provide the resulting array slicedItems to the component.

Conclusion

In React, the JavaScript slice() function can be handy for removing a part of an array. You may increase the efficiency of your application and make your code more legible by using slice() to extract the essential data. You now have a strong knowledge of how to utilise slice() in React thanks to this article.

UI/UX Developer Portfolio

Kumar Deepanshu — Sat, 28 May 2022 16:42:48 +0000

Hey guys I have just added new UI/UX Portfolio Template to DEV.UI
Check out this UI/UX Portfolio Template

Github Link
Deployed Link

Review my resume

Kumar Deepanshu — Sat, 14 May 2022 18:16:24 +0000

Hey guys, this is my resume which I have created, can you suggest me any required changes, any kind of feedback , it will be helpful.

Link of my resume

NFT Landing Page Template

Kumar Deepanshu — Sat, 14 May 2022 11:53:50 +0000

Hey guys I have just added new Template to DEV.UI
Check out this NFT landing Page

Github Link

New Card Component

Kumar Deepanshu — Fri, 13 May 2022 20:36:37 +0000

Hey guys check out all new card components in Dev.ui

Any kind of feedback will be appreciated.😀

Fully Responsive UP Business Landing PageTemplate

Kumar Deepanshu — Fri, 13 May 2022 15:25:43 +0000

Hey guys Check out I have just added A New Fully Responsive UP Business Landing Page Template to DEV.UI
Check out this UP Business Landing Page Template

NFT Components

Kumar Deepanshu — Mon, 09 May 2022 18:00:22 +0000

Hey guys check out the new hero component section in Dev.UI

Will going to add more components in this section .

Open Source Responsive Template and Component

Kumar Deepanshu — Sun, 01 May 2022 19:42:02 +0000

Hey, guys check out Devi, A Open-source full responsive and customisable React Component and Template Library.

GitHub