Langsung ke komponen

Komponen untuk aplikasi berbasis AI.

Blok bangunan interaktif untuk agen, chat, data, dan layar aplikasi sehari-hari. Salin kodenya, berikan prompt-nya ke agen coding Anda, atau biarkan MonstarX langsung membangunnya di aplikasi Anda.

  • 40komponen
  • 7grup
  • React + Tailwind
  • gratis dipakai

Prompt bisa dipakai di

MonstarX · Claude Code · Cursor · Codex · Windsurf · Gemini CLI · VS Code · Lovable · dan agen coding apa pun

Pakai dengan agen coding
01

Layar agen

Agen memakai situs web untuk Anda: lihat ia mengklik dan mengetik, ambil alih atau setujui langkah yang berisiko, ajari dengan mengerjakan tugasnya sekali, atau putar ulang rekamannya.

Memuat demo…

Tambahkan layar tempat orang bisa melihat asisten memakai situs web untuk mereka: penunjuknya bergerak, mengklik, dan mengetik sementara daftar menampilkan setiap langkah, dengan Jeda, Ambil alih, dan persetujuan sebelum apa pun yang mengeluarkan uang. Tambahkan mode untuk mengajarinya tugas dengan mengerjakannya sekali, dan rekaman yang bisa diputar ulang dan digeser.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

02

Jejak berpikir

Menampilkan apa yang dikerjakan agen saat bekerja — langkah, penalaran, pencarian, dan kode — lalu dilipat menjadi satu baris.

Memuat demo…

Tambahkan jejak berpikir ke asisten di aplikasi saya: saat bekerja, tampilkan panel “Sedang berpikir…” yang mendaftar setiap langkah dengan ikon berputar, lalu tanda centang dan lama waktunya saat selesai. Panelnya bisa dibuka untuk membaca penalaran, pencarian yang dijalankan, dan kode yang ditulis, lalu dilipat menjadi “Berpikir selama 6 detik” saat selesai.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

03

Chip alat

Alat yang dipanggil agen saat menjawab, sebagai chip yang berjalan, gagal, mencoba lagi, dan selesai — masing-masing bisa dibuka untuk melihat input dan output-nya.

Memuat demo…

Tampilkan alat yang dipakai asisten saat menjawab sebagai chip kecil: ikon berputar saat tiap alat berjalan, nama dan lama waktunya saat selesai, merah beserta errornya saat gagal, dan klik untuk membuka apa yang dikirim dan apa yang kembali. Sediakan juga tampilan linimasa yang bisa dilipat menjadi “Memakai 5 alat”.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

04

Baris tugas

Status langsung tugas yang dijalankan agen: antre, berjalan dengan progres, gagal dengan coba lagi, selesai — sebagai kapsul atau daftar.

Memuat demo…

Tambahkan daftar tugas yang menunjukkan apa yang sedang dikerjakan agen: satu baris per tugas dengan statusnya (antre, berjalan dengan cincin progres, gagal dengan tombol “Coba lagi”, selesai dengan tanda centang), hitungan singkat seperti “12 faktur”, dan panah untuk membuka sublangkahnya.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

05

Rencana fitur

Rencana yang dijalankan agen, sebagai daftar periksa dengan progres: status tiap fitur, cakupannya, dan apakah lolos uji.

Memuat demo…

Tambahkan kartu rencana fitur: daftar periksa fitur yang sedang dibangun dengan bilah progres (“3 dari 5 selesai”). Setiap fitur menampilkan status belum dikerjakan, sedang dikerjakan, atau selesai, bisa dibuka untuk satu baris keterangan, dan punya lencana kecil “Lolos uji” atau “Gagal uji”.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

06

Antrean permintaan

Permintaan yang dikirim saat agen sibuk menunggu di baki di atas kotak prompt — urutkan ulang, ubah, hapus, atau kirim sebagai berikutnya.

Memuat demo…

