영상 링크: Claude Code Web JUST Dropped but I Already Built Something BETTER (with Codex!)
채널명: Cole Medin
Claude 코드 웹이 출시되었지만 직접 구축한 Codeex 기반 솔루션이 더 뛰어남 핵심 요약
- 영상은 Anthropic의 Claude Code Web 출시를 소개하며, 원격 AI 코딩 도구들의 장단점과 한계, 그리고 제작자가 직접 만든 맞춤형 Codeex 워크플로우의 우수성을 심도 있게 다룸
- Claude Code Web, Jules, OpenAI, Codeex 클라우드 등 원격 AI 코딩 솔루션들이 다양하지만, 사용자 정의 명령과 유연한 통제, 개별 서버 연동 등에서는 한계가 있다고 지적함
- 이에 제작자는 OpenAI의 Codeex SDK를 사용해, 본인이 직접 정의한 워크플로우와 룰을 기반으로 텔레그램 챗봇에 AI 코딩 보조 기능을 내장함
- 텔레그램, 슬랙, 깃허브 등 다양한 자체 애플리케이션에 Codeex 연동이 가능하며, 모바일 등 언제 어디서나 AI 코딩 요청 실행이 가능
- 실제 데모에서는 coach.dynamus.ai 웹사이트에 대한 코드 수정 요청과 스테이징→검증→프로덕션 배포까지의 모든 절차를 텔레그램에서 완료함
- 에이전트 워크플로우는 agents.md 파일로 정의하며, 브랜치 생성, 변경사항 적용·푸시, 스테이징 및 메인 배포, URL 피드백 제공 등이 자동화됨
- 브라우저에서의 배포 검증에는 Stagehand MCP 서버, browserbase 등의 도구를 활용, AI가 직접 웹사이트를 점검하고 재연세션 제공
- Codeex SDK와 깃허브 연동, 컨테이너 기반 환경 구성 및 인증, 환경변수 세팅 방식까지 구체적으로 설명함
- 모든 소스코드와 사용법은 오픈소스로 무료 제공, 텔레그램 봇 설정 및 원격 서버 배포까지 상세 가이드가 포함됨
- SDK 방식은 클라우드 기반 도구 대비 훨씬 유연한 맞춤제작 가능성을 제공, “비전문가도 자유롭게 AI 코딩 에이전트 구축 가능”이라는 점을 강조함
세부 요약 - 주제별 정리
Claude Code Web 및 원격 AI 코딩 도구들의 실제 한계가 존재함을 설명함
- Anthropic의 Claude Code Web 출시로, 원격에서 깃허브 리포지토리 기반 AI 코딩 요청 및 자동 작업 가능해짐
- Jules, OpenAI, Codeex Cloud 등과 같은 원격 agentic 코딩 서비스가 이미 다수 존재한다고 언급
- 그러나 사용자 입장에서는 자신만의 명령(command), 입력(prompt), 작업 체인 등을 자유롭게 설계하거나 고유 서버를 쉽게 연동하기 어려움
- AI 계층(global rule, 환경 등)을 따로 설정해야 하는 것도 비효율적이라고 지적함
- 제작자는 높은 자유도와 컨트롤을 제공하는 솔루션의 필요성을 느낌
자신만의 워크플로우와 Codeex SDK가 결합된 텔레그램 챗봇을 개발함
- OpenAI의 Codeex SDK를 직접 활용해 텔레그램 챗봇에 AI 코딩 보조 기능을 내장
- 워크플로우(요청 실행/검증/배포 등)는 직접 정의하여, 어디서든(모바일 포함) 다양한 애플리케이션 예: 텔레그램, 슬랙, 깃허브 등에 통합 가능
- 사용자가 자신의 애플리케이션에서 자유롭게 워크플로우를 기동할 수 있음
- 모든 구현물과 설정법은 오픈소스 형태로 깃허브 리포지토리(영상 설명에 링크)로 공개
실제 웹사이트에 대해 AI 코딩 요청부터 프로덕션 배포까지 텔레그램에서 완결함을 시연함
- 제작자의 유튜브 채널과 연결된 coach.dynamus.ai 웹사이트를 실제 데모 대상으로 지정
- 이 웹사이트는 RAG 에이전트(유튜브 영상 및 오픈소스 레포에 기반한 Q&A 기능 탑재)로 구성, 폼 제출 시 서비스 오픈 알림 신청 가능
- 가상 시나리오로 ‘골프장에 있을 때 웹사이트 개선 아이디어가 떠올라’ 휴대폰 텔레그램을 통해 AI 코딩 요청을 전송했다고 가정
- Codeex는 컨테이너에서 리포 클론, 새 브랜치 생성, 기능 개발 및 푸시, 스테이징 환경으로의 배포를 자동 수행
- 전체 작업 내역, 로그, 중간 메시지 등이 실시간으로 텔레그램에 표시됨
- 코드 수정/배포까지 걸린 시간 실측 결과 약 1분 내외
에이전트 워크플로우 전체 로직을 agents.md 파일 국내에 정의함으로써 유연성·자동성이 극대화됨
- 프로젝트 레포 내 agents.md가 코어 워크플로우 설계 파일로 지정
- agents.md는 기능 요청 시 어떤 순서로 어떤 작업(브랜치 생성, 변경, 푸시, PR 생성/병합, 스테이징/메인 배포 등)을 실행할지 모두 기술
- 컨테이너가 기동될 때 agents.md 파일이 Codeex SDK의 워크플로우 동작 규약으로 입력
- 요청 → 브랜치·변경·PR·배포까지 완전 자동화
- 각 배포 환경(Staging, Production) URL 및 검증용 링크도 함께 반환되도록 설계
스테이징 배포 검증(Validation)은 AI가 직접 브라우저에서 수행한 뒤 결과 재연까지 제공함
- Stagehand MCP 서버, browserbase 등 브라우저 세션 자동화 도구를 AI 워크플로우에 결합
- AI 코딩 보조가 스테이징 URL을 직접 방문, 실제 화면에서 변경사항 적용 여부를 점검
- 자동화된 검증 과정과 세션 리플레이(replay) 결과물은 사용자가 손쉽게 검증할 수 있도록 접근 가능
- MCP 서버 활용 시 입력창에서 “스테이징에 적용되었는지 확인해줘”와 같은 명령도 처리 가능
- 코드 변경 후 인간(사용자)이 직접 혹은 AI가 반복적으로 검증하는 ‘Human-in-the-loop’ 구조도 지원
최종 프로덕션 배포는 텔레그램에서 승인 후 자동화되어 즉시 반영됨
- 스테이징 검증 후, 텔레그램 상에서 “프로덕션에 배포할 것인지” 메시지로 사용자에게 최종 승인 요청
- 사용자가 승인하면, staging 브랜치→main 브랜치로의 머지 후 곧바로 프로덕션 빌드 및 배포 자동화
- Render(클라우드 플랫폼, 무료 Tier 활용함)에서 배포 상태 확인 및 성공 여부 실시간 체크
- 최종 라이브 사이트에서 변경사항 정상 반영됨을 직접 확인함 (“Your personal AI coach using Cole’s YouTube content” 등 문구 갱신)
맞춤형 Codeex SDK 통합은 클라우드 기반 AI 코딩 툴 대비 극대화된 유연성과 통제력을 제공함
- Codeex SDK를 TypeScript로 설치, 다양한 명령·루ール을 원하는 대로 추가 가능
- 각 채팅 사용자별 스레드(thread) 관리로 연속적 대화와 세션 유지 가능
- 에이전트 워크플로우, 글로벌 룰, 명령어(/slash command) 등 전체 AI 계층을 코드와 연동
- 클라우드·웹 도구에서는 불가능한 세부적 조건, 예외, 커스텀 로직을 마음껏 구현 가능
- 모바일, 웹, 데스크톱 등 플랫폼 무관하게 통합 사용 가능
실제 구현 코드와 인증(Authorization)/환경 변수 세팅 방식을 구체적으로 안내함
- Codeex CLI(codeex o)로 인증하면 o.json 파일에 OpenAI 인증 정보 자동 저장
- 컨테이너 환경에서는 해당 인증 정보를 환경변수(ENV)로 주입해 SDK가 인식하도록 설계(Readme 전체 설명)
- 깃허브 인증 토큰도 동일한 방식으로 환경변수 입력, 컨테이너 내에서 깃허브 액세스 가능
- 텔레그램 봇 토큰, Stagehand MCP 서버 정보 등도 별도 ENV로 세팅
- 전체 셋팅법과 환경초기화는 README 파일에 단계별로 상세 기록
텔레그램과 Codeex 연동 코드 및 세션 유지, 동적 경로 전환 기법까지 소스 수준에서 설명함
- TypeScript의 telegraf 라이브러리로 텔레그램 메시지 핸들링 구현
- 사용자 ID 기반으로 세션 및 thread 생성/유지, 대화 흐름 끊김 없이 지속적 요청 처리
- 코드 상에서 워킹 디렉토리 전환 명령도 지원(ex. 여러 리포지토리 작업 시 컨테이너 재시작이 불필요)
- thread.runStreamed 함수로 실시간 응답, 단계별 실행 내역 자동 스트리밍
원격 서버(Digital Ocean 등) 배포로 언제 어디서나 ‘상시’ AI 코딩 에이전트 사용이 가능함
- 클라우드 서버(예: Digital Ocean droplet)에 솔루션을 원격 배포하여 개인 PC가 없어도 모바일 등 어디서나 즉시 접속 가능
- 텔레그램 봇으로 AI 코딩 요청 ―> 컨테이너에서 작업 실행 ―> 깃허브/프로덕션 연동까지 완결
- 사용자는 텔레그램 UI만 있으면 AI 코딩·배포 풀 사이클 완전 제어 가능
SDK 기반 맞춤 솔루션은 AI 코딩 어시스턴트 구축에서 최고의 유연성과 확장성을 제공함을 강조함
- SDK(Codeex, Claude 등) 방식은 누구나 손쉽게 자신의 에이전트, 에이전트 워크플로우, 명령어, 인터페이스를 자유롭게 제작 가능
- 기존 클라우드 기반 AI 코딩 서비스가 제공하지 못하던 맞춤형 자동화, 디버깅, 인증, 스테이징/프로덕션 배포, 브라우저 기반 검증 등 다양한 기능 간단히 추가 가능
- 예시로 텔레그램/슬랙/깃허브 등 애플리케이션과 통합, slash command 설계, 글로벌 룰 세팅, 유저 세션 정교한 관리 등 실제 구현 코드와 연계
- 영상은 “SDK 이용 AI 에이전트 구축의 무한 확장성”을 실제 사례를 들어 구체적이고 투명하게 증명함