Langkau ke komponen

Komponen untuk aplikasi berasaskan AI.

Blok binaan interaktif untuk ejen, sembang, data dan skrin aplikasi harian. Salin kodnya, serahkan prom kepada ejen pengekodan anda, atau biar MonstarX terus membinanya dalam aplikasi anda.

  • 40komponen
  • 7kumpulan
  • React + Tailwind
  • percuma digunakan

Prom boleh digunakan dalam

MonstarX · Claude Code · Cursor · Codex · Windsurf · Gemini CLI · VS Code · Lovable · dan mana-mana ejen pengekodan

Guna dengan ejen pengekodan
01

Skrin ejen

Ejen menggunakan laman web untuk anda: lihat ia mengklik dan menaip, ambil alih atau luluskan langkah berisiko, ajar dengan melakukan tugasan sekali, atau main semula rakamannya.

Memuatkan demo…

Tambahkan skrin tempat orang boleh melihat pembantu menggunakan laman web untuk mereka: penudingnya bergerak, mengklik dan menaip sementara senarai memaparkan setiap langkah, dengan Jeda, Ambil alih dan kelulusan sebelum apa-apa yang membelanjakan wang. Tambahkan mod untuk mengajarnya sesuatu tugasan dengan melakukannya sekali, dan rakaman yang boleh dimain semula dan dianjak.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

02

Jejak pemikiran

Menunjukkan apa yang dilakukan ejen semasa bekerja — langkah, penaakulan, carian dan kod — kemudian dilipat menjadi satu baris.

Memuatkan demo…

Tambahkan jejak pemikiran pada pembantu dalam aplikasi saya: semasa ia bekerja, paparkan panel “Sedang berfikir…” yang menyenaraikan setiap langkah dengan ikon berpusing, kemudian tanda semak dan tempoh masanya apabila selesai. Panel itu boleh dibuka untuk membaca penaakulan, carian yang dibuat dan kod yang ditulis, dan dilipat menjadi “Berfikir selama 6 saat” apabila selesai.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

03

Cip alat

Alat yang dipanggil ejen semasa menjawab, sebagai cip yang berjalan, gagal, mencuba semula dan selesai — setiap satu boleh dibuka untuk melihat input dan outputnya.

Memuatkan demo…

Paparkan alat yang digunakan pembantu semasa menjawab sebagai cip kecil: ikon berpusing semasa setiap alat berjalan, nama dan tempoh masanya apabila selesai, merah bersama ralatnya apabila gagal, dan klik untuk membuka apa yang dihantar dan apa yang kembali. Sediakan juga paparan garis masa yang boleh dilipat menjadi “Menggunakan 5 alat”.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

04

Baris tugasan

Status langsung tugasan yang dijalankan ejen: dalam giliran, sedang berjalan dengan kemajuan, gagal dengan cuba semula, selesai — sebagai kapsul atau senarai.

Memuatkan demo…

Tambahkan senarai tugasan yang menunjukkan apa yang sedang diusahakan ejen: satu baris bagi setiap tugasan dengan statusnya (dalam giliran, sedang berjalan dengan gelang kemajuan, gagal dengan butang “Cuba semula”, selesai dengan tanda semak), kiraan ringkas seperti “12 invois”, dan anak panah untuk membuka sublangkahnya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

05

Pelan ciri

Pelan yang diikuti ejen, sebagai senarai semak dengan kemajuan: status setiap ciri, liputannya dan sama ada ia lulus ujian.

Memuatkan demo…

Tambahkan kad pelan ciri: senarai semak ciri yang sedang dibina dengan bar kemajuan (“3 daripada 5 siap”). Setiap ciri memaparkan status belum dibuat, sedang dibuat atau siap, boleh dibuka untuk keterangan satu baris, dan mempunyai lencana kecil “Lulus ujian” atau “Gagal ujian”.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

06

Baris gilir permintaan

Permintaan yang dihantar semasa ejen sibuk menunggu dalam dulang di atas kotak prom — susun semula, edit, buang atau hantar satu sebagai yang seterusnya.