Biarkan orang tetap mengirim permintaan saat asisten sedang bekerja: tampilkan apa yang sedang dikerjakannya beserta progresnya, dan masukkan permintaan baru ke antrean di atas kotak prompt yang bisa diurutkan ulang, diubah, dihapus, atau dikirim sebagai berikutnya, dengan tombol untuk menjeda antrean.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

07

Grid pembuatan gambar

Buat gambar dari prompt: kumpulan gambar yang muncul perlahan dari derau dengan progres langsung, lalu buat variasi, perbesar, simpan, atau unduh yang mana saja.

Memuat demo…

Tambahkan pembuat gambar: kotak prompt dengan pilihan gaya dan rasio, serta tombol “Buat” yang menghasilkan empat gambar sekaligus, masing-masing menampilkan progresnya selagi terbentuk. Dari gambar yang sudah jadi, orang bisa membuat variasi, memperbesarnya, menyimpannya sebagai favorit, atau mengunduhnya; kumpulan sebelumnya tetap ada di bawah.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

08

Jawaban streaming

Jawaban yang menulis dirinya sendiri, dengan kutipan bernomor yang membuka pratinjau sumber, tombol salin atau beri nilai, dan pertanyaan lanjutan.

Memuat demo…

Buat jawaban asisten muncul kata demi kata di belakang kursor yang berkedip, dengan kutipan bernomor yang menampilkan judul, situs, dan cuplikan sumber saat diarahkan, sederet tombol (salin, tulis ulang, suka, tidak suka), serta dua atau tiga pertanyaan lanjutan yang bisa diklik untuk ditanyakan berikutnya.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

09

Kartu konteks

Potongan teks yang ditemukan AI sebelum menjawab: sumber, relevansi, dan kata yang cocok, dengan sematkan dan kecualikan — dan jawabannya ikut berubah.

Memuat demo…

Saat asisten menjawab dari dokumen kami, tampilkan potongan teks yang dipakainya sebagai kartu: masing-masing dengan sumber dan halaman, skor relevansi, kata yang cocok disorot, serta tombol untuk menyematkan atau mengecualikannya, dengan jawaban yang mengutip setiap kartu berdasarkan nomornya.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

10

Kartu persetujuan

Pertanyaan yang diajukan agen satu per satu sebelum bertindak, dan kartu izin untuk tindakan yang butuh persetujuan.

Memuat demo…

Sebelum asisten melakukan hal penting, tampilkan kartu persetujuan: beberapa pertanyaan satu per satu (satu pilihan, beberapa pilihan, atau jawaban singkat) dengan “Lewati”, “Lanjut”, dan penghitung “1 dari 3”. Untuk tindakan berisiko, tampilkan kartu yang menjelaskan persis apa yang akan terjadi, dengan “Setujui”, “Ubah”, dan “Tolak”.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

11

Kartu rekomendasi

Rekomendasi AI dengan pengukur keyakinan, bukti dan risiko di baliknya, serta alternatif yang dipertimbangkannya — sebagai kartu atau perbandingan.

Memuat demo…

Tambahkan kartu rekomendasi: pilihan yang direkomendasikan asisten dengan pengukur keyakinan (misalnya “82% · Tinggi”), alasan beserta sumbernya, risiko utama, hal yang bisa mengubah pendapatnya, alternatif yang dipertimbangkannya dengan tingkat keyakinan masing-masing, dan tombol untuk menjalankannya.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

12

Bola agen suara

Bola yang bernapas, mendengarkan, berpikir, dan berbicara, dengan teks langsung, bisu, dan ketuk untuk menyela — atau bilah panggilan yang ringkas.

Memuat demo…

Tambahkan asisten suara ke aplikasi saya: bola bercahaya yang diketuk untuk berbicara, yang menunjukkan kapan ia mendengarkan, berpikir, dan berbicara, dengan teks langsung, tombol bisu, ketuk untuk menyela saat ia berbicara, dan bilah panggilan kecil dengan pengatur waktu dan tombol akhiri.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

13

Komentar di pratinjau

