Mensimulasikan berbagai tampilan perangkat dan mengambil screenshot PNG transparan dari website menggunakan Playwright atau browser extension.
Juga dikenal sebagai itelo/view-sim, view-sim-mcp
- Stars
- 0
- Tools
- —
- Unduhan, 30 hari
- —
- Versi terbaru
- 1.0.0
- Commit terakhir
- 31 Okt 2026
- Lisensi
- MIT
Apa itu view-sim MCP?
view-sim adalah MCP server. Mensimulasikan berbagai tampilan perangkat dan mengambil screenshot PNG transparan dari website menggunakan Playwright atau browser extension.
Ringkasan dibuat dari README proyek
Tentang view-sim MCP server
Server ini memungkinkan developer dan designer untuk memvisualisasikan bagaimana tampilan website pada berbagai perangkat keras. Server ini memungkinkan AI client untuk membuka situs pada berbagai perangkat simulasi termasuk ponsel, tablet, MacBook, dan layar besar. Pengguna dapat menavigasi halaman web dan mengambil screenshot PNG transparan untuk memverifikasi layout di berbagai ukuran layar.
Setup melibatkan menjalankan server via npx dan menginstall browser chromium serta webkit dari Playwright untuk operasi headless. Anda dapat memilih untuk menjalankan server secara headless atau menghubungkannya ke browser extension view-sim. Untuk keamanan yang lebih baik, Anda dapat membatasi koneksi ke ID extension tertentu dengan mengonfigurasi environment variable VIEW_SIM_EXTENSION_IDS. Fleksibilitas ini memungkinkan penggunaan untuk automated testing maupun interaksi manual berbasis browser.
Apa yang bisa Anda lakukan dengannya
- 1Verifikasi mobile responsivenessMinta AI untuk memeriksa bagaimana website tertentu merender tampilannya pada layar ponsel atau tablet.
- 2Automated headless testingJalankan tugas navigasi browser dan pengambilan screenshot tanpa jendela browser yang terlihat menggunakan Playwright.
Ditulis berdasarkan README proyek. Setiap use case diperiksa terhadap kutipan dari README tersebut.
Cara menginstal view-sim MCP
Format diverifikasi 10 Nov 2026Instal view-sim MCP di Claude Code
$ claude mcp add view-sim -- npx -y view-sim-mcpInstal view-sim MCP di Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Instal view-sim MCP di VS Code
.vscode/mcp.json
{
"servers": {
"view-sim": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Instal view-sim MCP di Claude Desktop
claude_desktop_config.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Instal view-sim MCP di Codex
~/.codex/config.toml
[mcp_servers.view-sim] command = "npx" args = ["-y", "view-sim-mcp"]
Instal view-sim MCP di Gemini CLI
~/.gemini/settings.json
{
"mcpServers": {
"view-sim": {
"command": "npx",
"args": [
"-y",
"view-sim-mcp"
]
}
}
}Konfigurasi
VIEW_SIM_EXTENSION_IDSComma-separated extension ids allowed to connect to the bridge (Chrome id and/or view-sim@itelo). Unset allows any extension.
| Nama | Deskripsi | Tipe |
|---|---|---|
| VIEW_SIM_EXTENSION_IDS | Comma-separated extension ids allowed to connect to the bridge (Chrome id and/or view-sim@itelo). Unset allows any extension. |
Pengecekan otomatis
Berjalan 14 Nov 2026Laporan lengkap →Lolos checks otomatis kami. Ini bukan audit keamanan: baca kodenya dan berikan server akses paling terbatas yang dibutuhkannya. Cara kerja checks
- Source repository terhubung dan dapat dijangkauitelo/view-sim is public and reachablegithub.com/itelo/view-sim ↗Lolos
- Paket menyebut repo ini sebagai sumbernyaview-sim-mcp names itelo/view-sim as sourcenpmjs.com/package/view-sim-mcp ↗Lolos
- Provenance build (atestasi Sigstore)No build attestation published for this releaseTidak diperiksa
- Lisensi open source (OSI)MITspdx.org/licenses/MIT.html ↗Lolos
- Ada commit atau release dalam satu tahun terakhirLast commit or release 2026-10-31github.com/itelo/view-sim ↗Lolos
- OpenSSF ScorecardTidak diperiksa
- Nama package tidak mirip dengan package populerNo popular package one edit away from view-sim-mcpLolos
- Tidak ada advisory kritis di paket maupun dependensinya102 resolved dependencies checked; no critical advisoryosv.dev ↗Lolos
- Tidak ada instruksi tersembunyi untuk model0 tool descriptions and the README read; no override phrases, credential paths or hidden charactersLolos
- Tools yang bersifat destruktif telah diberi labelTidak diperiksa
- Endpoint remote menjawab handshake MCPTidak diperiksa
README
Lihat di GitHubview-sim-mcp
MCP server for view-sim: open sites on phones, tablets, MacBooks and big displays, navigate and take transparent PNG screenshots, either through the view-sim browser extension or headlessly with Playwright.
claude mcp add view-sim -- npx -y view-sim-mcp
Headless screenshots need Playwright's browsers once:
npx -y playwright@1.64.1 install chromium webkit
To let only view-sim's extension connect to the bridge, set VIEW_SIM_EXTENSION_IDS to its extension id (comma-separated for several browsers):
claude mcp add view-sim -e VIEW_SIM_EXTENSION_IDS=<chrome-extension-id>,view-sim@itelo -- npx -y view-sim-mcp
See the main README for the tools and how the bridge works.
MIT licensed. If view-sim saves you time, you can support it on GitHub Sponsors.
Pertanyaan tentang view-sim MCP
Bagaimana cara menambahkan view-sim MCP ke Claude Code?
Jalankan claude mcp add view-sim -- npx -y view-sim-mcp di terminal Anda. Tambahkan --scope user agar tersedia di semua proyek.
Bagaimana cara menambahkan view-sim MCP ke Cursor?
Buka ~/.cursor/mcp.json dan tambahkan server di bawah mcpServers, menggunakan config Cursor yang ditunjukkan di bagian instalasi di atas.
Bisakah saya membatasi akses hanya untuk extension view-sim?
Ya, Anda dapat mengatur environment variable VIEW_SIM_EXTENSION_IDS ke ID extension tersebut untuk mengizinkan hanya extension itu saja yang dapat terhubung ke bridge.