Langsung ke konten utama
Claude Code di web saat ini dalam pratinjau penelitian.

Apa itu Claude Code di web?

Claude Code di web memungkinkan pengembang untuk memulai Claude Code dari aplikasi Claude. Ini sempurna untuk:
  • Menjawab pertanyaan: Tanyakan tentang arsitektur kode dan bagaimana fitur diimplementasikan
  • Perbaikan bug dan tugas rutin: Tugas yang terdefinisi dengan baik yang tidak memerlukan pengarahan yang sering
  • Pekerjaan paralel: Tangani beberapa perbaikan bug secara bersamaan
  • Repositori yang tidak ada di mesin lokal Anda: Bekerja pada kode yang tidak Anda miliki di checkout lokal
  • Perubahan backend: Di mana Claude Code dapat menulis tes dan kemudian menulis kode untuk lulus tes tersebut
Claude Code juga tersedia di aplikasi Claude iOS untuk memulai tugas saat bepergian dan memantau pekerjaan yang sedang berlangsung. Anda dapat berpindah antara pengembangan lokal dan jarak jauh: kirim tugas dari terminal Anda untuk dijalankan di web dengan awalan &, atau teleportasi sesi web kembali ke terminal Anda untuk melanjutkan secara lokal.

Siapa yang dapat menggunakan Claude Code di web?

Claude Code di web tersedia dalam pratinjau penelitian untuk:
  • Pengguna Pro
  • Pengguna Max
  • Pengguna kursi premium Tim
  • Pengguna kursi premium Enterprise

Memulai

  1. Kunjungi claude.ai/code
  2. Hubungkan akun GitHub Anda
  3. Instal aplikasi Claude GitHub di repositori Anda
  4. Pilih lingkungan default Anda
  5. Kirimkan tugas pengkodean Anda
  6. Tinjau perubahan dalam tampilan diff, ulangi dengan komentar, kemudian buat permintaan tarik

Cara kerjanya

Ketika Anda memulai tugas di Claude Code di web:
  1. Kloning repositori: Repositori Anda dikloning ke mesin virtual yang dikelola Anthropic
  2. Penyiapan lingkungan: Claude menyiapkan lingkungan cloud yang aman dengan kode Anda
  3. Konfigurasi jaringan: Akses internet dikonfigurasi berdasarkan pengaturan Anda
  4. Eksekusi tugas: Claude menganalisis kode, membuat perubahan, menjalankan tes, dan memeriksa pekerjaannya
  5. Penyelesaian: Anda diberitahu ketika selesai dan dapat membuat PR dengan perubahan
  6. Hasil: Perubahan didorong ke cabang, siap untuk pembuatan permintaan tarik

Tinjau perubahan dengan tampilan diff

Tampilan diff memungkinkan Anda melihat dengan tepat apa yang diubah Claude sebelum membuat permintaan tarik. Alih-alih mengklik “Buat PR” untuk meninjau perubahan di GitHub, lihat diff langsung di aplikasi dan ulangi dengan Claude sampai perubahan siap. Ketika Claude membuat perubahan pada file, indikator statistik diff muncul menunjukkan jumlah baris yang ditambahkan dan dihapus (misalnya, +12 -1). Pilih indikator ini untuk membuka penampil diff, yang menampilkan daftar file di sebelah kiri dan perubahan untuk setiap file di sebelah kanan. Dari tampilan diff, Anda dapat:
  • Tinjau perubahan file demi file
  • Beri komentar pada perubahan tertentu untuk meminta modifikasi
  • Lanjutkan iterasi dengan Claude berdasarkan apa yang Anda lihat
Ini memungkinkan Anda menyempurnakan perubahan melalui beberapa putaran umpan balik tanpa membuat PR draft atau beralih ke GitHub.

Memindahkan tugas antara web dan terminal