Utas komentar yang disematkan di pratinjau langsung: taruh pin di mana saja, balas, tandai selesai dan urungkan, dengan daftar semua utas jika perlu.

Memuat demo…

Biarkan orang berkomentar di pratinjau aplikasi saya: tombol “Komentar”, lalu klik di mana saja untuk menaruh pin berisi avatar orang itu dan membuka utas yang bisa dibalas orang lain. Utas bisa ditandai selesai (dengan Urungkan) dan disembunyikan, memberi tanda saat ada balasan baru, dan juga tercantum di panel samping dengan tab “Terbuka” dan “Selesai”.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

14

Bilah prompt

Kotak tempat orang mengetik ke agen: @ untuk melampirkan sumber, / untuk perintah, menu model, lampiran, dan suara.

Memuat demo…

Tambahkan kotak prompt ke aplikasi saya: kotaknya memanjang mengikuti ketikan, “@” membuka daftar file dan sumber data untuk dilampirkan sebagai cip, “/” membuka daftar perintah, dan ada tombol untuk melampirkan file, memilih model, mendikte dengan suara, dan mengirim — semuanya bisa dipakai lewat keyboard.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

15

Pemilih model

Pilih model dan seberapa dalam ia berpikir: kecepatan dan biaya sekilas pandang, lencana premium, dan upaya dari rendah hingga maksimum.

Memuat demo…

Tambahkan pemilih model di samping kotak prompt: tombol yang menampilkan model dan upaya saat ini, membuka daftar model yang masing-masing punya deskripsi singkat, indikator kecepatan dan biaya, serta lencana untuk model premium; ditambah kontrol upaya (Rendah, Sedang, Tinggi, Maksimum) yang menjelaskan berapa pemakaian tiap tingkat.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

16

Gelombang dikte

Bicara alih-alih mengetik: gelombang suara langsung dan pengatur waktu, kata-kata muncul saat Anda bicara, lalu simpan atau batalkan — dengan suara demo atau mikrofon Anda sendiri.

Memuat demo…

Tambahkan pengetikan dengan suara ke kolom teks saya: tombol mikrofon yang mengubah kolom menjadi gelombang suara langsung dengan pengatur waktu, menampilkan kata-kata saat orang berbicara (kata yang belum pasti berwarna abu-abu), dan punya tombol untuk menyimpan atau membatalkan yang diucapkan.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

17

Aksi pilihan teks

Sorot teks dan bilah alat AI muncul: perbaiki, persingkat, buat lebih hangat, betulkan, atau terjemahkan, lalu terima atau buang hasilnya di tempat.

Memuat demo…

Saat orang memilih teks di editor saya, munculkan bilah alat AI tepat di sebelahnya — Perbaiki, Lebih singkat, Lebih hangat, Betulkan ejaan, dan Terjemahkan — lalu tampilkan hasil tulis ulangnya di tempat, dengan kata lama dicoret dan kata baru berwarna hijau, serta tombol untuk menerima atau membuangnya.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

18

Palet perintah

Satu kotak untuk menemukan apa saja dan menjalankan tindakan apa pun: pencarian yang memaafkan salah ketik, hasil berkelompok, cakupan, dan langkah kedua, semuanya dari keyboard.

Memuat demo…

Tambahkan palet perintah yang terbuka dengan ⌘K: satu kotak pencarian yang menemukan halaman, data, dan tindakan selagi mengetik (salah ketik kecil tetap ketemu), mengelompokkan hasil dengan item terbaru di atas, menyorot huruf yang cocok, menjalankan pilihan dengan Enter, dan menampilkan keadaan kosong yang ramah beserta saran saat tidak ada yang cocok.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

19

Tabel perbedaan

Suntingan AI menyapu tabel baris demi baris: setiap perubahan sebagai sebelum → sesudah, terima atau tolak per sel, per baris, atau semuanya, dan baris yang dibiarkan dijelaskan alasannya.

Memuat demo…

