Galeri antarmuka untuk mod

Lihat elemen antarmuka yang dapat digambar oleh mod Claude Code, seperti teks, tombol, kolom, Markdown, kode, dan diff, beserta contoh kode dan tangkapan layar terminal.

Sebuah mod menggambar antarmukanya dari elemen: teks, kotak, tombol, kolom, dan beberapa elemen yang memformat konten untuk Anda. Contoh-contoh di sini menunjukkan kode yang menggambar sebuah elemen, dan sebagian besar disertai tangkapan layar hasilnya di panel terminal, sehingga Anda dapat memilih elemen berdasarkan tampilannya.

Untuk mempelajari cara kerja penggambaran, mulailah dengan Menggambar di antarmuka. Untuk props utama dan aplikasi mana yang menggambar setiap elemen, lihat referensi elemen. Deklarasi tipe mencantumkan setiap prop.

Mencoba contoh

Contoh-contoh di halaman ini adalah cuplikan, bukan mod utuh. Masing-masing adalah kode untuk satu elemen dan apa pun yang bersarang di dalamnya.

Untuk melihat contoh di terminal Anda sendiri, buat mod kecil dengan langkah-langkah berikut dan tempelkan contoh ke dalamnya. Mod ini menambahkan perintah /gallery yang membuka panel dan menggambar contoh di sana. Panel adalah bilah samping di sebelah transkrip pada terminal layar penuh yang lebar, atau wilayah berbingkai di atas prompt jika tidak.

{
"name": "gallery",
"version": "0.1.0",
"description": "Opens a pane that draws one sample",
"author": { "name": "Your Name" }
}

{
"modules": ["./register.js"]
}

// Stands in for your own callback in the samples that take one
const noop = () => {}
// The Select sample keeps its choice here
let picked = 'md'

// The Raster sample packs its cells with this function
const DEFAULT_COLOR = 0x01000000
function cellsOf(rows) {
const numbers = rows.flat().flatMap(([char, color]) => [char.codePointAt(0), color, DEFAULT_COLOR])
return new Uint8Array(Uint32Array.from(numbers).buffer).toBase64()
}

export function register(on) {
on('session.start', async ($, e, next) => {
await $.command.register({ name: 'gallery', description: 'Open the sample pane' })
return next(e)
})

on('command.run', { command: 'gallery' }, async ($) => {
await $.ui.open({ id: 'gallery', focus: true, closeOnEscape: true })
return {}
})

on('ui.render', { component: 'Pane' }, async ($, e, next) => {
if (e.requestId !== 'gallery') return next(e)
const { Box, Text, Button, Input, Select, Link, Markdown, Code, Raster, Svg } = $.ui.resolve(e)
// Replace the element after return with a sample
return Text({ children: ['Plain text'] })
})
}

claude --plugin-dir ./gallery

Memilih elemen

Contoh-contoh dikelompokkan berdasarkan apa yang ingin Anda tampilkan di layar:

• Menampilkan teks: Text, Markdown, dan Link
• Menampilkan kode dan perubahan: Code
• Mengatur elemen: Box
• Menerima input: Button, Input, dan Select
• Menggambar gambar: Raster, Svg, Image, dan Client

Menampilkan teks

Tiga elemen menampilkan kata-kata di layar: Text untuk gaya Anda sendiri, Markdown untuk konten yang sudah diformat, dan Link untuk URL.

`Text`

Text menggambar string dengan gaya yang Anda berikan. Contoh ini menampilkan satu baris untuk setiap gaya:

Box({
  flexDirection: 'column',
  children: [
    Text({ children: ['Plain text'] }),
    Text({ bold: true, children: ['bold'] }),
    Text({ italic: true, children: ['italic'] }),
    Text({ underline: true, children: ['underline'] }),
    Text({ strikethrough: true, children: ['strikethrough'] }),
    Text({ dimColor: true, children: ['dimColor'] }),
    Text({ inverse: true, children: ['inverse'] }),
    Text({ color: 'red', children: ["color: 'red'"] }),
    Text({ backgroundColor: 'blue', children: ["backgroundColor: 'blue'"] }),
  ],
})

dimColor menggambar teks berwarna abu-abu. backgroundColor hanya mengisi selebar teks.

`Markdown`