Memuatkan demo…

Benarkan orang terus menghantar permintaan semasa pembantu sedang bekerja: paparkan apa yang sedang diusahakannya bersama kemajuannya, dan letakkan permintaan baharu dalam baris gilir di atas kotak prom yang boleh disusun semula, diedit, dibuang atau dihantar sebagai yang seterusnya, dengan butang untuk menjeda baris gilir.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

07

Grid penjanaan imej

Jana imej daripada gesaan: kelompok yang muncul perlahan daripada hingar dengan kemajuan langsung, kemudian buat variasi, besarkan, simpan atau muat turun mana-mana satu.

Memuatkan demo…

Tambahkan penjana imej: kotak gesaan dengan pilihan gaya dan nisbah, serta butang “Jana” yang menghasilkan empat imej sekali gus, setiap satu menunjukkan kemajuannya semasa terbentuk. Pada imej yang siap, orang boleh membuat variasi, membesarkannya, menyimpannya sebagai kegemaran atau memuat turunnya; kelompok terdahulu kekal di bawah.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

08

Jawapan penstriman

Jawapan yang menulis dirinya sendiri, dengan petikan bernombor yang membuka pratonton sumber, butang salin atau beri penilaian, dan soalan susulan.

Memuatkan demo…

Jadikan jawapan pembantu muncul perkataan demi perkataan di belakang kursor yang berkelip, dengan petikan bernombor yang memaparkan tajuk, laman dan petikan sumber apabila dihalakan, sebaris butang (salin, tulis semula, suka, tidak suka), serta dua atau tiga soalan susulan yang boleh diklik untuk ditanya seterusnya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

09

Kad konteks

Petikan yang ditemui AI sebelum menjawab: sumber, kerelevanan dan perkataan yang sepadan, dengan sematkan dan kecualikan — dan jawapannya turut berubah.

Memuatkan demo…

Apabila pembantu menjawab berdasarkan dokumen kami, paparkan petikan yang digunakannya sebagai kad: setiap satu dengan sumber dan halaman, skor kerelevanan, perkataan sepadan yang diserlahkan, dan butang untuk menyematkan atau mengecualikannya, dengan jawapan yang memetik setiap kad mengikut nombornya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

10

Kad kelulusan

Soalan yang ditanya ejen satu demi satu sebelum bertindak, dan kad kebenaran untuk tindakan yang memerlukan persetujuan anda.

Memuatkan demo…

Sebelum pembantu melakukan sesuatu yang penting, paparkan kad kelulusan: beberapa soalan satu demi satu (satu pilihan, beberapa pilihan atau jawapan ringkas) dengan “Langkau”, “Teruskan” dan pembilang “1 daripada 3”. Bagi tindakan berisiko, paparkan kad yang menerangkan dengan tepat apa yang akan berlaku, dengan “Luluskan”, “Sunting” dan “Tolak”.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

11

Kad cadangan

Cadangan AI dengan tolok keyakinan, bukti dan risiko di sebaliknya, serta alternatif yang ditimbangnya — sebagai kad atau perbandingan.

Memuatkan demo…

Tambahkan kad cadangan: pilihan yang dicadangkan pembantu dengan tolok keyakinan (contohnya “82% · Tinggi”), sebab-sebab bersama sumbernya, risiko utama, perkara yang boleh mengubah fikirannya, alternatif yang dipertimbangkannya dengan tahap keyakinan masing-masing, dan butang untuk melaksanakannya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

12

Bebola ejen suara

Bebola yang bernafas, mendengar, berfikir dan bercakap, dengan sari kata langsung, senyap dan ketik untuk mencelah — atau bar panggilan yang padat.

Memuatkan demo…

Tambahkan pembantu suara pada aplikasi saya: bebola bercahaya yang diketik untuk bercakap, yang menunjukkan bila ia mendengar, berfikir dan bercakap, dengan sari kata langsung, butang senyap, ketik untuk mencelah semasa ia bercakap, dan bar panggilan kecil dengan pemasa dan butang tamat.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