Saat asisten mengusulkan perubahan pada tabel, tampilkan dulu sebelum diterapkan: setiap sel yang berubah dengan nilai lama dicoret dan nilai baru berwarna hijau, catatan pada baris yang sengaja tidak diubah, dan tombol untuk menerima atau menolak setiap sel, setiap baris, atau semuanya, lalu Terapkan.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

20

Kartu wawasan

Angka yang menjelaskan dirinya sendiri: kartu statistik dengan grafik garis mini atau batang yang bisa diarahkan, dan wawasan di baliknya.

Memuat demo…

Tambahkan sederet kartu statistik ke dasbor saya: tiap kartu menampilkan angka, perubahannya sejak minggu lalu dalam hijau atau merah, dan grafik kecil yang bisa diarahkan untuk membaca nilai setiap hari. Di bawahnya, tambahkan kartu wawasan yang bisa digeser untuk melihat arti angka-angka itu, masing-masing dengan saran langkah berikutnya.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

21

Tabel data

Tabel bergaya CRM: pencarian, kolom yang bisa diurutkan, tag, meteran kedekatan hubungan, dan pilih baris untuk tindakan massal.

Memuat demo…

Tambahkan tabel pelanggan: bisa dicari, kolomnya bisa diurutkan (nama, tag, volume bulanan, pesanan terakhir, dan kedekatan hubungan yang ditampilkan dengan empat batang), kotak centang untuk memilih baris, dan bilah tindakan massal yang muncul saat ada baris dipilih. Di ponsel, kolom pertama tetap di tempat sementara sisanya bisa digulir.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

22

Tabel filter

Tabel langsung yang tersusun ulang saat difilter dengan chip status: jumlah berubah, baris meluncur ke tempatnya, dan baris baru berdatangan di depan mata.

Memuat demo…

Tambahkan tabel pesanan langsung dengan chip status di atasnya (Semua, Baru, Diproses, Dikirim, Bermasalah) yang masing-masing menampilkan jumlah dan memfilter baris saat diklik. Pesanan baru muncul di atas dan baris yang statusnya berubah bergerak dengan halus; tambahkan kotak pencarian, tombol Jeda untuk pembaruan langsung, dan opsi mengelompokkan baris menurut status.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

23

Diff kode

Perubahan kode dari agen, siap ditinjau: terpadu atau berdampingan, sorotan per kata, baris tak berubah dilipat, dan komentar di baris mana pun yang berubah.

Memuat demo…

Tampilkan perubahan kode yang dibuat agen sebagai diff yang bisa ditinjau: per file, baris yang dihapus berwarna merah dan yang ditambah berwarna hijau dengan kata yang berubah disorot, kode yang tidak berubah dilipat, kotak centang “Sudah dilihat” per file, komentar di baris mana pun yang berubah, dan pilihan tampilan terpadu atau berdampingan.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

24

Aliran log

Penampil log langsung dengan filter level, pencarian, ikuti baris terbaru, dan salin — atau terminal yang menampilkan proses build dan menerima perintah.

Memuat demo…

Tambahkan penampil log langsung ke admin aplikasi saya: baris mengalir masuk dengan waktu, level, dan sumber; setiap level punya tombol tampil/sembunyi beserta jumlahnya; kotak pencarian menyorot yang cocok; terus mengikuti baris terbaru sampai saya menggulir ke atas (lalu muncul tombol “baris baru”); dan saya bisa menjedanya, membuka detail baris, dan menyalin baris.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

25

Kanvas diagram alur

Otomatisasi yang digambar di kanvas bertitik — pemicu, kondisi, dan tindakan — dengan tombol + untuk menambah langkah di mana saja dan uji coba yang menyalakan jalur yang dilalui.

Memuat demo…

Tambahkan pembuat otomatisasi: alur di kanvas bertitik yang dimulai dari pemicu, bercabang menurut kondisi ya/tidak, lalu menjalankan tindakan; ada + di setiap garis penghubung untuk menambah langkah dari menu, langkah bisa diganti nama atau dihapus, kanvas bisa digeser dan diperbesar, dan tombol “Uji coba” menyorot setiap langkah saat dijalankan.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

