Tutorial Codex CLI MCP: Membangun Agen Dasbor Portofolio

Anda mungkin sudah memperhatikan bahwa agen pengkodean AI sangat berguna saat Anda perlu menulis fungsi kompleks atau men-debug error yang rumit. Namun, sering kali mereka menemui jalan buntu. Biasanya mereka berhenti membantu ketika Anda memerlukan informasi yang tidak ada di dalam file proyek Anda.

Bayangkan jika agen pengkodean Anda benar-benar bisa menjangkau luar lingkungan itu untuk mengambil data live, mencari dokumentasi terbaru, atau menggunakan berbagai alat atas nama Anda. Di situlah agen-agen ini menjadi jauh lebih kuat.

Dalam tutorial ini, saya akan memandu Anda langkah demi langkah cara mewujudkannya menggunakan Codex CLI dan Model Context Protocol, atau MCP. Kita akan membahas dasar-dasar cara Codex CLI dan MCP bekerja bersama, membangun proyek dasbor keuangan dari nol menggunakan data saham live, membahas pola multi-agen, dan meninjau praktik terbaik keamanan.

Agar mendapatkan hasil maksimal, saya sangat menyarankan Anda mengikuti langsung. Buat proyek Next.js baru, pastikan Anda memiliki instalasi Codex CLI yang berfungsi, dan dapatkan kunci API gratis dari Alpha Vantage agar kita siap membangun.

Jika Anda baru di AI agentic, saya sangat merekomendasikan untuk mengikuti jalur keterampilan AI Agent Fundamentals kami.

Dasar-Dasar Codex CLI MCP

Sebelum masuk ke pengkodean, kita harus memahami alat yang kita gunakan. Mari mengurai apa itu MCP dan bagaimana Codex CLI memanfaatkannya.

Apa itu MCP?

Jadi, apa itu MCP? Kepanjangan dari Model Context Protocol. Ini adalah standar terbuka yang diperkenalkan oleh Anthropic untuk menstandarkan cara sistem AI terhubung ke alat dan sumber data eksternal. Secara teknis, protokol ini beroperasi melalui JSON-RPC 2.0 lewat STDIO (standard input/output) atau HTTP.

Sumber: truefoundry

Alasan ini penting adalah karena MCP secara efektif menyelesaikan masalah besar, yang bisa kita sebut sebagai “mimpi buruk integrasi”: Di masa lalu, jika Anda ingin menghubungkan LLM ke basis data atau alat tertentu, Anda sering harus membangun konektor khusus untuk pasangan spesifik itu. Rumit, sulit dirawat, dan kurang skalabel.

Dengan MCP, kini kita memiliki satu protokol terpadu untuk semua koneksi alat LLM. Ini menyederhanakan lanskap ini dengan mengganti integrasi khusus menjadi antarmuka standar.

Jika Anda ingin memahami apa yang terjadi di balik layar, panduan membangun server dan klien MCP dari nol ini adalah pendamping yang baik.

Apa itu Codex CLI?

Sekarang, mari bahas Codex CLI. Ini adalah agen pengkodean ringan berbasis terminal dari OpenAI. Seperti alat pengkodean AI lainnya, seperti Claude Code atau Cursor, alat ini dirancang untuk benar-benar memahami konteks seluruh proyek Anda, bukan hanya file yang sedang Anda buka.

Ia menggabungkan semuanya di satu tempat, menyatukan pengindeksan kode yang efisien, riwayat percakapan, dan eksekusi perintah nyata ke dalam satu Text User Interface (TUI). Hampir semua perilakunya dapat dikontrol dan dikustomisasi dengan mengedit berkas config.toml, yang membuatnya mudah dikelola.

Cara Codex mengimplementasikan MCP

Dalam implementasi MCP, Codex mendukung server STDIO dan server Streamable HTTP:

• Server STDIO berjalan sebagai proses lokal. Anda bisa menganggapnya sebagai perintah dan argumen tertentu yang berjalan langsung di mesin Anda.
• Server Streamable HTTP terhubung dari jarak jauh melalui URL dan opsional mendukung token bearer atau autentikasi OAuth untuk akses.

Salah satu fitur yang sangat praktis di sini adalah Codex CLI dan ekstensi IDE berbagi berkas config.toml yang sama. Artinya, Anda mendapatkan tooling MCP yang konsisten baik saat bekerja di terminal maupun editor; Anda tidak perlu mengonfigurasikannya dua kali, sehingga menghemat banyak waktu.