13

Komen pada pratonton

Bebenang komen yang disemat pada pratonton langsung: letakkan pin di mana-mana, balas, tandakan selesai dan buat asal, dengan senarai semua bebenang jika mahu.

Memuatkan demo…

Benarkan orang memberi komen pada pratonton aplikasi saya: butang “Komen”, kemudian klik di mana-mana untuk meletakkan pin dengan avatar orang itu dan membuka bebenang yang boleh dibalas orang lain. Bebenang boleh ditanda selesai (dengan Buat asal) dan disembunyikan, menunjukkan apabila ada balasan baharu, dan turut disenaraikan dalam panel sisi dengan tab “Terbuka” dan “Selesai”.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

14

Bar prom

Kotak tempat orang menaip kepada ejen: @ untuk melampirkan sumber, / untuk arahan, menu model, lampiran dan suara.

Memuatkan demo…

Tambahkan kotak prom pada aplikasi saya: ia membesar mengikut taipan, “@” membuka senarai fail dan sumber data untuk dilampirkan sebagai cip, “/” membuka senarai arahan, dan terdapat butang untuk melampirkan fail, memilih model, merakam suara dan menghantar — semuanya boleh digunakan dengan papan kekunci.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

15

Pemilih model

Pilih model dan sedalam mana ia berfikir: kelajuan dan kos sekali imbas, lencana premium, dan usaha dari rendah hingga maksimum.

Memuatkan demo…

Tambahkan pemilih model di sebelah kotak prom: butang yang memaparkan model dan tahap usaha semasa, membuka senarai model yang setiap satunya mempunyai keterangan ringkas, penunjuk kelajuan dan kos, serta lencana untuk model premium; termasuk kawalan usaha (Rendah, Sederhana, Tinggi, Maksimum) yang menerangkan berapa banyak penggunaan setiap tahap.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

16

Gelombang imlak

Bercakap dan bukannya menaip: gelombang bunyi langsung dan pemasa, perkataan muncul semasa anda bercakap, kemudian simpan atau batalkan — dengan suara demo atau mikrofon anda sendiri.

Memuatkan demo…

Tambahkan penaipan suara pada medan teks saya: butang mikrofon yang menukar medan menjadi gelombang bunyi langsung dengan pemasa, memaparkan perkataan semasa orang bercakap (perkataan yang belum muktamad berwarna kelabu), dan ada butang untuk menyimpan atau membatalkan apa yang diucapkan.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

17

Tindakan pilihan teks

Serlahkan teks dan bar alat AI muncul: perbaiki, pendekkan, jadikan lebih mesra, betulkan atau terjemahkan, kemudian terima atau buang tulisan semula di tempatnya.

Memuatkan demo…

Apabila orang memilih teks dalam editor saya, paparkan bar alat AI betul-betul di sebelahnya — Perbaiki, Lebih pendek, Lebih mesra, Betulkan ejaan dan Terjemah — kemudian paparkan tulisan semula di tempatnya, dengan perkataan lama dipotong dan yang baharu berwarna hijau, serta butang untuk menerima atau membuangnya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

18

Palet arahan

Satu kotak untuk mencari apa sahaja dan menjalankan sebarang tindakan: carian yang memaafkan salah taip, hasil berkumpulan, skop dan langkah kedua, semuanya dari papan kekunci.

Memuatkan demo…

Tambahkan palet arahan yang dibuka dengan ⌘K: satu kotak carian yang menemui halaman, rekod dan tindakan semasa menaip (salah taip kecil pun masih jumpa), mengumpulkan hasil dengan item terkini di atas, menyerlahkan huruf yang sepadan, menjalankan pilihan dengan Enter, dan menunjukkan keadaan kosong yang mesra berserta cadangan apabila tiada yang sepadan.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

19

Jadual perbezaan

Suntingan AI menyapu jadual baris demi baris: setiap perubahan sebagai sebelum → selepas, terima atau tolak bagi setiap sel, setiap baris atau semua, dan baris yang dibiarkan diterangkan sebabnya.

