DEV Community

Cover image for How to Build an AI Translator with OpenAI Codex. Vibe Coding Tutorial
Skapi
Skapi

Posted on

How to Build an AI Translator with OpenAI Codex. Vibe Coding Tutorial

#webdev #vibecoding #ai #tutorial

In this article I’ll show you how to build a complete AI-powered translation app without writing a single line of code. The trick is to let AI and special tools handle everything, frontend and backend, so anyone can launch an app with zero deep-tech knowledge.

The demo app is an AI Translator that calls OpenAI ChatGPT to translate text into any language the user selects. The frontend is generated by OpenAI Codex; the backend runs on Skapi, a no-code backend-as-a-service. All I did was combine these services and supply the right prompts - no hand-coding at all. Follow the same steps below and you’ll have a working translator too.

The Idea Behind the OpenAI Codex AI Translator

  1. Use Codex to generate the entire frontend.
  2. Wrap ChatGPT calls so it handles the translation logic.
  3. Use Skapi for secure backend operations (auth, DB, secrets).
  4. Control everything from GitHub + VS Code, avoiding manual deployment.

1. Create & Prepare Your GitHub Repository

  1. Create a new repo (need help? watch this short step-by-step guide).

  2. Add two files to the repo:

  • AGENTS.md – the blueprint Codex will read. You can download the ready-made file from our documentation page or just copy the instructions from here: 
# Instructions

Build a complete web application using static HTML files with backend functionality powered by Skapi.

# Requirements

## Backend Integration

Use the Skapi API to implement all backend features. Refer to the Skapi API documentation file "skapi.md" in the repository.

The service ID is "" and the owner ID is "".

## Page Routing and Navigation

* Set the starting page as index.html.
* Ensure all form actions point to their correct destination pages so the app functions correctly when opened locally (e.g., via the file:// protocol).

## Authentication and Initialization

* Each HTML page must initialize the skapi-js library on load.
* Implement login state checks on each page.
* Redirect unauthenticated users when accessing restricted pages.

## Styling Guidelines

* Use a modern, material-style design.
* Ensure buttons and input elements are sized appropriately to match current UI standards.
* Use consistent box-sizing (e.g., border-box) to prevent layout issues, especially for elements with width: 100%.
Enter fullscreen mode Exit fullscreen mode

In AGENTS.md, replace The service ID is "" and the owner ID is ""
with your real service_id and owner_id from Skapi (see next section).

2. Generate Skapi Credentials & Update AGENTS.md

  • Sign up (free trial) or log in at Skapi.

Skapi api firebase alternative getting started page

  • Create a New Service → Getting Started → copy Owner ID & Service ID.

  • Paste both IDs into AGENTS.md, then Commit Changes.

Vibe coding in OpenAI Codex

Why? Skapi provides auth, DB, file storage and third-party requests directly from the frontend, so Codex needs these IDs to wire calls correctly.

3. Connect Your Repo to OpenAI Codex

  • In Codex, go to Manage Environments → Add Environment.

  • If your repo isn’t listed, click Missing a repo? and you will be redirected to Github, give it access to Codex (Settings → Applications → Repository access).

how to give Github access to Codex

  • Then back to Codex, refresh, select the repo, click Create Environment, then Use This. Codex now sees your code base and can push PRs automatically.

4. Create an OpenAI API Key & Store It in Skapi

  • Log in at platform.openai.com → Settings → API Keys → Create new secret key (ai-translator).

  • Copy and save the key in a secure place - it will never be shown again.

  • In Skapi Dashboard → Client Secret Keys → Register Key.

Name: translator
Value: your OpenAI secret key.

OpenAI secret key

5. Prompt Codex to Build the Chatbot UI

Use a prompt like:

“Build a chatbox where a user can talk to their chatbot that acts like a language translator.
For chatbot responses, use Skapi's Client Secret Request to make requests to OpenAI's text generation and prompting API.
The clientSecretName is "translator”.

Codex generates code, opens a Pull Request (PR), and pushes files.

6. Merge & Sync Code

  • In Codex UI → View PR → GitHub → Merge PR → Confirm.
  • In VS Code: Clone the repo (green Code button → copy URL). Pull after each Codex fix (Source Control → … → Pull).

7. Test & Debug

Open index.html in your browser.

AI wrapper chatbox application web app debug

  • If you hit errors (e.g., Cannot read properties of undefined), copy the message and prompt Codex:

“We get Cannot read properties of undefined (reading '0'). Please fix it.”

  • Codex patches, creates a new PR - merge, pull, retry. Two iterations usually do the trick.

Result

ai online translation made with vibe coding

As you can see, it’s totally possible to get a fully functional AI translator app with vibe coding. Codex handles the UI generation, and it even fixes its own bugs. But to make this work, you need to teach Codex how to use the tools like Skapi, OpenAI ChatGPT, GitHub, and VS Code and use the right prompts.

If anything is unclear, please refer to our GitHub repo and detailed free step-by-step video tutorial:

Don’t hesitate to reach out with questions. Let us know in the comments if you tried this project or experimented with other vibe coding ideas using OpenAI Codex.

Follow us on social media (YouTube, Threads, Instagram, LinkedIn) to stay updated on our latest tutorials and AI coding experiments.

See you later!

Top comments (0)