Markdown memformat teks dengan cara yang sama seperti balasan Claude diformat. Berikan konten di text, bukan di children:

Markdown({
  text: '## Release notes\n\nThis build has **two** fixes and one `flag`:\n\n- Faster start\n- Fewer prompts\n\n> Quoted text',
})

Judul digambar tebal tanpa tanda #. Kode inline digambar berwarna tanpa backtick. Kutipan digambar miring dengan bilah di sebelah kirinya.

`Link`

Link menggambar label diikuti URL-nya:

Link({ href: 'https://code.claude.com/docs', label: 'Claude Code docs' })

Terminal menggambar URL sebagai teks setelah label. Apakah klik akan membukanya bergantung pada terminal pengguna.

Menampilkan kode dan perubahan

Code menggambar teks sumber dengan warna sintaks milik Claude Code sendiri, atau sebuah diff.

`Code`

Sebutkan language, atau berikan path agar Claude Code menyimpulkannya. Dengan startLine, baris-baris diberi nomor mulai dari angka tersebut:

Code({
  language: 'javascript',
  startLine: 1,
  source: "const name = 'mods'\nconsole.log('hello ' + name)",
})

Warnanya berasal dari tema pengguna.

`Code` sebagai diff

Dengan format: 'diff', source adalah satu atau beberapa hunk unified diff:

Code({
  format: 'diff',
  source: '@@ -1,3 +1,3 @@\n # Mods\n-A mod is a plugin.\n+A mod is a plugin that runs code.\n Read on.',
})

Claude Code menggambar nomor baris sebagai pengganti baris @@. Jika baris yang dihapus dan baris yang ditambahkan mirip, kata-kata yang berubah mendapat bayangan yang lebih kuat.

Mengatur elemen

`Box`

Box menata isinya dalam baris atau kolom, dan dapat menggambar bingkai. Contoh ini menempatkan sebaris kata di atas kotak berbingkai:

Box({
  flexDirection: 'column',
  gap: 1,
  children: [
    Box({
      flexDirection: 'row',
      columnGap: 4,
      children: [Text({ children: ['a row'] }), Text({ children: ['of three'] }), Text({ children: ['items'] })],
    }),
    Box({
      borderStyle: 'round',
      paddingX: 1,
      children: [Text({ children: ["borderStyle: 'round'"] })],
    }),
  ],
})

Bingkai membentang selebar panel.

Menerima input

Button, Input, dan Select adalah kontrol: pengguna berpindah di antaranya dengan Tab dan menggunakan kontrol yang sedang memiliki fokus. Fokus keyboard dan hotkey menjelaskan tombol mana yang mencapainya.

Membuka panel dengan focus: true memberikan fokus keyboard ke panel tersebut. Huruf yang diketik mencapai Input setelah kontrol itu memiliki fokus, jadi tambahkan autoFocus: true pada kolom yang harus menerima ketikan segera setelah panel terbuka.

`Button`

Sebuah tombol menjalankan onPress. Contoh ini menampilkan bentuk default, tombol plain dengan hotkey, dan tombol redup:

Box({
  flexDirection: 'column',
  children: [
    Button({ key: 'save', label: 'Save', onPress: noop }),
    Button({ key: 'next', label: 'Next', hotkey: 'n', plain: true, onPress: noop }),
    Button({ key: 'skip', label: 'Skip', dimColor: true, onPress: noop }),
  ],
})

Tombol yang memiliki fokus digambar dalam video terbalik. Di sini pengguna telah menekan Tab dua kali:

`Input`

Input adalah kolom teks satu baris yang menjalankan onSubmit saat pengguna menekan Enter:

Input({
  key: 'title',
  label: 'Title',
  placeholder: 'Type a title and press Enter',
  value: '',
  submitLabel: 'save',
  onSubmit: noop,
})

Tanpa fokus, kolom menampilkan label dan placeholder-nya:

Dengan fokus, label menjadi tebal, kursor muncul, dan submitLabel ditampilkan setelah ⏎:

Mengetik menggantikan placeholder:

`Select`

Select memungkinkan pengguna memilih salah satu dari beberapa opsi, dan menjalankan onSelect dengan value dari opsi tersebut:

Select({
  key: 'format',
  label: 'Format',
  value: picked,
  options: [
    { value: 'md', label: 'Markdown' },
    { value: 'html', label: 'HTML' },
    { value: 'txt', label: 'Plain text' },
  ],
  onSelect: (value) => {
    picked = value
  },
})

Dalam keadaan tertutup, kontrol ini menampilkan label dan opsi saat ini:

Dalam keadaan terbuka, kontrol ini mencantumkan opsinya dan menandai salah satunya:

Setelah pengguna memilih opsi, daftar tertutup:

Menggambar gambar

`Raster`

Raster adalah kisi sel karakter berwarna, untuk peta panas, sparkline, atau papan permainan. Terminal yang menggambarnya. Contoh ini menggunakan fungsi cellsOf di modul awal, yang mengemas sel-sel ke dalam string yang diterima Raster. Menggambar kisi sel berwarna menjelaskannya:

Raster({
  key: 'grid',
  columns: 3,
  rows: 2,
  cells: cellsOf([
    [['█', 0x2e7d32], ['█', 0xf9a825], ['█', 0xc62828]],
    [['█', 0x2e7d32], ['█', 0x2e7d32], ['█', 0xf9a825]],
  ]),
})

Raster membulatkan setiap warna ke palet yang lebih kecil, sehingga 0x2e7d32 digambar sebagai #337733.

`Svg`

Svg menggambar dokumen SVG di aplikasi Desktop:

Svg({
  alt: 'Three bars of rising height',
  width: 120,
  height: 60,
  source:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 60"><rect x="10" y="40" width="20" height="20" fill="#2e7d32"/><rect x="50" y="25" width="20" height="35" fill="#f9a825"/><rect x="90" y="5" width="20" height="55" fill="#c62828"/></svg>',
})

Di terminal, panel yang hanya mengembalikan Svg akan terbuka kosong. Untuk menggambar sesuatu yang lain di sana, periksa e.surface dan kembalikan tree yang berbeda.

`Image` dan `Client`

Dua elemen lagi tidak memiliki contoh di sini. Image menggambar PNG atau piksel mentah di terminal. Client adalah wilayah yang digambar oleh file kedua milik Anda, untuk animasi dan input penunjuk. Referensi elemen mencantumkan props-nya.

Kecuali Claude Code mendeteksi bahwa terminal menggambar gambar protokol grafis kitty dengan placeholder Unicode, pengguna akan melihat teks alt dari Image, dalam warna redup, sebagai pengganti gambar. Tulis teks alt yang dapat dipahami dengan sendirinya. Deteksi berjalan saat startup: deteksi berhasil di kitty 0.28 atau yang lebih baru dan di Ghostty, setelah terminal menjawab kueri grafis Claude Code, dan gagal dalam kasus-kasus berikut:

• Terminal lain: terminal apa pun yang bukan salah satu dari keduanya, atau yang tidak menjawab kueri tersebut.
• tmux dan screen: sesi yang berjalan di dalam tmux atau screen, di terminal apa pun, termasuk kitty dan Ghostty.
• Sesi latar belakang: setiap sesi latar belakang, dari terminal mana pun sesi tersebut dilampirkan.

Jika pengguna mod Anda melihat teks redup di terminal yang sebenarnya menggambar gambar placeholder tersebut, mereka dapat mengatur CLAUDE_CODE_FORCE_TERMINAL_IMAGES ke 1, yang melewati deteksi. Di dalam tmux atau screen hal itu tidak membantu: teks alt hilang, dan Claude Code mengirim gambar tanpa membungkusnya untuk passthrough tmux atau screen.

Melihat di mana mod dapat menggambar

Semua contoh menggambar di panel. Mod juga dapat menggambar di tempat lain, dan memanggil Claude Code untuk menampilkan sesuatu untuknya:

• Panel dan band: Memilih tempat menggambar
• Baris milik Claude Code sendiri, seperti spinner: Mengubah apa yang sudah digambar Claude Code
• Toast, baris status, dan baris log: Menampilkan sesuatu tanpa memulai giliran
• Dialog pertanyaan: Menahan panggilan tool hingga pengguna memutuskan

Langkah selanjutnya

• Menggambar di antarmuka: membangun panel dengan tab, langkah demi langkah
• Menguji gambar: menekan tombol Anda dari sebuah pengujian
• Referensi elemen: props utama setiap elemen dan aplikasi yang menggambarnya