Memuatkan demo…

Apabila pembantu mencadangkan perubahan pada jadual, paparkan dahulu sebelum digunakan: setiap sel yang berubah dengan nilai lama dipotong dan nilai baharu berwarna hijau, nota pada baris yang sengaja tidak diubah, dan butang untuk menerima atau menolak setiap sel, setiap baris atau semuanya, kemudian Guna.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

20

Kad pandangan

Nombor yang menerangkan dirinya: kad statistik dengan graf garis mini atau bar yang boleh dihalakan, dan pandangan di sebaliknya.

Memuatkan demo…

Tambahkan sebaris kad statistik pada papan pemuka saya: setiap kad memaparkan nombor, perubahannya sejak minggu lepas dalam warna hijau atau merah, dan carta kecil yang boleh dihalakan untuk membaca nilai setiap hari. Di bawahnya, tambahkan kad pandangan yang boleh diselak untuk melihat maksud nombor itu, masing-masing dengan cadangan langkah seterusnya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

21

Jadual rekod

Jadual gaya CRM: carian, lajur yang boleh diisih, tag, meter kekuatan hubungan, dan pilihan baris untuk tindakan pukal.

Memuatkan demo…

Tambahkan jadual pelanggan: boleh dicari, lajur boleh diisih (nama, tag, jumlah bulanan, pesanan terakhir, dan kekuatan hubungan yang ditunjukkan dengan empat bar), kotak semak untuk memilih baris, dan bar tindakan pukal yang muncul apabila baris dipilih. Pada telefon, lajur pertama kekal di tempatnya manakala yang lain boleh ditatal.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

22

Jadual penapis

Jadual langsung yang tersusun semula apabila ditapis dengan cip status: bilangan dikemas kini, baris meluncur ke tempatnya dan baris baharu tiba di depan mata.

Memuatkan demo…

Tambahkan jadual pesanan langsung dengan cip status di atasnya (Semua, Baharu, Sedang diproses, Dihantar, Bermasalah) yang setiap satunya menunjukkan bilangan dan menapis baris apabila diklik. Pesanan baharu muncul di atas dan baris yang bertukar status bergerak dengan lancar; tambahkan kotak carian, butang Jeda untuk kemas kini langsung dan pilihan mengumpulkan baris mengikut status.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

23

Diff kod

Perubahan kod daripada ejen, sedia untuk disemak: bersatu atau sebelah-menyebelah, serlahan setiap perkataan, baris tidak berubah dilipat, dan komen pada mana-mana baris yang berubah.

Memuatkan demo…

Paparkan perubahan kod yang dibuat ejen sebagai diff yang boleh disemak: fail demi fail, baris yang dibuang berwarna merah dan yang ditambah berwarna hijau dengan perkataan yang berubah diserlahkan, kod yang tidak berubah dilipat, kotak semak “Sudah dilihat” bagi setiap fail, komen pada mana-mana baris yang berubah, dan pilihan antara paparan bersatu dan sebelah-menyebelah.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

24

Aliran log

Pemapar log langsung dengan penapis tahap, carian, ikut baris terbaharu dan salin — atau terminal yang memaparkan proses binaan dan menerima arahan.

Memuatkan demo…

Tambahkan pemapar log langsung pada bahagian pentadbir aplikasi saya: baris mengalir masuk dengan masa, tahap dan sumber; setiap tahap ada togol tunjuk/sembunyi berserta bilangan; kotak carian menyerlahkan padanan; ia mengikut baris terbaharu sehingga saya menatal ke atas (kemudian butang “baris baharu” muncul); dan saya boleh menjedanya, membuka butiran baris dan menyalin baris.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

25

Kanvas carta alir

Automasi yang dilukis pada kanvas bertitik — pencetus, syarat dan tindakan — dengan butang + untuk menambah langkah di mana-mana dan larian ujian yang menyalakan laluan yang diambil.

Memuatkan demo…

