DEV Community

Okeke Chukwudubem
Okeke Chukwudubem

Posted on

Project Log #19: I'm Building a Web Frontend for My AI Phone Agent

Day 19. The agent works in a terminal. That's useless for anyone else. Today, I started building a real interface.

For 18 days, my AI Phone Agent has lived entirely in a terminal. Black screen. White text. Python scripts. ADB commands. It works—but only for me.

Anyone else would take one look at Termux and walk away.

That changes today.

The Problem

The agent currently runs like this: I open Termux on my Android phone, type python agent.py, and enter commands like "Send a WhatsApp message to Mom." The agent parses the command, executes the steps, and prints results to the terminal.

This is fine for a developer. It's useless for a user. If I want this project to be more than a portfolio piece, it needs an interface that a normal person can use.

What I'm Building

A simple web frontend that runs locally on the phone. Think of it as a chat interface—like WhatsApp Web, but for talking to your AI agent.

The interface will have:

  • A text input field where you type commands ("Send a message to Mom," "Check my bank balance")
  • A chat-style display showing the agent's responses
  • Status indicators showing what the agent is doing (Opening WhatsApp... Finding contact... Sending message...)
  • A simple setup screen for first-time users

Everything runs locally. No cloud. No external servers. The web interface talks to the same Python backend that's been running in Termux for 18 days.

The Tech

I'm building this as a single HTML file with embedded CSS and JavaScript. The frontend communicates with the agent via HTTP—the Python backend exposes a simple REST API using Flask, and the frontend sends commands and receives responses.

The stack:

  • Frontend: HTML, CSS, JavaScript (single file)
  • Backend: Python Flask (lightweight, runs in Termux)
  • Communication: Local HTTP requests (localhost)
  • Styling: Dark theme matching the agent's aesthetic—black background, green terminal-style text, clean input field

Today's Progress

Task Status
Set up Flask in Termux ✅ Done
Created basic API endpoint (/command) ✅ Done
Built HTML frontend with chat interface 🔧 In progress
Connected frontend to backend 🔧 In progress
Styled the interface ⏳ Next

What Works So Far

The Flask server runs in Termux alongside the agent. I can send a POST request to http://localhost:5000/command with a JSON body like {"command": "Open WhatsApp"}, and the agent responds with the result.

The frontend is a single HTML file with a text input and a response display area. When I type a command and press enter, JavaScript sends a fetch request to the Flask backend and displays the response. It's basic, but it works.

What's Still Broken

Flask and the agent are fighting for the same terminal. I need to run Flask in the background while keeping the agent accessible. Currently using flask run --host=0.0.0.0 --port=5000 in one Termux session and the agent in another. It's clunky but functional.

The frontend is ugly. Pure HTML with minimal CSS. I'm designing the interface tomorrow—dark theme, clean typography, smooth animations. It needs to feel premium, not like a developer tool.

What's Next (Day 20)

  • Complete the frontend design
  • Add status indicators (showing what the agent is doing in real-time)
  • Test the full pipeline: type command in browser → agent executes → response displayed
  • Start writing the setup script

The Repo

👉 github.com/Dexter2344/phone-agent

The Flask backend is in server.py. The frontend will be in interface.html. Both will be in the repo by Day 20.

This is Day 19. The agent is getting a face. No more terminal-only. Let's build something people can actually use.

Top comments (0)