In this module, we deploy a custom UI that is similar to the capabilities you get with ChatGPT-Codex. Then, we submit a coding task to the SWE agent.

  • Goal: Clone a minimal ChatGPT-Codex style frontend and connect it to to the agent your deployed in the previous module.

​
Use-case

Many times, AI Agents running on a Backend-as-a-Service platform are a part of a wider application. In this case, our AI agent is already available, and we’d like to hook it up to a task management system. The task management system in this module is not a part of the xpander.ai platform, and it’s simply used for demonstration purposes.

​
Clone the frontend example app

We’ll start by cloning and installing the prebuilt UI:

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

​
Configure environment variables

Copy the example .env file and populate it

mv .env.example .env

Fill in the following:

# API Key - Available in xpander.ai UI from Settings -> API keys 
VITE_APP_API_KEY=your_api_key_here
# Agent ID - Available in xpander.ai UI from the Workbench -> SDK node at the top of the canvas
VITE_APP_AGENT_ID=your_agent_id_here
# Organization ID - Available in xpander.ai UI from Settings -> API keys
VITE_APP_ORGANIZATION_ID=your_organization_id_here

​
Github manual fork

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

  1. Go to https://github.com/xpander-ai/apps-by-agents
  2. Fork the repo
  3. In the Task management app Web UI, submit the prompt and mention your forked repo
  4. For example:

Add a simple, cool and beautiful todo list app (HTML, CSS, JS) to <address of your fork> 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.

​
Start the App

Launch the demo app locally:

npm run dev

Then navigate to:

http://localhost:3000

Your AI Agent’s task management demo app:

​
Send your first coding task

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 feel free to be creative, but specify that it should be an (HTML, CSS, JS) app, and mention the address of your forked repo

​
Track task execution

Click View codex logs to view real-time execution details and explore the logs. Pay attention of the way codex manage and run 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

​
Succesful app creation

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

  1. Submit a new PR (manually) from your fork to xpander-ai/apps-by-agents

​
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.

Check out your Pull Request at: https://github.com/xpander-ai/apps-by-agents

→ Proceed to Module 3: Advanced customization