Tambahkan pembina automasi: aliran pada kanvas bertitik yang bermula dengan pencetus, bercabang mengikut syarat ya/tidak dan menjalankan tindakan, dengan + pada setiap garis penyambung untuk menambah langkah daripada menu, langkah yang boleh dinamakan semula atau dipadam, seret dan zum, serta butang “Larian ujian” yang menyerlahkan setiap langkah semasa ia berjalan.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

26

Papan kanban

Lajur kad untuk dialihkan antara peringkat — dengan tetikus, jari atau papan kekunci — dengan had dan tambah pantas.

Memuatkan demo…

Tambahkan papan kanban dengan satu lajur bagi setiap peringkat, kad yang boleh diseret antara lajur dengan tetikus atau jari atau dialihkan dengan papan kekunci (Space untuk angkat, anak panah untuk alih, Space untuk letak), kiraan dan had pada setiap lajur, dan butang pantas “Tambah kad” di bawah setiap lajur.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

27

Kursor langsung dan kehadiran

Siapa yang ada dan apa yang mereka buat: avatar dengan status, kursor bernama yang meluncur lancar, pilihan dan kursor taip orang lain, serta mod ikut.

Memuatkan demo…

Tunjukkan siapa lagi yang berada dalam dokumen ini sekarang: susunan avatar dengan titik aktif atau melahu, kursor setiap orang dengan nama dalam warna mereka sendiri, apa yang sedang mereka pilih atau taip, makluman apabila seseorang menyertai atau keluar, dan cara mengikut seseorang dengan mengklik avatarnya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

28

Garis masa versi

Setiap versi yang disimpan pada garis masa: lihat perubahan sebagai diff atau peluncur sebelum/selepas, pulihkan mana-mana versi selepas pengesahan yang jelas, dan buat asal.

Memuatkan demo…

Tambahkan sejarah versi: garis masa versi yang disimpan, dikumpulkan mengikut hari, menunjukkan siapa yang membuat setiap satu dan menandakan versi semasa. Memilih versi menunjukkan apa yang berubah (atau perbandingan halaman sebelum/selepas), dan “Pulihkan” meminta pengesahan, mengekalkan versi semasa dalam sejarah dan boleh dibuat asal.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

30

Senarai semak permulaan

Panduan persediaan dengan gelang kemajuan: langkah seterusnya dibuka bersama butang tindakannya, langkah boleh dilangkau, dan panduan boleh disembunyikan lalu dibawa kembali.

Memuatkan demo…

Tambahkan senarai semak persediaan untuk pengguna baharu: gelang kemajuan dengan “2 daripada 5 selesai”, langkah mengikut urutan dengan masa yang diambil setiap satu, langkah seterusnya terbuka dengan butang untuk melakukannya dan “Langkau dahulu”, ucapan tahniah apabila semuanya selesai, dan cara untuk menyembunyikan panduan dan membawanya kembali. Sediakan juga versi pelancar kecil di sudut skrin.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

31

Borang tetapan

Tetapan berkumpulan yang tahu apa yang berubah: medan yang diubah ditanda, bar simpan dengan bilangannya, Buang, pengesahan dan ⌘S.

Memuatkan demo…

Tambahkan halaman tetapan berbahagian (maklumat kedai, penghantaran, pemberitahuan) yang menanda setiap medan yang saya ubah, memaparkan bar dengan bilangan perubahan yang belum disimpan serta butang Simpan / Buang, menyemak medan sebelum menyimpan dan terus ke masalah pertama, mengesahkan apabila disimpan, dan juga menyimpan dengan Ctrl+S atau ⌘S.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

32

Langkah / wizard

Borang panjang dalam langkah pendek: di mana anda berada, apa yang sudah selesai, semakan sebelum meneruskan, ulasan akhir dengan pautan sunting, dan pengesahan.

Memuatkan demo…

Jadikan borang permohonan sebagai wizard langkah demi langkah: bar langkah yang menunjukkan di mana saya dan langkah mana yang sudah selesai, setiap langkah disemak sebelum meneruskan dengan mesej yang jelas, Kembali tanpa kehilangan apa-apa, halaman ulasan akhir dengan pautan Sunting bagi setiap langkah, dan pengesahan selepas dihantar.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