Codex juga menangani autentikasi dengan baik, mendukung OAuth melalui perintah codex mcp login <server-name>. Anda bahkan mendapatkan kontrol terperinci atas apa yang dapat dilakukan agen dengan memfilter alat tertentu menggunakan pengaturan enabled_tools atau disabled_tools dalam konfigurasi Anda.

Penyiapan Codex CLI MCP

Sekarang kita sudah membahas teori, saatnya praktik menyiapkannya. Pada bagian ini, kita akan mengonfigurasi server MCP agar siap bekerja untuk Anda.

Prasyarat

Sebelum Anda menghubungkan Codex ke MCP dan Agents SDK, pastikan hal-hal berikut sudah siap:

• Codex CLI terpasang di mesin ini. Anda dapat memasangnya secara global dengan membuka terminal dan menjalankan npm install -g @openai/codex. Verifikasi semuanya berfungsi dengan codex --version untuk mengonfirmasi instalasi.

• Codex sudah diautentikasi di mesin ini. Jalankan codex login (atau codex login --device-auth di lingkungan headless) sekali, dan pastikan codex berfungsi normal di terminal Anda.

• Untuk alur kerja multi-agen, Anda juga memerlukan kunci API OpenAI. Dapatkan di konsol OpenAI, dan setel di shell Anda menggunakan export OPENAI_API_KEY="sk-...".

• Variabel lingkungan untuk alat eksternal sudah disetel. Misalnya, Alpha Vantage akan membaca kunci data pasar Anda dari ALPHA_VANTAGE_KEY, yang juga harus Anda ekspor dengan cara yang sama sebelum menjalankan contoh.

Untuk mendapatkan kunci API AlphaVantage:

1. Buka halaman dukungan AlphaVantage.
2. ​Isi formulir pendaftaran singkat (organisasi, peran, dan email).
3. Kunci API Anda akan ditampilkan segera. Salin dan simpan dengan aman.

Paket gratis memungkinkan hingga 25 permintaan API per hari. Untuk penggunaan lebih berat, Alpha Vantage menawarkan paket premium.

Menambahkan server MCP melalui CLI

Selanjutnya, kita akan menambahkan server baru menggunakan antarmuka baris perintah dan perintah codex mcp add. Dengan cara ini, Anda tidak perlu repot mengedit berkas konfigurasi secara manual, dan Codex akan menangani sebagian besar pekerjaan untuk Anda.

Misalnya, jika Anda ingin menambahkan server untuk membantu pencarian dokumentasi, Anda bisa menggunakan server MCP Context7. Untuk memasangnya, jalankan perintah berikut di terminal Anda:

codex mcp add context7 -- npx -y @upstash/context7-mcp

Menambahkan server MCP melalui config.toml

Meskipun perintah CLI bagus untuk memulai dengan cepat, kadang Anda butuh kontrol lebih, atau Anda ingin melihat persis apa yang terjadi di balik layar. Dalam kasus itu, Anda dapat mengedit berkas konfigurasi secara langsung.

Penting untuk diketahui bahwa ada dua lokasi konfigurasi ini, dan cakupannya berbeda:

• Berkas konfigurasi global di ~/.codex/config.toml, yang berlaku untuk setiap proyek yang Anda kerjakan

• Berkas konfigurasi cakupan proyek di .codex/config.toml dalam folder proyek spesifik Anda. Biasanya, pengaturan cakupan proyek menimpa pengaturan global saat terjadi konflik.

Tidak semua server MCP hadir dengan perintah pemasangan CLI khusus. Dalam kasus tersebut, Anda mengonfigurasinya langsung di ~/.codex/config.toml dengan menentukan perintah dan argumen yang dibutuhkan Codex untuk meluncurkan proses server. Ini memberi Anda kontrol penuh atas cara server dijalankan, apakah berjalan lokal melalui STDIO atau terhubung jarak jauh melalui HTTP.

Server MCP AlphaVantage adalah salah satunya. Buka config.toml dan tambahkan blok berikut:

[mcp_servers.alphavantage]
command = "uvx"
args = ["av-mcp", "<your-key>”]

Penafian: Menyematkan kunci API langsung di config.toml bukan praktik yang direkomendasikan untuk proyek nyata. Hindari hal ini pada proyek yang dikontrol versi (mis., di GitHub), dibagikan dengan pengembang lain, atau dideploy ke server, karena siapa pun yang memiliki akses ke berkas tersebut dapat membaca dan menyalahgunakan kunci Anda. Untuk tutorial ini, ini masih dapat diterima karena config.toml berada di direktori home Anda (~/.codex/) dan bersifat personal di mesin Anda.

Satu baris yang berguna untuk ditambahkan ke blok adalah startup_timeout_sec=30 untuk menimpa batas waktu default 10 detik, sehingga koneksi punya cukup waktu untuk tersambung.

Mengelola server MCP

Setelah Anda menyiapkan beberapa server, Anda perlu tahu cara mengelolanya. Codex memberi Anda serangkaian perintah untuk menjaga semuanya tetap tertata.

Jika Anda ingin melihat apa yang saat ini terpasang, cukup jalankan codex mcp list. Jika Anda perlu memeriksa detail spesifik suatu server, seperti Alpha Vantage yang baru saja kita tambahkan, jalankan codex mcp get alphavantage. Dan tentu saja, jika Anda memutuskan tidak memerlukan server lagi, misalnya server Context7, Anda bisa menghapusnya dengan menjalankan codex mcp remove context7.

Terakhir, saat Anda bekerja dalam sesi Codex aktif, Anda dapat memverifikasi bahwa semuanya berjalan dengan benar. Ketik saja /mcp langsung di antarmuka chat, dan itu akan menampilkan status alat yang terhubung. Seharusnya terlihat alphavantage dan context7, masing-masing dengan Status: enabled.

Membangun Dasbor Risiko Portofolio Saham dengan Codex dan MCP

Teori itu berguna, tetapi cara terbaik untuk belajar adalah membangun sesuatu yang nyata. Pada bagian ini, kita akan membangun Dasbor Risiko Portofolio Saham yang fungsional dari nol, menggunakan Codex dan MCP untuk mengambil data pasar nyata dan menghitung metrik risiko.

Untuk menampilkan dasbor, proyek ini menggunakan TypeScript, bahasa pemrograman berbasis JavaScript. Untuk penyegaran di berbagai level, saya sarankan membaca panduan Pertanyaan Wawancara TypeScript kami.

Menyiapkan proyek

Ikuti langkah-langkah di bawah ini untuk menyiapkan proyek:

1. Inisialisasi proyek: Jalankan perintah pembuatan Next.js standar di terminal: npx create-next-app@latest portfolio-dashboard --typescript

2. Terima prompt default untuk memastikan konfigurasi standar

3. Masuk ke direktori di folder proyek baru Anda: cd portfolio-dashboard

4. Siapkan struktur komponen dengan membuat subdirektori untuk komponen UI Anda: mkdir components

5. Buat elemen kartu portofolio sebagai berkas .tsx di subfolder components: components/PortfolioCard.tsx

Komponen ini mendefinisikan PortfolioCard yang merender kartu bergaya berisi daftar posisi saham tiruan (AAPL dan TSLA), menampilkan simbol saham, jumlah lembar, dan harga saat ini. Komponen menggunakan kelas Tailwind CSS untuk tata letak dan gaya, dengan kontainer kartu putih dan format harga hijau zamrud. Tampilannya akan seperti ini:

// components/PortfolioCard.tsx
import React from 'react';

type Position = {
  symbol: string;
  shares: number;
  price: number;
};

const mockPositions: Position[] = [
  { symbol: 'AAPL', shares: 10, price: 150.00 },
  { symbol: 'TSLA', shares: 5, price: 900.00 },
];

export const PortfolioCard = () => {
  return (
    // Added text-slate-900 to ensure visibility on the white background
    <div className="p-6 border border-slate-200 rounded-xl shadow-sm bg-white text-slate-900">
      <h2 className="text-xl font-bold mb-4">My Portfolio</h2>
      <ul className="divide-y divide-slate-100">
        {mockPositions.map((pos) => (
          <li key={pos.symbol} className="flex justify-between py-3">
            <div className="flex flex-col">
              <span className="font-bold text-slate-800">{pos.symbol}</span>
              <span className="text-sm text-slate-500">{pos.shares} shares</span>
            </div>
            <span className="font-mono font-semibold text-emerald-600">
              ${pos.price.toFixed(2)}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};

Setelah menyimpan berkas tersebut, pastikan untuk mengimpor dan menggunakan <PortfolioCard/> di dalam berkas utama app/page.tsx agar Anda dapat melihatnya di browser:

// app/page.tsx
import { PortfolioCard } from "../components/PortfolioCard";

export default function Page() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-slate-50">
      <PortfolioCard />
    </main>
  );
}

Saat Anda menjalankan npm run dev, Anda akan melihat keluaran di browser yang terlihat kurang lebih seperti ini:

Sebelum kita mulai mengode dengan AI, kita perlu memastikan agen kita aktif. Biarkan terminal dengan npm run dev tetap berjalan. Di jendela terminal baru:

1. Jalankan perintah konfigurasi MCP yang sudah kita bahas sebelumnya, jika Anda belum melakukannya

2. Ekspor kunci API Anda melalui export ALPHA_VANTAGE_KEY=”<your-key>”

3. Di jendela terminal yang sama, mulai agen Codex dengan menjalankan codex

Mengimplementasikan fitur rasio Sharpe

Fitur pertama yang akan kita hitung adalah rasio Sharpe, metrik penting untuk menilai imbal hasil yang disesuaikan dengan risiko suatu investasi. Biasanya, mencari rumus dan pustaka yang tepat untuk menghitungnya agak merepotkan. Kita akan biarkan Codex yang menanganinya.

Di sesi terminal Codex Anda, ketik prompt berikut:

"Tambahkan perhitungan rasio Sharpe untuk setiap posisi ke PortfolioCard.tsx. Gunakan Context7 untuk memeriksa tanda tangan fungsi jika diperlukan."

Anda akan melihat Codex mulai bekerja. Pertama, ia mungkin menggunakan alat Context7 untuk mencari dokumentasi pustaka analisis teknikal (ta-lib atau yang setara di JavaScript) guna memastikan input yang digunakan benar. Lalu, ia akan secara otomatis memodifikasi berkas PortfolioCard.tsx Anda.

Kemungkinan ia akan memperluas mockPositions dan menambahkan fungsi pembantu untuk menghitung rasio yang terlihat seperti ini:

function calculateSharpe(prices: number[]) {
  // Codex implements the logic here using standard deviation and mean returns
  // resulting in a return value like 1.23
}

Dan ia akan memperbarui JSX Anda untuk merender metrik baru:

<PortfolioCard sharpe={calculateSharpe(prices)}/>

Saat Anda memeriksa browser, Anda kini akan melihat rasio Sharpe (mis., 1,23) ditampilkan di samping posisi Anda, seperti ini:

Menambahkan peringatan volatilitas

Sekarang mari buat dasbor menjadi reaktif dan gunakan data finansial aktual dari AlphaVantage. Kita ingin mendapat peringatan jika sebuah saham menjadi terlalu volatil. Kita akan mendefinisikan "volatilitas tinggi" sebagai volatilitas 7 hari yang lebih besar dari 3%.

Di terminal Codex, masukkan prompt ini:

"Tandai posisi dengan volatilitas 7 hari > 2% menggunakan data Alpha Vantage. Ambil riwayat harga untuk simbol dalam daftar saya."

Di sinilah MCP menonjol. Codex akan mengenali bahwa ia memerlukan data eksternal. Ia akan memanggil alphavantage.get_price_history("AAPL") dan alphavantage.get_price_history("TSLA") untuk mendapatkan data dunia nyata.

Setelah data diperoleh, ia akan menulis logika untuk menghitung deviasi standar harga tersebut. Terakhir, ia akan memperbarui gaya komponen Anda untuk menandai risiko secara visual.

Anda akan melihat kode PortfolioCard Anda diperbarui untuk menyertakan penataan kondisional. Logikanya mungkin seperti ini:

<li className={volatility > 2 ? "text-red-500 font-bold" : "text-green-500"}>
  {pos.symbol}: {volatility}%
</li>

Jika Anda melihat aplikasi yang berjalan, Anda mungkin melihat AAPL berwarna hijau (aman) dan TSLA berwarna merah (volatil), semuanya berdasarkan data pasar live yang diambil oleh agen.

Keluaran akhirnya akan terlihat kurang lebih seperti ini:

UI akhir Anda bisa sedikit berbeda dari gambar di atas, tergantung bagaimana Codex menatanya. Tentu, Anda juga bisa membuat prompt lebih presisi dan memberi tahu Codex seperti apa hasil akhirnya seharusnya.

Jika Anda ingin merancang sistem yang lebih besar dan mempelajari handoff, batas alat, dan evaluasi, saya sarankan mengikuti kursus Building Scalable Agentic Systems kami.

Menjalankan Codex sebagai Server MCP

Sejauh ini, kita telah menggunakan Codex sebagai antarmuka utama yang memanggil alat lain. Namun, di sinilah bagian menariknya: Codex juga dapat bertindak sebagai server MCP itu sendiri.

Artinya Anda dapat mengekspos kemampuan pengeditan berkas dan eksekusi perintah Codex ke klien MCP lain, sehingga agen AI lain bisa menggunakan Codex sebagai alat dalam alur kerja mereka. Keuntungan terbesarnya adalah memungkinkan eksekusi paralel.

Anda bisa merancang alur kerja dengan satu agen menggunakan Codex untuk membangun UI frontend Anda, sementara agen lain menggunakan instance Codex terpisah untuk menulis API backend Anda. Karena berjalan sebagai proses terpisah, keduanya dapat bekerja secara simultan, berpotensi memangkas waktu pengembangan Anda hingga setengahnya.

Memulai mode server Codex

Untuk menempatkan Codex ke mode ini, kita menggunakan perintah khusus: codex mcp-server.

Saat Anda menjalankannya, Codex berhenti berperilaku seperti antarmuka chat dan mulai mendengarkan instruksi dari program lain. Ia mengekspos kemampuannya melalui saluran standard input/output (STDIO).

Sebelum Anda mencoba mengintegrasikannya ke sistem yang kompleks, sebaiknya uji dulu untuk memastikan ini benar-benar berfungsi. Tim Model Context Protocol menyediakan alat inspector yang praktis untuk tujuan ini. Anda dapat menjalankan perintah berikut di terminal untuk menyalakan antarmuka web yang terhubung ke instance Codex lokal Anda:

npx @modelcontextprotocol/inspector codex mcp-server

Ini akan membuka jendela browser tempat Anda dapat mengirim perintah ke Codex secara manual dan melihat tepat bagaimana responsnya, yang sangat membantu untuk debug. UI-nya seperti ini:

Integrasi OpenAI Agents SDK

Jika Anda pengembang Python, Anda mungkin ingin mengorkestrasi Codex di dalam skrip kustom menggunakan OpenAI Agents SDK. Ini memungkinkan Anda membangun program Python yang bisa “merekrut” Codex untuk tugas pengkodean tertentu.

Berikut contoh cepat cara menyiapkannya. Anda menggunakan MCPServerStdio untuk meluncurkan proses Codex:

Di lingkungan virtual Python Anda, pasang paket openai-agents:

pip install openai-agents

Untuk menyiapkan proses codex, buat berkas orchestrator.py dengan kode berikut:

from agents import Agent
from agents.mcp import MCPServerStdio

# initialize connection
codex_server = MCPServerStdio(
    name="Codex CLI",
    params={
        "command": "npx",
        "args": ["-y", "codex", "mcp-server"]
    },
    client_session_timeout_seconds=360000,
)
# create codex agent
agent = Agent(
    name="Lead Developer",
    mcp_servers=[codex_server]
)

Dalam setup ini, server MCP Codex mengekspos dua alat utama: codex() dan codex-reply(). Penting memahami perbedaannya, karena pembedaan ini memastikan agen mempertahankan konteks pekerjaannya.

• Gunakan codex() saat Anda ingin memulai sesi atau tugas baru.
• Gunakan codex-reply() saat Anda ingin melanjutkan percakapan yang ada atau mengiterasi pekerjaan yang baru dilakukan. Alat ini memerlukan parameter conversationId untuk memetakan permintaan ke percakapan yang tepat.

client_session_timeout_sessions adalah waktu maksimum klien mempertahankan sesi dengan server MCP STDIO terkait. Kita setel sangat longgar di 360.000 detik (100 jam) untuk Codex, sehingga alur kerja jangka panjang dapat menggunakan ulang sesi MCP yang sama tanpa terkena waktu idle.

Wrapper komunitas

Komunitas juga menghadirkan wrapper yang membuat ini makin mudah. Salah satu proyek yang patut dicatat adalah repo codex-mcp-wrapper di GitHub. Wrapper ini dirancang khusus agar Anda dapat mengintegrasikan Codex ke lingkungan lain, seperti Claude Code.

Mengorkestrasi Pipeline Keuangan Multi-Agen Codex CLI MCP

Sekarang kita memahami cara menjalankan Codex sebagai server, mari lihat skenario dunia nyata di mana hal ini menjadi kuat. Kita akan mengorkestrasi pipeline multi-agen di mana beberapa agen AI bekerja bersama untuk mempercepat peningkatan dasbor keuangan kita dibanding menggunakan satu agen saja.

Jika desain multi-agen terasa abstrak, berikut penjelasan jelas arsitektur agen umum dan di mana setup multi-agen benar-benar membantu.

Koordinasikan agen risiko dan UI

Dalam setup ini, kita menggunakan skrip Python sebagai orkestrator untuk mengelola alur kerja. Alih-alih meminta satu agen melakukan semuanya, kita membuat dua agen spesialis:

• Codex-Risk, berfokus pada analisis kuantitatif
• Codex-UI, berfokus pada implementasi frontend

Karena sekarang kita menjalankan Codex sebagai server MCP headless dari Agents SDK, baik SDK maupun proses Codex perlu melakukan autentikasi terhadap OpenAI, bukan hanya Codex CLI interaktif.

Untuk kesederhanaan dan keandalan, pastikan OPENAI_API_KEY (atau opsional CODEX_API_KEY) disetel di lingkungan Anda sebelum menjalankan orkestrator agar setiap bagian rantai dapat berbicara ke model. Jalankan perintah berikut di terminal baru:

export OPENAI_API_KEY=<your-key>

Kita menginisialisasi dua server MCP Codex independen dalam blok async with untuk memastikan koneksi yang stabil dan terisolasi (satu proses per agen), inilah yang memungkinkan mereka berjalan paralel. Berikut skrip orkestrasi bernama orchestrator.py:

import os
import asyncio
from dotenv import load_dotenv
from agents import Agent, Runner
from agents.mcp import MCPServerStdio


load_dotenv()


async def main():
    async with MCPServerStdio(
        name="Codex-Risk-Server",
        params={
            "command": "npx",
            "args": ["-y", "codex", "mcp-server"],
            # Codex itself uses your existing auth (codex login / OPENAI_API_KEY)
            "env": {
                # pass through any env you already rely on inside Codex
                "OPENAI_API_KEY": os.getenv("OPENAI_API_KEY", ""),
                "CODEX_API_KEY": os.getenv("CODEX_API_KEY", ""),
            },
        },
        client_session_timeout_seconds=360000,
    ) as codex_risk_server, MCPServerStdio(
        name="Codex-UI-Server",
        params={
            "command": "npx",
            "args": ["-y", "codex", "mcp-server"],
            "env": {
                "OPENAI_API_KEY": os.getenv("OPENAI_API_KEY", ""),
                "CODEX_API_KEY": os.getenv("CODEX_API_KEY", ""),
            },
        },
        client_session_timeout_seconds=360000,
    ) as codex_ui_server:

        # 1. Define specialized agents (both just use the 'codex' tool)
        risk_agent = Agent(
            name="Codex-Risk",
            instructions=(
                "You are a quant analyst. Use the 'codex' tool to compute VaR and "
                "Sharpe ratio for all positions in the portfolio-dashboard project. "
                "Assume Alpha Vantage integration and volatility logic are already implemented "
                "in the code; reuse and extend that code instead of re-calling external APIs."
            ),
            mcp_servers=[codex_risk_server],
        )

        ui_agent = Agent(
            name="Codex-UI",
            instructions=(
                "You are a frontend developer. Use the 'codex' tool to update the UI in "
                "the portfolio-dashboard project. Your job is to add a VaR (95%) column "
                "to the RiskTable / PortfolioCard views, with clear red/green conditional styling."
            ),
            mcp_servers=[codex_ui_server],
        )

        # 2. Run Risk + UI agents concurrently
        risk_task = Runner.run(
            risk_agent,
            "Compute portfolio VaR (95%) for all positions and write the results into the codebase "
            "in a way that the UI can easily consume (e.g., exported constants or helper functions).",
        )
        ui_task = Runner.run(
            ui_agent,
            "Prepare or update the RiskTable / PortfolioCard components to display a VaR (95%) "
            "column, assuming the risk logic already exists in the project.",
        )

        risk_result, ui_result = await asyncio.gather(risk_task, ui_task)

        print("=== Codex-Risk result ===")
        print(risk_result.final_output)
        print("\n=== Codex-UI result ===")
        print(ui_result.final_output)

        # 3. Optional second pass: let UI agent consume the exact risk output
        followup_ui_result = await Runner.run(
            ui_agent,
            (
                "Now update the UI to wire in the actual VaR values. "
                f"Context from the risk agent: {risk_result.final_output}"
            ),
        )

        print("\n=== Codex-UI follow-up ===")
        print(followup_ui_result.final_output)


if __name__ == "__main__":
    asyncio.run(main())

Di jendela terminal yang sama tempat Anda menyetel kunci API OpenAI, jalankan skrip orkestrasi:

python orchestrator.py

Agen-agen ini akan berjalan mandiri, memeriksa dokumentasi Alpha Vantage melalui MCP, mengambil data historis, dan menulis logika Python atau TypeScript untuk menghitung Value at Risk untuk portofolio Anda.

Setelah dua instance codex melakukan perubahan yang diperlukan, Anda dapat memvisualisasikannya dengan menjalankan perintah npm run dev lagi untuk melihat hasil akhirnya di browser. Tampilannya akan seperti ini:

Dengan memisahkan tanggung jawab ini, kita mengubah proses yang biasanya memakan waktu 20 menit bolak-balik menjadi pipeline yang sepenuhnya otomatis. Risk Agent menangani perhitungan, UI Agent menangani implementasi, dan dasbor diperbarui dalam hitungan detik.

Eksekusi tugas paralel

Keajaiban sebenarnya ada pada model eksekusi. Di antarmuka chat standar, panggilan alat bersifat sekuensial; artinya, Anda harus menunggu data diambil sebelum meminta pembaruan grafik.

Dengan MCP dan pendekatan multi-agen ini, kita mencapai konkruensi sejati. Saat agen Codex-Risk menunggu permintaan jaringan dari API Alpha Vantage, agen Codex-UI sudah bisa menyiapkan kolom tabel dan kelas CSS.

Dengan memisahkan tanggung jawab ini, kita mengubah proses yang mungkin memakan waktu 15–20 menit menjadi pipeline yang ramping. Anda berpindah dari pengambilan data mentah ke analisis risiko kompleks hingga fitur UI yang sepenuhnya diimplementasikan dalam sekitar 5 menit.

Pertimbangan Keamanan dan Batasan

Seperti alat kuat lainnya yang menghubungkan kode Anda ke dunia luar, kita perlu membahas aspek keselamatan. Meskipun Codex dan MCP membuka kemampuan luar biasa, keduanya juga memperkenalkan permukaan serangan dan batasan praktis baru yang harus Anda pahami sebelum menerapkannya di lingkungan produksi.

Kerentanan konfigurasi

Aspek keamanan paling krusial melibatkan berkas konfigurasi itu sendiri. Pada versi awal Codex CLI, ada kerentanan yang diketahui di mana perintah berbahaya dapat disuntikkan melalui berkas config.toml bersamaan dengan berkas .env yang mengarahkan ulang CODEX_HOME ke direktori lokal. Ini telah ditambal, jadi sangat penting memastikan Anda menjalankan versi v0.23.0 atau lebih baru.

Namun, risikonya tidak sepenuhnya hilang dengan pembaruan perangkat lunak. Karena Codex menghormati konfigurasi cakupan proyek, jika Anda mengkloning repositori yang berisi .codex/config.toml berbahaya bersama berkas .env yang menyetel CODEX_HOME=./.codex, menjalankan codex di dalam folder tersebut bisa mengeksekusi perintah tak terduga yang didefinisikan di berkas itu.

Selalu jadikan kebiasaan untuk mengaudit berkas konfigurasi dari proyek baru yang Anda kloning. Perlakukan dengan sangat hati-hati sebelum menjalankan apa pun.

Batasan MCP

Secara praktis, ada beberapa kekurangan yang perlu diantisipasi. Saat ini, tidak ada "uji konektivitas" bawaan saat Anda meluncurkan CLI. Codex tidak akan otomatis memberi tahu Anda jika server MCP sedang down atau tidak dapat dijangkau saat startup. Anda pada dasarnya harus mem-prompt model dengan sesuatu seperti "Periksa alat saya" agar ia bisa memverifikasi koneksi benar-benar berfungsi.

Selain itu, meski menggiurkan untuk memasang semua alat yang tersedia, Anda harus selektif. Jika Anda menautkan terlalu banyak server MCP, kinerja model mulai menurun secara signifikan. Semakin banyak alat yang Anda tambahkan, semakin banyak “kebisingan” yang harus disaring model, yang dapat membingungkannya atau menyebabkan halusinasi. Praktik yang baik adalah hanya menautkan server MCP yang Anda butuhkan.

Codex CLI vs Claude Code

Terakhir, ada baiknya membandingkan Codex CLI dengan kompetitornya yang dekat, Claude Code.

Jika tujuan Anda adalah otomatisasi dan pipeline integrasi berkelanjutan (CI), Codex CLI umumnya merupakan pilihan yang lebih baik. Ringan, ramah pengguna, dan sangat dapat diskrip. Di sisi lain, Claude Code unggul sebagai lingkungan pengkodean interaktif di dalam editor, dengan UX bawaan yang kuat untuk refactor, menjalankan tes, dan asisten per proyek.

Gaya konfigurasi juga berbeda. Codex mengandalkan berkas TOML untuk konfigurasi, dengan ~/.codex/config.toml bersama yang digunakan oleh CLI dan ekstensi IDE, serta override opsional tingkat proyek melalui .codex/config.toml di setiap repo. Artinya, lingkungan Anda dibagikan secara default tetapi dapat dikustom per proyek.

Claude Code biasanya menggunakan pengaturan berbasis JSON, dengan konfigurasi global (misalnya ~/.claude.json) dan berkas cakupan proyek tambahan (seperti .mcp.json atau pengaturan proyek) yang memungkinkan setiap repositori mendefinisikan server MCP dan perilakunya sendiri, yang meningkatkan isolasi tetapi bisa berarti sedikit lebih banyak penyiapan per proyek.

Meski keduanya mewakili terdepan dari agen pengkodean AI, pilihan di antara keduanya bergantung pada alur kerja spesifik Anda; jika Anda menganggap agen terutama hidup di terminal atau job CI, Codex cenderung lebih pas, sedangkan jika Anda terutama menginginkan pendamping pengodean yang berfokus pada editor, Claude Code sering terasa lebih alami.

Untuk pendalaman lebih lanjut, saya sarankan membaca panduan Codex vs Claude Code kami.

Kesimpulan

Kita telah membahas banyak hal hari ini, mulai dari definisi dasar MCP hingga membangun agen Codex kita sendiri. Namun jika ada satu hal yang perlu Anda ingat dari tutorial ini, biarlah itu adalah kekuatan alurnya sendiri. Seluruh proses, yang terdiri dari mengonfigurasi server MCP Anda, menjalankan Codex, dan menyaksikan alat secara otomatis menemukan data yang mereka butuhkan, memungkinkan Anda membangun fitur lebih cepat daripada manusia mana pun.

Jika Anda baru memulai, saya sangat menyarankan untuk tidak langsung mempersulitnya. Mulailah dengan Context7 untuk dokumentasi dan mungkin satu MCP berbasis API saja, seperti setup Alpha Vantage yang kita bangun hari ini. Biasakan diri dengan alur itu sebelum mencoba bekerja dengan banyak agen.

Setelah Anda percaya diri, tidak ada batasnya. Jelajahi MCP lainnya. Hubungkan Figma untuk menghasilkan kode UI langsung dari desain, atau hubungkan Sentry agar Codex secara otomatis mendiagnosis dan memperbaiki bug produksi. Bereksperimenlah dengan subagen Codex dan lihat seberapa banyak pekerjaan rutin yang bisa Anda delegasikan. Alatnya sudah ada, kuat, dan siap Anda gunakan.

Jika Anda tertarik mengembangkan aplikasi AI, saya sangat merekomendasikan untuk mengikuti jalur keterampilan AI Engineering with LangChain. Konten pengajarannya AI-native, artinya Anda mendapatkan tutor pribadi yang mengajarkan keterampilan yang Anda butuhkan, mulai dari level Anda saat ini hingga menjadi profesional sejati dalam merekayasa alur kerja AI.