26

Papan kanban

Kolom kartu untuk dipindahkan antartahap — dengan mouse, jari, atau keyboard — dengan batas dan tambah cepat.

Memuat demo…

Tambahkan papan kanban dengan satu kolom per tahap, kartu yang bisa diseret antarkolom dengan mouse atau jari atau dipindahkan lewat keyboard (Space untuk mengangkat, panah untuk memindah, Space untuk meletakkan), jumlah dan batas di tiap kolom, serta tombol cepat “Tambah kartu” di bawah setiap kolom.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

27

Kursor langsung dan kehadiran

Siapa yang ada dan apa yang mereka lakukan: avatar dengan status, kursor bernama yang meluncur halus, pilihan dan kursor ketik orang lain, serta mode ikuti.

Memuat demo…

Tampilkan siapa saja yang sedang ada di dokumen ini: tumpukan avatar dengan titik aktif atau diam, kursor setiap orang dengan namanya dalam warnanya sendiri, apa yang sedang mereka pilih atau ketik, pemberitahuan saat ada yang bergabung atau keluar, dan cara mengikuti seseorang dengan mengeklik avatarnya.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

28

Linimasa versi

Setiap versi tersimpan di satu linimasa: lihat perubahannya sebagai diff atau penggeser sebelum/sesudah, pulihkan versi mana pun setelah konfirmasi yang jelas, dan urungkan.

Memuat demo…

Tambahkan riwayat versi: linimasa versi tersimpan yang dikelompokkan per hari, menampilkan siapa pembuat tiap versi dan menandai versi saat ini. Memilih versi menampilkan apa yang berubah (atau perbandingan halaman sebelum/sesudah), dan “Pulihkan” meminta konfirmasi, tetap menyimpan versi saat ini di riwayat, dan bisa diurungkan.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

30

Daftar langkah awal

Panduan penyiapan dengan cincin progres: langkah berikutnya terbuka dengan tombol aksinya, langkah bisa dilewati, dan panduan bisa disembunyikan lalu dimunculkan lagi.

Memuat demo…

Tambahkan daftar penyiapan untuk pengguna baru: cincin progres dengan “2 dari 5 selesai”, langkah-langkah berurutan dengan perkiraan waktunya, langkah berikutnya terbuka dengan tombol untuk mengerjakannya dan “Lewati dulu”, perayaan saat semuanya selesai, dan cara menyembunyikan panduan lalu memunculkannya lagi. Sediakan juga versi tombol kecil di pojok layar.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

31

Formulir pengaturan

Pengaturan berkelompok yang tahu apa yang berubah: kolom yang diubah ditandai, bilah simpan dengan jumlahnya, Buang, validasi, dan ⌘S.

Memuat demo…

Tambahkan halaman pengaturan berbagian (info toko, pengiriman, notifikasi) yang menandai setiap kolom yang saya ubah, menampilkan bilah dengan jumlah perubahan yang belum disimpan serta tombol Simpan / Buang, memeriksa kolom sebelum menyimpan dan langsung ke masalah pertama, memberi konfirmasi saat tersimpan, dan juga menyimpan dengan Ctrl+S atau ⌘S.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

32

Stepper / wizard

Formulir panjang dalam langkah-langkah pendek: posisi Anda, yang sudah selesai, pemeriksaan sebelum lanjut, tinjauan dengan tautan edit, dan konfirmasi.

Memuat demo…

Ubah formulir pendaftaran menjadi wizard langkah demi langkah: bilah langkah yang menunjukkan saya di mana dan langkah mana yang sudah selesai, tiap langkah diperiksa sebelum lanjut dengan pesan yang jelas, Kembali tanpa kehilangan apa pun, halaman tinjauan terakhir dengan tautan Edit untuk tiap langkah, dan konfirmasi setelah dikirim.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

33

Pemetaan impor data

