Claude Code Web JUST Dropped but I Already Built Something BETTER (with Codex!)

Key Concepts

• Remote Agentic Coding: AI agents performing coding tasks remotely without direct human intervention for each step.
• CodeX SDK: A software development kit from OpenAI that allows programmatic interaction with CodeX, an AI coding assistant.
• Telegram Integration: Using Telegram as a user interface to interact with the AI coding assistant.
• Custom Workflows: Defining and implementing personalized sequences of AI actions and commands.
• Human-in-the-Loop: Incorporating human oversight and validation at critical stages of the AI workflow.
• BrowserBase: A platform for running remote browser sessions, used for AI agent validation.
• Stage Hand MCP Server: A tool to direct AI agents to navigate and interact with websites for validation.
• Environment Variables: Configuration settings used to authenticate and authorize access to services like CodeX and GitHub within a containerized environment.
• Threads (CodeX SDK): A mechanism within the CodeX SDK to manage distinct conversation histories with the AI.

Detailed Summary

Introduction to Remote Agentic Coding and the Need for Customization

The video begins by introducing Anthropic's Cloud Code for the web as an example of remote agentic coding, where AI coding assistants can operate on GitHub repositories. The speaker acknowledges the existence of other tools like Jules, OpenAI, and Codeex's cloud version for similar functionalities. However, the speaker expresses a personal dissatisfaction with these existing tools due to a perceived lack of flexibility and control. Key limitations identified include the inability to define custom chained commands and prompts, difficulties in connecting personal MCP servers, and a preference for integrating the AI layer (global rules) directly with the request initiation point, rather than managing them separately.

The Speaker's Custom Solution: CodeX Integrated with Telegram

To address these limitations, the speaker presents their own custom solution: integrating OpenAI's CodeX directly into Telegram. This solution is powered by the speaker's defined workflow and allows requests to be initiated from any application, including a mobile phone via Telegram. The core advantage highlighted is the ability to integrate CodeX into any desired application or workflow, creating a personalized custom solution.

Demo: Website Update from Code to Production Deployment

The video then proceeds to a live demonstration of this workflow, aiming to update a website from code to a production deployment using CodeX.

• Website Context: The demo utilizes a website called coach.dynamus.ai, an agent being built for the speaker's YouTube channel. This agent is a RAG (Retrieval-Augmented Generation) agent trained on YouTube videos and open-source repositories, designed to answer questions about building agents and using AI coding assistants. The website includes a form for users to be notified of its availability.
• Scenario: The speaker simulates being away from their computer (e.g., on the golf course) and having a website update idea. They intend to use Telegram on their phone to instruct CodeX to implement this idea.
• Workflow Steps:
  1. Initiating the Request: The request is sent via Telegram, specifying the target GitHub repository.
  2. Repository Cloning: The AI agent starts by cloning the specified repository into a containerized environment. This is done using the GitHub CLI, with authentication pre-configured within the container.
  3. Branch Creation: A new branch is created for the changes, as defined in an agents.md file within the repository. This file dictates the entire workflow.
  4. Code Modification and Staging Deployment: CodeX makes the necessary code changes and pushes them to a staging environment (a secondary, test version of the website).
  5. Staging Verification:
     • Automated Validation: The workflow includes a "human-in-the-loop" step where the AI agent uses a Stage Hand MCP server and BrowserBase to validate its own changes on the staging URL. This involves creating a remote browser session, visiting the URL, and confirming the deployed changes. Session replays are available for human review.
     • Human Review: The speaker can also manually verify the staging URL.
  6. Production Deployment: Upon successful validation, the speaker approves the deployment to production. This involves creating a pull request from the staging branch to the main branch. The cloud platform (Render, on the free tier) automatically builds and deploys changes to production upon commits to the main branch.
• Demo Outcome: The demo successfully updates the website copy on the staging environment and then deploys the change to production, demonstrating an end-to-end workflow initiated from a mobile phone.

Under the Hood: The CodeX SDK and Telegram Integration

The speaker then delves into the technical aspects of how this integration was built.

• Future of AI Coding: The speaker believes the future of AI coding lies in using SDKs like the CodeX SDK or Claude Agent SDK to build custom AI coding assistants that integrate with any workflow and application.
• CodeX SDK (TypeScript):
  • The CodeX SDK is a TypeScript library.
  • It's installed as a package and imported into the code.
  • Threads: Conversations with CodeX are managed through "threads."
  • Running Threads: Sending a user prompt initiates a thread, which automatically loads slash commands from a codex folder and the agents.md file. This replicates the AI layer from the CodeX CLI within custom workflows.
  • Streaming Events: The runStream function allows for real-time streaming of events, enabling the display of AI actions as they occur. The end of a turn can be detected to move to the next message.
  • Resuming Threads: Threads can be resumed using a threadId, allowing for persistent conversations. The Telegram integration is set up to maintain one conversation per user, resuming threads until explicitly reset.
• Authentication:
  • CodeX Authentication: Similar to the Cloud Agent SDK, CodeX CLI authentication (codeex auth) creates an o.json file containing credentials for OpenAI. These credentials are automatically available to the SDK.
  • Containerized Environment: When running in a container, direct CLI authentication isn't possible. Instead, credentials from the o.json file are copied and set as environment variables within the container. This ensures CodeX authentication is ready for isolated environments.
  • GitHub Authentication: A GitHub token is obtained from a specific URL and set as an environment variable for the container.
  • Telegram Bot Token: The token for the Telegram bot is also configured as an environment variable.
• Stage Hand MCP Server (Optional): The Stage Hand MCP server for browser automation is presented as an optional component. Users can choose to manually validate websites if they don't require the AI-driven validation with session replays.
• Setup and Deployment: The speaker emphasizes the ease of setup, requiring only the configuration of environment variables and spinning up the container. The solution can even be deployed remotely to platforms like DigitalOcean droplets for continuous access from any device.

Code Walkthrough (High-Level)

A brief code walkthrough illustrates the integration:

• Telegram Library: The telegraf library in TypeScript is used for Telegram integration.
• Message Handling: A function handles incoming Telegram messages, retrieving user ID and message content.
• Session Management: It gets or creates a Telegram session based on the user ID.
• CodeX Thread Management: It gets or creates a CodeX thread, similar to the SDK's thread management.
• Bot Typing Indicator: An update is sent to indicate the bot is typing.
• Running the Stream: The runStream function is called to process the user prompt.
• CodeX SDK Invocation:
  • codex.st.startThread() is used to create a new thread, passing the current working directory.
  • Commands exist in Telegram to switch the current working directory without restarting the container.
  • thread.runStreamed() is called with the user prompt to invoke CodeX.

Conclusion and Call to Action

The speaker concludes by reiterating the power and flexibility of building custom AI coding assistants using SDKs. They emphasize that this approach offers significantly more control and integration possibilities compared to off-the-shelf cloud solutions. The speaker encourages viewers to try out the integration themselves, highlighting that the entire workflow is free to get started. They express hope that this sparks imagination for future AI agent development and requests likes and subscriptions for more content on AI agents and coding assistants.