Anda dapat memulai tugas di web dan melanjutkannya di terminal Anda, atau mengirim tugas dari terminal Anda untuk dijalankan di web. Sesi web bertahan bahkan jika Anda menutup laptop Anda, dan Anda dapat memantaunya dari mana saja termasuk aplikasi Claude iOS.
Handoff sesi adalah satu arah: Anda dapat menarik sesi web ke terminal Anda, tetapi Anda tidak dapat mendorong sesi terminal yang ada ke web. Awalan & membuat sesi web baru dengan konteks percakapan Anda saat ini.

Dari terminal ke web

Mulai pesan dengan & di dalam Claude Code untuk mengirim tugas untuk dijalankan di web:
& Fix the authentication bug in src/auth/login.ts
Ini membuat sesi web baru di claude.ai dengan konteks percakapan Anda saat ini. Tugas berjalan di cloud sementara Anda terus bekerja secara lokal. Gunakan /tasks untuk memeriksa kemajuan, atau buka sesi di claude.ai atau aplikasi Claude iOS untuk berinteraksi langsung. Dari sana Anda dapat mengarahkan Claude, memberikan umpan balik, atau menjawab pertanyaan seperti percakapan lainnya. Anda juga dapat memulai sesi web langsung dari baris perintah:
claude --remote "Fix the authentication bug in src/auth/login.ts"

Tips untuk tugas latar belakang

Rencanakan secara lokal, jalankan dari jarak jauh: Untuk tugas yang kompleks, mulai Claude dalam plan mode untuk berkolaborasi pada pendekatan sebelum mengirim pekerjaan ke web:
claude --permission-mode plan
Dalam plan mode, Claude hanya dapat membaca file dan menjelajahi basis kode. Setelah Anda puas dengan rencana, kirimkan ke web untuk eksekusi otonom:
& Execute the migration plan we discussed
Pola ini memberi Anda kontrol atas strategi sambil membiarkan Claude mengeksekusi secara otonom di cloud. Jalankan tugas secara paralel: Setiap perintah & membuat sesi web sendiri yang berjalan secara independen. Anda dapat memulai beberapa tugas dan semuanya akan berjalan secara bersamaan dalam sesi terpisah:
& Fix the flaky test in auth.spec.ts
& Update the API documentation
& Refactor the logger to use structured output
Pantau semua sesi dengan /tasks. Ketika sesi selesai, Anda dapat membuat PR dari antarmuka web atau teleportasi sesi ke terminal Anda untuk melanjutkan bekerja.

Dari web ke terminal

Ada beberapa cara untuk menarik sesi web ke terminal Anda:
  • Menggunakan /teleport: Dari dalam Claude Code, jalankan /teleport (atau /tp) untuk melihat pemilih interaktif sesi web Anda. Jika Anda memiliki perubahan yang belum dikomit, Anda akan diminta untuk menyimpannya terlebih dahulu.
  • Menggunakan --teleport: Dari baris perintah, jalankan claude --teleport untuk pemilih sesi interaktif, atau claude --teleport <session-id> untuk melanjutkan sesi tertentu secara langsung.
  • Dari /tasks: Jalankan /tasks untuk melihat sesi latar belakang Anda, kemudian tekan t untuk teleportasi ke dalamnya
  • Dari antarmuka web: Klik “Buka di CLI” untuk menyalin perintah yang dapat Anda tempel ke terminal Anda
Ketika Anda teleportasi sesi, Claude memverifikasi Anda berada di repositori yang benar, mengambil dan memeriksa cabang dari sesi jarak jauh, dan memuat riwayat percakapan lengkap ke terminal Anda.

Persyaratan untuk teleportasi