Cocokkan kolom spreadsheet dengan field Anda: saran dengan tingkat keyakinan, contoh nilai, field wajib dan bentrokan, lalu impor.

Memuat demo…

Setelah seseorang mengunggah spreadsheet, tampilkan langkah untuk mencocokkan kolomnya dengan field saya: tiap kolom dengan beberapa contoh nilai, field yang disarankan dan seberapa yakin kecocokannya, cara mudah untuk menggantinya atau melewati kolom itu, peringatan jika ada field wajib yang belum terisi atau dua kolom menunjuk field yang sama, dan tombol Impor yang menampilkan progres dan ringkasan.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

34

Taruh file dan lampiran

Seret, telusuri, atau tempel file: pratinjau, progres tiap file, alasan penolakan yang jelas, Coba lagi, dan pesan yang menunggu unggahan.

Memuat demo…

Tambahkan unggah file: area untuk menyeret file, klik untuk menelusuri, atau menempel gambar, pratinjau dan bilah progres untuk tiap file, pesan yang jelas saat file terlalu besar atau jenisnya tidak didukung, tombol Coba lagi saat unggahan gagal, dan lampiran di kotak pesan yang harus selesai diunggah sebelum pesan bisa dikirim.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

35

Dialog izin

Tanya dulu sebelum bertindak: apa yang ingin dilakukan aplikasi atau agen AI, penjelasan tiap izin, izin opsional yang bisa dimatikan, dan pilihan untuk mengingat keputusan.

Memuat demo…

Tambahkan dialog izin yang muncul sebelum aplikasi lain terhubung atau asisten melakukan sesuatu atas nama saya: dialog ini mencantumkan dengan kata-kata sederhana apa persisnya yang diminta, memungkinkan bagian opsional dimatikan, menampilkan pratinjau tindakannya (misalnya isi email dan penerimanya), menawarkan “Izinkan sekali” atau “Selalu izinkan”, dan punya opsi “Ingat pilihan ini”.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

36

Pemilih slot pemesanan

Pilih hari dan jam: strip tanggal atau kalender bulanan, slot pagi dan siang, jam yang sudah penuh, dan konfirmasi.

Memuat demo…

Tambahkan pemilih pemesanan: strip dua minggu ke depan (atau kalender bulanan) untuk memilih hari, jam kosong yang dikelompokkan pagi dan siang dengan jam penuh berwarna abu-abu, pilihan durasi sesi, zona waktu, dan ringkasan dengan tombol “Konfirmasi” yang berubah menjadi konfirmasi dengan “Tambahkan ke kalender”.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

37

Tabel harga

Paket berdampingan dengan sakelar bulanan / tahunan, paket populer ditonjolkan, pilihan yang dibawa ke checkout, dan perbandingan lengkap.

Memuat demo…

Tambahkan bagian harga: tiga paket berdampingan dengan sakelar Bulanan / Tahunan yang menunjukkan hemat berapa jika tahunan, paket paling populer ditonjolkan, tombol Pilih di setiap paket yang membawa paket dan harganya ke bilah checkout, dan tabel perbandingan isi tiap paket.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

38

Tumpukan notifikasi

Pemberitahuan singkat yang bertumpuk, melebar saat diarahkan, bisa digeser untuk ditutup, menunjukkan progres pekerjaan lambat, dan menawarkan Urungkan.

Memuat demo…

Tambahkan notifikasi toast: bertumpuk di pojok dan melebar saat diarahkan, tertutup sendiri setelah beberapa detik (berhenti sementara saat diarahkan), bisa digeser untuk ditutup, dan hadir sebagai sukses, galat dengan “Coba lagi”, memuat yang berubah menjadi sukses, serta pemberitahuan dengan “Urungkan”.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

39

Kotak notifikasi

Lonceng dengan jumlah belum dibaca yang membuka kotak masuk: tab Semua, Belum dibaca, dan Sebutan, aksi langsung di tempat, tandai semua dibaca, dan notifikasi baru secara langsung.