33

Pemetaan import data

Padankan lajur hamparan dengan medan anda: cadangan dengan tahap keyakinan, contoh nilai, medan wajib dan pertindihan, kemudian import.

Memuatkan demo…

Selepas seseorang memuat naik hamparan, paparkan langkah untuk memadankan lajurnya dengan medan saya: setiap lajur dengan beberapa contoh nilai, medan yang dicadangkan dan tahap keyakinan padanannya, cara mudah untuk menukarnya atau melangkau lajur itu, amaran apabila medan wajib tiada atau dua lajur menghala ke medan yang sama, dan butang Import yang menunjukkan kemajuan dan ringkasan.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

34

Lepas fail dan lampiran

Seret, semak imbas atau tampal fail: pratonton, kemajuan setiap fail, sebab penolakan yang jelas, Cuba lagi, dan mesej yang menunggu muat naik.

Memuatkan demo…

Tambahkan muat naik fail: kawasan untuk menyeret fail, klik untuk menyemak imbas atau menampal imej, pratonton dan bar kemajuan bagi setiap fail, mesej yang jelas apabila fail terlalu besar atau jenisnya salah, butang Cuba lagi apabila muat naik gagal, dan lampiran dalam kotak mesej yang mesti selesai dimuat naik sebelum mesej boleh dihantar.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

35

Dialog kebenaran

Tanya sebelum bertindak: apa yang mahu dilakukan oleh aplikasi atau ejen AI, penerangan setiap kebenaran, kebenaran pilihan yang boleh dimatikan, dan pilihan untuk mengingati keputusan.

Memuatkan demo…

Tambahkan dialog kebenaran yang muncul sebelum aplikasi lain bersambung atau pembantu melakukan sesuatu bagi pihak saya: ia menyenaraikan dengan perkataan mudah apa sebenarnya yang diminta, membolehkan bahagian pilihan dimatikan, menunjukkan pratonton tindakan itu (seperti e-mel dan penerimanya), menawarkan “Benarkan sekali” atau “Sentiasa benarkan”, dan mempunyai pilihan “Ingat keputusan ini”.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

36

Pemilih slot tempahan

Pilih hari dan masa: jalur tarikh atau kalendar bulanan, slot pagi dan petang, masa yang sudah penuh, dan pengesahan.

Memuatkan demo…

Tambahkan pemilih tempahan: jalur dua minggu akan datang (atau kalendar bulanan) untuk memilih hari, masa kosong dikumpulkan kepada pagi dan petang dengan yang penuh berwarna kelabu, pilihan tempoh sesi, zon waktu, dan ringkasan dengan butang “Sahkan” yang bertukar menjadi pengesahan dengan “Tambah ke kalendar”.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

37

Jadual harga

Pelan bersebelahan dengan suis bulanan / tahunan, pelan popular ditonjolkan, pilihan yang dibawa ke pembayaran, dan perbandingan penuh.

Memuatkan demo…

Tambahkan bahagian harga: tiga pelan bersebelahan dengan suis Bulanan / Tahunan yang menunjukkan penjimatan bayaran tahunan, pelan paling popular ditonjolkan, butang Pilih pada setiap pelan yang membawa pelan dan harganya ke bar pembayaran, dan jadual yang membandingkan kandungan setiap pelan.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

38

Timbunan pemberitahuan

Pemberitahuan ringkas yang bertindan, terbuka apabila dihalakan, boleh dileret untuk ditutup, menunjukkan kemajuan kerja yang lambat dan menawarkan Buat asal.

Memuatkan demo…

Tambahkan pemberitahuan toast: ia bertindan di satu sudut dan terbuka apabila dihalakan, tertutup sendiri selepas beberapa saat (dijeda semasa dihalakan), boleh dileret untuk ditutup, dan datang sebagai berjaya, ralat dengan “Cuba semula”, memuatkan yang bertukar menjadi berjaya, serta pemberitahuan dengan “Buat asal”.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

39

Peti pemberitahuan