Teleport memeriksa persyaratan ini sebelum melanjutkan sesi. Jika ada persyaratan yang tidak terpenuhi, Anda akan melihat kesalahan atau diminta untuk menyelesaikan masalah.
PersyaratanDetail
Status git bersihDirektori kerja Anda harus tidak memiliki perubahan yang belum dikomit. Teleport meminta Anda untuk menyimpan perubahan jika diperlukan.
Repositori yang benarAnda harus menjalankan --teleport dari checkout repositori yang sama, bukan fork.
Cabang tersediaCabang dari sesi web harus telah didorong ke remote. Teleport secara otomatis mengambil dan memeriksanya.
Akun yang samaAnda harus diautentikasi ke akun Claude.ai yang sama yang digunakan dalam sesi web.

Berbagi sesi

Untuk berbagi sesi, alihkan visibilitasnya sesuai dengan jenis akun di bawah ini. Setelah itu, bagikan tautan sesi apa adanya. Penerima yang membuka sesi bersama Anda akan melihat status terbaru sesi saat dimuat, tetapi halaman penerima tidak akan diperbarui secara real-time.

Berbagi dari akun Enterprise atau Teams

Untuk akun Enterprise dan Teams, dua opsi visibilitas adalah Private dan Team. Visibilitas Team membuat sesi terlihat oleh anggota organisasi Claude.ai Anda yang lain. Verifikasi akses repositori diaktifkan secara default, berdasarkan akun GitHub yang terhubung ke akun penerima. Nama tampilan akun Anda terlihat oleh semua penerima yang memiliki akses. Sesi Claude di Slack secara otomatis dibagikan dengan visibilitas Team.

Berbagi dari akun Max atau Pro

Untuk akun Max dan Pro, dua opsi visibilitas adalah Private dan Public. Visibilitas Public membuat sesi terlihat oleh pengguna mana pun yang masuk ke claude.ai. Periksa sesi Anda untuk konten sensitif sebelum berbagi. Sesi mungkin berisi kode dan kredensial dari repositori GitHub pribadi. Verifikasi akses repositori tidak diaktifkan secara default. Aktifkan verifikasi akses repositori dan/atau tahan nama Anda dari sesi bersama Anda dengan membuka Settings > Claude Code > Sharing settings.

Lingkungan cloud

Gambar default

Kami membangun dan memelihara gambar universal dengan toolchain umum dan ekosistem bahasa yang sudah diinstal sebelumnya. Gambar ini mencakup:
  • Bahasa pemrograman dan runtime populer
  • Alat build umum dan manajer paket
  • Framework pengujian dan linter

Memeriksa alat yang tersedia

Untuk melihat apa yang sudah diinstal sebelumnya di lingkungan Anda, minta Claude Code untuk menjalankan:
check-tools
Perintah ini menampilkan:
  • Bahasa pemrograman dan versinya
  • Manajer paket yang tersedia
  • Alat pengembangan yang diinstal

Penyiapan khusus bahasa

Gambar universal mencakup lingkungan yang sudah dikonfigurasi untuk:
  • Python: Python 3.x dengan pip, poetry, dan perpustakaan ilmiah umum
  • Node.js: Versi LTS terbaru dengan npm, yarn, pnpm, dan bun
  • Ruby: Versi 3.1.6, 3.2.6, 3.3.6 (default: 3.3.6) dengan gem, bundler, dan rbenv untuk manajemen versi
  • PHP: Versi 8.4.14
  • Java: OpenJDK dengan Maven dan Gradle
  • Go: Versi stabil terbaru dengan dukungan modul
  • Rust: Toolchain Rust dengan cargo
  • C++: Kompiler GCC dan Clang

Database

Gambar universal mencakup database berikut:
  • PostgreSQL: Versi 16
  • Redis: Versi 7.0

Konfigurasi lingkungan

