​
Module Summary

  • Goal: Clone a minimal ChatGPT-Codex style frontend and connect it to xpander.ai as your backend service
  • Estimated Time: 15–20 minutes
  • Prerequisites: React knowledge, completed backend setup from Module 1

​
🧠 Architecture Reminder

In this module, you’re using xpander.ai purely as a Backend-as-a-Service (BaaS) platform .

The frontend you’ll run is not part of the xpander.ai platform - it’s a standalone React app that mimics the ChatGPT-Codex UI and uses the xpander.ai SDK to communicate with your configured agent.

​
🧱 Step 1: Clone the Frontend Example App

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

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

​
🔐 Step 2: Configure Environment

Copy the example environment file and populate it with your credentials from xpander.ai Cloud:

mv .env.example .env

Fill in the following:

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

​
Get Your Organization ID & API Key

​
Copy Your Agent ID

​
⚙️ Step 3: Start the App

Launch the frontend locally:

npm run dev

Then navigate to:

http://localhost:3000

​
✍️ Step 4: Send Your First Coding Task

From the input field, send one of the example prompts below:

​
🔍 Step 5: Track Task Execution

Click View to view real-time execution details.

⏳ Note: Task execution may take a few minutes - sit back, relax, and watch the agent work its magic.

​
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

When you submit a task, the app uses the xpander.ai SDK (via a Web Worker) to create and run the task in the cloud - fully serverless.

The worker handles:

The UI polls task status and updates in real time using React Query.
You can see this in action inside:

The Codex tool streams logs to a centralized Logstash tied to your account.
Logs are stored for a limited period and made available via the logs.xpander.ai micro-service.

The frontend fetches these logs through polling (every 2s) using the SDK inside a Web Worker.

💡 A task can include multiple threads - each representing a conversation or execution chain tied to your agent.

​
✅ What’s Next?

Your frontend is now live and connected to the xpander.ai BaaS. You prompted the agent to generated its first coding task :)

→ Proceed to Module 3: Competition Submission