Loceng dengan bilangan belum dibaca yang membuka peti masuk: tab Semua, Belum dibaca dan Sebutan, tindakan di tempat, tanda semua sudah dibaca, dan pemberitahuan baharu secara langsung.

Memuatkan demo…

Tambahkan loceng pemberitahuan pada bar atas dengan bilangan belum dibaca berwarna merah. Loceng membuka peti masuk dengan tab Semua, Belum dibaca dan Sebutan, pemberitahuan dikumpulkan mengikut Hari ini, Semalam dan Sebelumnya, butang untuk bertindak pada setiap satu di situ juga (luluskan, balas), titik untuk menanda sudah atau belum dibaca, “Tanda semua sudah dibaca”, dan pemberitahuan baharu meluncur masuk apabila tiba.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

40

Keadaan kosong

Apa yang dipaparkan skrin apabila tiada apa-apa: lawatan pertama, carian tanpa hasil, gagal dimuatkan dan luar talian, setiap satu dengan langkah seterusnya.

Memuatkan demo…

Reka keadaan kosong untuk senarai saya: skrin lawatan pertama yang mesra dengan butang untuk menambah item pertama atau mencuba data contoh, mesej “tiada hasil” yang menyebut carian itu dan menawarkan untuk mengosongkan penapis, skrin ralat dengan Cuba lagi dan butiran, dan sepanduk luar talian yang terus memaparkan data terakhir yang disimpan dan mencuba lagi dengan sendirinya.

Tampal dalam MonstarX, atau mulakan projek baharu dengannya.

Membuka projek baharu dengan prom ini. Baharu dengan MonstarX? Daftar secara percuma, prom ini akan menunggu anda.

Guna dengan ejen pengekodan anda.

Sambungkan MonstarX UI kepada Claude Code, Cursor, Codex atau mana-mana klien MCP, dan ejen anda boleh mencari dalam kesemua 40 komponen, membaca spesifikasi dan kodnya, lalu membinanya ke dalam aplikasi anda pada stack anda sendiri. Percuma, baca sahaja, tanpa log masuk.

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

Jalankan dalam terminal:

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

Atau, untuk menggunakannya dalam setiap projek:

claude mcp add --transport http --scope user monstarx-ui https://monstarx.com/ui/mcp
  • “Guna monstarx-ui untuk mencari komponen yang menunjukkan apa yang sedang dilakukan ejen, dan bina ke dalam skrin sembang kita.”
  • “Tambah kad kelulusan daripada monstarx-ui sebelum ejen menghantar e-mel, mengikut sistem reka bentuk kita.”
  • “Ambil jadual harga daripada monstarx-ui dan sambungkan kepada pelan Stripe kita.”

Apa yang ejen anda dapat

  • search_componentsmencari komponen mengikut keperluan: “approval”, “agent progress”, “pricing”.
  • list_componentskesemua 40 komponen, mengikut kumpulan.
  • get_componentkod sumber, kebergantungan, varian, arahan pemasangan dan spesifikasi penuh.
  • get_promptspesifikasi untuk ejen pengekodan, atau prompt MonstarX dalam 16 bahasa.
  • get_guidelinesperaturan reka bentuk, supaya komponen disesuaikan dengan stack dan jenama anda, bukan sekadar ditampal.

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

Atau pasang dengan CLI shadcn

Setiap komponen ialah item registri shadcn. Dalam projek yang menggunakan shadcn/ui, satu arahan menulis fail dan memasang lucide-react:

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

Komponen baharu terus ke peti masuk anda.

Skrin ejen, suara, carta, blok aplikasi: setiap kelompok baharu bersama prom dan kodnya, pada hari ia dilancarkan.

Hanya komponen baharu, tiada spam. Privasi

Mahukan aplikasi penuh, bukan sekadar bahagiannya?

Huraikan dalam satu ayat. MonstarX merancangnya, membinanya dengan komponen seperti ini, mengujinya dalam pelayar sebenar dan menerbitkannya pada domain anda.

Sambungkan ejen pengekodan anda