Ketika Anda memulai sesi di Claude Code di web, inilah yang terjadi di balik layar:
  1. Persiapan lingkungan: Kami mengkloning repositori Anda dan menjalankan hook Claude yang dikonfigurasi untuk inisialisasi. Repo akan dikloning dengan cabang default di repo GitHub Anda. Jika Anda ingin memeriksa cabang tertentu, Anda dapat menentukan itu dalam prompt.
  2. Konfigurasi jaringan: Kami mengonfigurasi akses internet untuk agen. Akses internet dibatasi secara default, tetapi Anda dapat mengonfigurasi lingkungan untuk tidak memiliki akses internet atau akses internet penuh berdasarkan kebutuhan Anda.
  3. Eksekusi Claude Code: Claude Code berjalan untuk menyelesaikan tugas Anda, menulis kode, menjalankan tes, dan memeriksa pekerjaannya. Anda dapat memandu dan mengarahkan Claude sepanjang sesi melalui antarmuka web. Claude menghormati konteks yang telah Anda tentukan di CLAUDE.md Anda.
  4. Hasil: Ketika Claude menyelesaikan pekerjaannya, itu akan mendorong cabang ke remote. Anda akan dapat membuat PR untuk cabang tersebut.
Claude beroperasi sepenuhnya melalui terminal dan alat CLI yang tersedia di lingkungan. Ini menggunakan alat yang sudah diinstal sebelumnya di gambar universal dan alat tambahan apa pun yang Anda instal melalui hook atau manajemen dependensi.
Untuk menambahkan lingkungan baru: Pilih lingkungan saat ini untuk membuka pemilih lingkungan, kemudian pilih “Tambah lingkungan”. Ini akan membuka dialog di mana Anda dapat menentukan nama lingkungan, tingkat akses jaringan, dan variabel lingkungan apa pun yang ingin Anda atur. Untuk memperbarui lingkungan yang ada: Pilih lingkungan saat ini, di sebelah kanan nama lingkungan, dan pilih tombol pengaturan. Ini akan membuka dialog di mana Anda dapat memperbarui nama lingkungan, akses jaringan, dan variabel lingkungan. Untuk memilih lingkungan default Anda dari terminal: Jika Anda memiliki beberapa lingkungan yang dikonfigurasi, jalankan /remote-env untuk memilih mana yang akan digunakan saat memulai sesi web dari terminal Anda dengan & atau --remote. Dengan satu lingkungan, perintah ini menunjukkan konfigurasi Anda saat ini.
Variabel lingkungan harus ditentukan sebagai pasangan kunci-nilai, dalam format .env. Misalnya:
API_KEY=your_api_key
DEBUG=true

Manajemen dependensi

Konfigurasikan instalasi dependensi otomatis menggunakan hook SessionStart. Ini dapat dikonfigurasi di file .claude/settings.json repositori Anda:
{
  "hooks": {
    "SessionStart": [
      {
        "matcher": "startup",
        "hooks": [
          {
            "type": "command",
            "command": "\"$CLAUDE_PROJECT_DIR\"/scripts/install_pkgs.sh"
          }
        ]
      }
    ]
  }
}
Buat skrip yang sesuai di scripts/install_pkgs.sh:
#!/bin/bash
npm install
pip install -r requirements.txt
exit 0
Buat dapat dieksekusi: chmod +x scripts/install_pkgs.sh

Eksekusi lokal vs jarak jauh

Secara default, semua hook dieksekusi baik secara lokal maupun di lingkungan jarak jauh (web). Untuk menjalankan hook hanya di satu lingkungan, periksa variabel lingkungan CLAUDE_CODE_REMOTE dalam skrip hook Anda.
#!/bin/bash

# Contoh: Hanya jalankan di lingkungan jarak jauh
if [ "$CLAUDE_CODE_REMOTE" != "true" ]; then
  exit 0
fi

npm install
pip install -r requirements.txt

Mempertahankan variabel lingkungan

Hook SessionStart dapat mempertahankan variabel lingkungan untuk perintah bash berikutnya dengan menulis ke file yang ditentukan dalam variabel lingkungan CLAUDE_ENV_FILE. Untuk detail, lihat hook SessionStart dalam referensi hook.

Akses jaringan dan keamanan

Kebijakan jaringan

Proxy GitHub

