Building a Tide App Mini Program with Codex in 4 Sessions: A Hands-On AI Coding Agent Tutorial

Rapidly Building a Mini Program with an AI Coding Agent: Project Overview

Tide App is a holistic wellness application that integrates sleep, focus, breathing, and meditation features — rich in functionality with polished interactions. Building a WeChat Mini Program version from scratch would take a seasoned front-end engineer considerable time. But with OpenAI's Codex coding Agent, the entire process was compressed into just four sessions.

OpenAI Codex is an AI coding agent tool from OpenAI, built on large language models. It can understand requirements described in natural language and automatically generate runnable code. Unlike traditional code completion tools (such as GitHub Copilot's line-level suggestions), Codex as an Agent has much greater autonomy — it can read project context, understand file structures, plan implementation steps, and independently complete the entire workflow from architecture design to code writing within a sandbox environment. Codex's Agent mode means it doesn't just respond to individual commands; it continuously tracks task state, proactively gathers information, and handles complex multi-step development tasks.

Bilibili creator WinterMiao demonstrated through a complete hands-on walkthrough how to use Codex alongside WeChat Developer Tools to rapidly build a Tide App Mini Program version, from project initialization to feature implementation. This case study not only showcases the efficiency of AI programming but also reveals several critical practical techniques.

Project Initialization and agents.md Configuration

Creating the Mini Program Project

The first step is creating a project in WeChat Developer Tools. The project was named tab-mrp (Mini Program abbreviation), using the TypeScript base template. A test AppID can be used during the demo phase, while a formally registered Mini Program account is needed for production release.

WeChat Mini Programs use a unique dual-thread architecture: the logic layer (AppService) runs JavaScript/TypeScript code, while the rendering layer (WebView) handles page display, with the two communicating through the Native layer. Mini Programs are developed using WXML (an HTML-like template language), WXSS (a CSS-like styling language), and JS/TS. project.config.json is the core configuration file for a Mini Program project, defining the AppID, project settings, compilation options, and more. app.json is the application-level configuration, where the pages array declares all page paths and the tabBar configuration defines the bottom navigation bar structure. This standardized project structure enables AI Agents to quickly understand the tech stack and project organization by reading configuration files.

The critical step is writing the agents.md file. This file is essentially a "requirements specification" and "technical standard" for the AI coding Agent. agents.md is a conventional configuration file in Codex projects, similar to .editorconfig or .cursorrules in other developer tools. Its purpose is to provide the AI Agent with project-level context, including project positioning, tech stack constraints, coding standards, and feature requirements. The AI Agent reads this file first before starting work, using it as the foundational framework for all subsequent decisions. The design philosophy behind this mechanism is: rather than having the AI infer project intent from scratch, developers explicitly declare key constraints, dramatically reducing the AI's interpretation errors. The quality of agents.md directly impacts the accuracy of AI output — it is essentially the most important input interface on the "human" side of human-AI collaboration.

The author modified an existing agents.md from a previous iOS version, with key changes including:

• Removing all iOS-related descriptions (e.g., "ensure iOS17+ compilation passes")
• Changing the role definition to "You are a Mini Program engineer"
• Changing the product description to "I am developing a Tide-style Mini Program"
• Keeping feature requirements unchanged (sleep, focus, breathing, and meditation modules)

agents.md must be placed in the project root directory — this is the entry file through which Codex identifies project specifications.

Importing into Codex and Enabling Plan Mode

After dragging the project root directory into Codex, telling it "I've updated agents.md" prompts Codex to automatically read the file contents. Here's an important operational choice — enabling Plan Mode.

Plan Mode is an interaction strategy in AI coding Agents that corresponds to the "plan first, execute later" software engineering methodology. In Plan Mode, the Agent doesn't immediately generate code. Instead, it first outputs an implementation plan — including file structure design, module breakdown, implementation steps — and proactively asks the user questions when ambiguities exist. This mode draws from the Chain-of-Thought concept, reducing error rates by forcing the Agent to perform explicit reasoning. In contrast, direct execution mode is faster but prone to directional errors when requirements are complex or descriptions incomplete, leading to significant rework. Plan Mode is especially suitable for the project initialization phase, since the cost of fixing architecture-level mistakes far exceeds that of implementation-level bugs.

The benefit of Plan Mode is that if the requirements description isn't thorough enough, Codex will proactively ask questions to gather necessary information rather than blindly starting to code. This is much safer than letting it jump straight into writing code.

One notable detail: the author never explicitly told Codex the technical approach. As a coding Agent, Codex automatically reads configuration files like project.config.json in the project to infer the tech stack and development standards.

Codex's Code Implementation Process

Automated Project Architecture Setup

Once Codex started working, it automatically completed the following architecture setup:

• AudioManager: Audio management module
• AudioService: Sound processing service
• Breeze: Breathing-related helper class
• Multiple page files: Sleep, focus, breathing, meditation

In app.json, Codex automatically registered all pages in the Pages array and configured the TabBar — with four tabs for sleep, focus, breathing, and meditation, perfectly matching the original Tide App's feature modules.

The Quality Advantage of AI-Generated Code

The author specifically highlighted an observation: AI-written code is more standardized than what most programmers produce. This is evident in:

• Clear and intuitive file naming (e.g., AudioManager immediately tells you it manages audio)
• Well-organized code structure with clear hierarchy
• Reasonable separation of module responsibilities

This is because Codex was trained on vast amounts of high-quality open-source projects, putting its coding proficiency at an expert level. The training data for large language models includes billions of lines of code from GitHub, including best practices from well-known open-source projects. Through statistical learning, the model has internalized naming conventions, design patterns, modularization principles, and other software engineering knowledge. This makes AI-generated code naturally inclined to follow community-recognized best practices rather than the bad habits individual developers might develop.

The author also pointed out that if you find AI "dumb," the most likely reasons are twofold: either the requirement description is too vague for the AI to accurately understand the intent, or the context window is limited — just like how humans can only focus on a finite amount of information at once. The context window is one of the core limitations of large language models, determining the total amount of information the model can "see" and "remember" in a single interaction. When project code exceeds the context window, the model may forget earlier constraints or produce inconsistent output.

Debugging and Mini Program-Specific Considerations

Network Request Domain Configuration

After successful compilation, the first issue encountered was "network loading failed." This is a classic problem in WeChat Mini Program development — you must configure legitimate request domains in the Mini Program backend.

For security reasons, WeChat Mini Programs enforce strict network request controls. All network requests made through APIs like wx.request, wx.uploadFile, and wx.downloadFile must have their target domains pre-registered in the Mini Program backend on the WeChat Official Accounts Platform. This mechanism, known as "legitimate domain" configuration, requires domains to have ICP filing, support HTTPS, and cannot use IP addresses or localhost. This design prevents Mini Programs from being used for malicious data collection or connecting to unvetted servers. During development, developers can check the "Do not verify legitimate domains" option in WeChat Developer Tools to bypass this restriction, but domain configuration must be completed for production release.

The specific steps: WeChat Developer Tools → Details → Project Configuration → request legitimate domains, then add the API's base URL. If using a test account, you need to log into the corresponding test account backend to configure it. After saving the configuration, you may also need to clear the network cache for changes to take effect.

The Dual-Layer Permission Restrictions of Mini Programs

The author provided an in-depth analysis of the fundamental differences in permissions between Mini Programs and native apps. Mini Program permissions are subject to dual-layer restrictions:

1. First layer: Which permissions the operating system grants to the WeChat app
2. Second layer: Which permissions WeChat grants to Mini Programs

The permission model for Mini Programs is fundamentally different from native apps. Native apps interact directly with the operating system, obtaining permissions (such as camera, location, notifications) through system-level APIs. Mini Programs run in WeChat's sandbox environment, forming a three-layer nested structure of "Operating System → WeChat App → Mini Program." The first layer of restriction is the scope of permissions the OS grants to WeChat, and the second layer is the subset of capabilities WeChat exposes to developers through its Mini Program framework APIs. For example, even if the OS allows WeChat to set system alarms, WeChat may not expose this capability to Mini Programs. Additionally, Mini Programs face constraints on background runtime (typically suspended after 5 minutes), memory limits, and package size limits (2MB per package, 20MB total). These limitations mean that certain native app features require alternative solutions or graceful degradation in Mini Programs.

This means features like system alarms may not be directly accessible from a Mini Program. The timed reminder feature in Tide App can only work while the Mini Program is in the foreground. Testing confirmed that the alarm reminder function works properly when the Mini Program stays in the foreground.

Practical Tips for Using Codex

During the development process, the author shared several efficiency-boosting tips:

• Nudge feature: You can interrupt Codex at any time while it's working — for example, sending "help me finish quickly" to speed things up. It will reduce verification steps and prioritize delivery.
• Plugin system: Codex offers plugins like iOS and Frontend. When developing Mini Programs, you can enable the Frontend Scale plugin since Mini Programs are essentially front-end applications written in JS/TS.
• Automatic checks: Codex automatically performs basic syntax and compilation checks, even if agents.md doesn't explicitly require them.
• Disable hot reload: When Codex modifies files, it triggers hot reload in WeChat Developer Tools, which interferes with testing. You can disable automatic hot reload in device settings and switch to manual refresh.

Hot Reload is a common feature in modern development tools that automatically recompiles and refreshes the application interface when code files change, helping developers see modifications in real time. However, when an AI Agent continuously modifies multiple files in rapid succession, frequent hot reloads become counterproductive — each file save triggers a reload, potentially leaving the application in an intermediate state or causing frequent flickering, which impairs the developer's ability to judge the final result.

Final Results Verification

Through Codex's automated development, all four core feature modules were implemented:

• Sleep module: Supports setting wake-up time, countdown, and alarm reminders (effective in foreground)
• Focus module: Plays focus sound effects with background playback support
• Breathing module: Breathing guidance exercises with proper rhythm control
• Meditation module: Quick sleep-onset and other meditation guidance features

All features passed testing in the WeChat Developer Tools simulator. Detail issues like tab icons can be refined later by simply telling Codex "add icons to each tab."

Summary and Takeaways

This case study demonstrates the powerful capabilities of AI coding Agents in real-world projects. Starting from a single agents.md file, Codex autonomously completed the entire workflow — project architecture design, code writing, page registration, and feature implementation. The developer's role shifted from "the person who writes code" to "the requirements definer and quality gatekeeper."

This shift reflects a paradigm migration underway in the software development industry: from "manual coding" to "AI-assisted coding" to "AI-autonomous coding with human oversight." Developers' core competitive advantage is shifting from coding ability to system design skills, requirements analysis capabilities, and quality judgment. Understanding business logic, steering technical direction, and identifying potential issues in AI output — these higher-level engineering competencies are becoming more important than specific syntax knowledge.

The key lessons can be summarized as:

• The quality of agents.md determines the quality of AI output — writing a good requirements specification is the top priority
• Plan Mode is more reliable than direct execution — let the AI understand before it acts
• Understanding platform limitations remains irreplaceable — for example, the dual-layer permission restrictions of Mini Programs require developer judgment
• Leveraging nudges, plugins, and other auxiliary features can significantly boost AI programming efficiency