In this module, we deploy a custom UI that is similar to the capabilities you get with ChatGPT-Codex, connect it to Agent Backend, and we will submit development tasks while we explore how the agent is working.

Goal: Build a full-stack coding agent (Frontend and Backend) and task it to write an application and send a PR completely autonomously

​
Step 1: GitHub Manual Fork

To submit a PR with your generated app to the apps-by-agents repository, first fork the repo:

  1. Go to https://github.com/xpander-ai/apps-by-agents
  2. Fork the repo to your GitHub account

​
Step 2: Clone the frontend example app

We’ll start by cloning and installing the pre-built UI:

git clone https://github.com/xpander-ai/coding-agent-frontend-example-app.git
cd coding-agent-frontend-example-app
npm install

​
Step 3: Configure environment variables

Copy the example .env file and populate it

mv .env.example .env

​
Step 4: Connect the Frontend to the Agent Backend

In the frontend application, go to the .env file and fill in the following:

# API Key - Available in CLI output
VITE_APP_API_KEY=your_api_key_here
# Agent ID - Available in CLI output
VITE_APP_AGENT_ID=your_agent_id_here
# Organization ID - Available in the CLI output
VITE_APP_ORGANIZATION_ID=your_organization_id_here

​
Step 5: Start the frontend app

Launch the demo app locally:

npm run dev

Then navigate to:

http://localhost:3000

Your AI Agent’s task management demo app:

If you have already downloaded the Agent code using the xpander cli xpander init, ensure that xpander_handler.py is running. Otherwise, events will be routed to the serverless hosting.

​
Step 6: Send coding tasks

Your local task management demo app is now connected to the SWE agent you deployed in the last module. Let’s start using it.

In the input field, submit one of the example prompts below

In the Task management app Web UI, submit the prompt and mention your forked repo

For example:

“Add a simple, cool, and beautiful todo list app (HTML, CSS, JS) to my-github-user-name/apps-by-agents in one-shot, single commit.”

Your coding agent will push the app to your forked repo, afterwards you’ll create a PR to the original repo.

Feel free to be creative, but specify that it should be an (HTML, CSS, JS) app, and mention the address of your forked repo

​
Step 7: Track task execution

Click View codex logs to view real-time execution details and explore the logs. Pay attention to the way Codex manages and runs the agentic loop and the creation process of your app.

⏳ Note: Task execution takes a few minutes - sit back, relax, and watch the agent work its magic. Codex may split the task into multiple sub-tasks that can take up to 15 minutes. If it takes more than 15 minutes, just let it run in the background and proceed with the rest of the workshop.

You’ll see:

  • Top: The original prompt or task
  • Popup: Logs and generated output from the agent
  • Result: Execution result
  • Logs & Messages Buttons: Execution messages logs & codex execution logs

Successful app creation

Pay attention, your PR is targeting the fork and not xpander’s repo

​
Summary and next steps

Your SWE task management UI is now live and connected to the SWE agent hosted on xpander.ai. Through the UI, you instructed the agent to build an application and push it to the apps-by-agents repo.

→ Proceed to Module 3: Advanced customization