Untuk keamanan, semua operasi GitHub melalui layanan proxy khusus yang secara transparan menangani semua interaksi git. Di dalam sandbox, klien git mengautentikasi menggunakan kredensial bersistem khusus. Proxy ini:
  • Mengelola autentikasi GitHub dengan aman - klien git menggunakan kredensial bersistem di dalam sandbox, yang diverifikasi proxy dan diterjemahkan ke token autentikasi GitHub aktual Anda
  • Membatasi operasi git push ke cabang kerja saat ini untuk keamanan
  • Memungkinkan kloning, pengambilan, dan operasi PR yang mulus sambil mempertahankan batas keamanan

Proxy keamanan

Lingkungan berjalan di belakang proxy jaringan HTTP/HTTPS untuk tujuan keamanan dan pencegahan penyalahgunaan. Semua lalu lintas internet keluar melewati proxy ini, yang menyediakan:
  • Perlindungan terhadap permintaan berbahaya
  • Pembatasan laju dan pencegahan penyalahgunaan
  • Penyaringan konten untuk keamanan yang ditingkatkan

Tingkat akses

Secara default, akses jaringan dibatasi pada domain yang diizinkan. Anda dapat mengonfigurasi akses jaringan khusus, termasuk menonaktifkan akses jaringan.

Domain yang diizinkan secara default

Saat menggunakan akses jaringan “Terbatas”, domain berikut diizinkan secara default:

Layanan Anthropic

  • api.anthropic.com
  • statsig.anthropic.com
  • platform.claude.com
  • code.claude.com
  • claude.ai

Kontrol Versi

  • github.com
  • www.github.com
  • api.github.com
  • npm.pkg.github.com
  • raw.githubusercontent.com
  • pkg-npm.githubusercontent.com
  • objects.githubusercontent.com
  • codeload.github.com
  • avatars.githubusercontent.com
  • camo.githubusercontent.com
  • gist.github.com
  • gitlab.com
  • www.gitlab.com
  • registry.gitlab.com
  • bitbucket.org
  • www.bitbucket.org
  • api.bitbucket.org

Registri Kontainer

  • registry-1.docker.io
  • auth.docker.io
  • index.docker.io
  • hub.docker.com
  • www.docker.com
  • production.cloudflare.docker.com
  • download.docker.com
  • gcr.io
  • *.gcr.io
  • ghcr.io
  • mcr.microsoft.com
  • *.data.mcr.microsoft.com
  • public.ecr.aws

Platform Cloud

  • cloud.google.com
  • accounts.google.com
  • gcloud.google.com
  • *.googleapis.com
  • storage.googleapis.com
  • compute.googleapis.com
  • container.googleapis.com
  • azure.com
  • portal.azure.com
  • microsoft.com
  • www.microsoft.com
  • *.microsoftonline.com
  • packages.microsoft.com
  • dotnet.microsoft.com
  • dot.net
  • visualstudio.com
  • dev.azure.com
  • *.amazonaws.com
  • *.api.aws
  • oracle.com
  • www.oracle.com
  • java.com
  • www.java.com
  • java.net
  • www.java.net
  • download.oracle.com
  • yum.oracle.com

Manajer Paket - JavaScript/Node

Manajer Paket - Python

Manajer Paket - Ruby

Manajer Paket - Rust

Manajer Paket - Go

  • proxy.golang.org
  • sum.golang.org
  • index.golang.org
  • golang.org
  • www.golang.org
  • goproxy.io
  • pkg.go.dev

Manajer Paket - JVM

  • maven.org
  • repo.maven.org
  • central.maven.org
  • repo1.maven.org
  • jcenter.bintray.com
  • gradle.org
  • www.gradle.org
  • services.gradle.org
  • plugins.gradle.org
  • kotlin.org
  • www.kotlin.org
  • spring.io
  • repo.spring.io

Manajer Paket - Bahasa Lain

Distribusi Linux