Memuat demo…

Tambahkan lonceng notifikasi di bilah atas dengan jumlah belum dibaca berwarna merah. Lonceng membuka kotak masuk dengan tab Semua, Belum dibaca, dan Sebutan, notifikasi dikelompokkan Hari ini, Kemarin, dan Sebelumnya, tombol untuk menindaklanjuti tiap notifikasi langsung di sana (setujui, balas), titik untuk menandai dibaca atau belum, “Tandai semua dibaca”, dan notifikasi baru meluncur masuk saat tiba.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

40

Tampilan kosong

Apa yang ditampilkan layar saat tidak ada isinya: kunjungan pertama, pencarian tanpa hasil, gagal memuat, dan offline, masing-masing dengan langkah berikutnya.

Memuat demo…

Rancang tampilan kosong untuk daftar saya: layar kunjungan pertama yang ramah dengan tombol untuk menambah item pertama atau mencoba data contoh, pesan “tidak ada hasil” yang menyebut kata pencariannya dan menawarkan untuk menghapus filter, layar error dengan Coba lagi dan detailnya, dan banner offline yang tetap menampilkan data terakhir yang tersimpan dan mencoba lagi sendiri.

Tempel ke MonstarX, atau mulai proyek baru dengan prompt ini.

Membuka proyek baru dengan prompt ini. Baru di MonstarX? Daftar gratis, prompt-nya tetap menunggu Anda.

Pakai dengan agen coding Anda.

Hubungkan MonstarX UI ke Claude Code, Cursor, Codex, atau klien MCP apa pun, dan agen Anda bisa mencari di antara semua 40 komponen, membaca spesifikasi dan kodenya, lalu membangunnya ke dalam aplikasi Anda di stack Anda sendiri. Gratis, hanya-baca, tanpa masuk.

Alamat server MCPhttps://monstarx.com/ui/mcp

Jalankan di terminal:

claude mcp add --transport http monstarx-ui https://monstarx.com/ui/mcp

Atau, agar tersedia di setiap proyek:

claude mcp add --transport http --scope user monstarx-ui https://monstarx.com/ui/mcp
  • “Pakai monstarx-ui untuk mencari komponen yang menunjukkan apa yang sedang dikerjakan agen, lalu pasang di layar chat kita.”
  • “Tambahkan kartu persetujuan dari monstarx-ui sebelum agen mengirim email, dengan design system kita.”
  • “Ambil tabel harga dari monstarx-ui dan sambungkan ke paket Stripe kita.”

Yang didapat agen Anda

  • search_componentsmencari komponen sesuai kebutuhan: “approval”, “agent progress”, “pricing”.
  • list_componentssemua 40 komponen, dikelompokkan.
  • get_componentkode sumber, dependensi, varian, perintah instalasi, dan spesifikasi lengkap.
  • get_promptspesifikasi untuk agen coding, atau prompt MonstarX dalam 16 bahasa.
  • get_guidelinesaturan desain, agar komponen disesuaikan dengan stack dan merek Anda, bukan sekadar ditempel.

Ditambah resource (ui://components/{id}, ui://guidelines) dan prompt (add-component, find-component).

Atau pasang dengan CLI shadcn

Setiap komponen adalah item registry shadcn. Di proyek yang memakai shadcn/ui, satu perintah menulis file dan memasang lucide-react:

npx shadcn@latest add https://monstarx.com/ui/r/approval-card.json
Indeks registry (JSON)

Komponen baru langsung ke kotak masuk Anda.

Layar agen, suara, grafik, blok aplikasi: setiap koleksi baru beserta prompt dan kodenya, di hari rilisnya.

Hanya komponen baru, tidak pernah spam. Privasi

Ingin aplikasi utuh, bukan sekadar komponennya?

Jelaskan dalam satu kalimat. MonstarX merencanakannya, membangunnya dengan komponen seperti ini, mengujinya di browser sungguhan, dan memublikasikannya di domain Anda.

Hubungkan agen coding Anda