Alat Pengembangan & Platform

  • dl.k8s.io (Kubernetes)
  • pkgs.k8s.io
  • k8s.io
  • www.k8s.io
  • releases.hashicorp.com (HashiCorp)
  • apt.releases.hashicorp.com
  • rpm.releases.hashicorp.com
  • archive.releases.hashicorp.com
  • hashicorp.com
  • www.hashicorp.com
  • repo.anaconda.com (Anaconda/Conda)
  • conda.anaconda.org
  • anaconda.org
  • www.anaconda.com
  • anaconda.com
  • continuum.io
  • apache.org (Apache)
  • www.apache.org
  • archive.apache.org
  • downloads.apache.org
  • eclipse.org (Eclipse)
  • www.eclipse.org
  • download.eclipse.org
  • nodejs.org (Node.js)
  • www.nodejs.org

Layanan Cloud & Pemantauan

  • statsig.com
  • www.statsig.com
  • api.statsig.com
  • sentry.io
  • *.sentry.io
  • http-intake.logs.datadoghq.com
  • *.datadoghq.com
  • *.datadoghq.eu

Pengiriman Konten & Cermin

  • sourceforge.net
  • *.sourceforge.net
  • packagecloud.io
  • *.packagecloud.io

Skema & Konfigurasi

Model Context Protocol

  • *.modelcontextprotocol.io
Domain yang ditandai dengan * menunjukkan pencocokan subdomain wildcard. Misalnya, *.gcr.io memungkinkan akses ke subdomain apa pun dari gcr.io.

Praktik terbaik keamanan untuk akses jaringan yang disesuaikan

  1. Prinsip hak istimewa minimal: Hanya aktifkan akses jaringan minimum yang diperlukan
  2. Audit secara teratur: Tinjau domain yang diizinkan secara berkala
  3. Gunakan HTTPS: Selalu lebih suka endpoint HTTPS daripada HTTP

Keamanan dan isolasi

Claude Code di web menyediakan jaminan keamanan yang kuat:
  • Mesin virtual terisolasi: Setiap sesi berjalan di VM terisolasi yang dikelola Anthropic
  • Kontrol akses jaringan: Akses jaringan dibatasi secara default, dan dapat dinonaktifkan
Saat berjalan dengan akses jaringan dinonaktifkan, Claude Code diizinkan untuk berkomunikasi dengan API Anthropic yang mungkin masih memungkinkan data keluar dari VM Claude Code terisolasi.
  • Perlindungan kredensial: Kredensial sensitif (seperti kredensial git atau kunci penandatanganan) tidak pernah ada di dalam sandbox dengan Claude Code. Autentikasi ditangani melalui proxy aman menggunakan kredensial bersistem
  • Analisis aman: Kode dianalisis dan dimodifikasi dalam VM terisolasi sebelum membuat PR

Harga dan batas laju

Claude Code di web berbagi batas laju dengan semua penggunaan Claude dan Claude Code lainnya dalam akun Anda. Menjalankan beberapa tugas secara paralel akan mengonsumsi lebih banyak batas laju secara proporsional.

Keterbatasan

  • Autentikasi repositori: Anda hanya dapat memindahkan sesi dari web ke lokal ketika Anda diautentikasi ke akun yang sama
  • Pembatasan platform: Claude Code di web hanya bekerja dengan kode yang dihosting di GitHub. Repositori GitLab dan non-GitHub lainnya tidak dapat digunakan dengan sesi cloud

Praktik terbaik

  1. Gunakan hook Claude Code: Konfigurasikan hook SessionStart untuk mengotomatisasi penyiapan lingkungan dan instalasi dependensi.
  2. Dokumentasikan persyaratan: Tentukan dengan jelas dependensi dan perintah di file CLAUDE.md Anda. Jika Anda memiliki file AGENTS.md, Anda dapat bersumber di CLAUDE.md Anda menggunakan @AGENTS.md untuk mempertahankan sumber kebenaran tunggal.

Sumber daya terkait