c2n Web Components

Name: c2n Web Components
Author: code2nguyen

โดย code2nguyenรุ่น 1.0.21i★ –iรันบนเครื่อง

ชื่อใน registryio.github.code2nguyen/c2n

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Exact APIs, examples, theme tokens and markup validation for the c2n (c2-*) Lit web components.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 1 จาก 1 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiยังไม่ได้วัด★ –

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
หมวด: อื่น ๆ

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ผลตรวจเบื้องต้น: ผ่าน 1 จาก 1 ข้อ
รันในเครื่องคุณด้วยสิทธิ์ของผู้ใช้คุณ (ไฟล์ อินเทอร์เน็ต แอปต่าง ๆ)
ค่าที่คุณต้องใส่เอง: C2N_PROJECT_ROOT

ต้องเตรียมก่อน

npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "c2n": {
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ],
      "env": {
        "C2N_PROJECT_ROOT": "ใส่ค่าของคุณ"
      }
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add c2n --env C2N_PROJECT_ROOT='ใส่ค่าของคุณ' -- npx -y @c2n/mcp

เติมค่าที่เว้นว่างไว้ก่อนรัน

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "c2n": {
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ],
      "env": {
        "C2N_PROJECT_ROOT": "ใส่ค่าของคุณ"
      }
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "c2n": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@c2n/mcp"
      ],
      "env": {
        "C2N_PROJECT_ROOT": "ใส่ค่าของคุณ"
      }
    }
  }
}

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าที่ต้องใส่เอง

C2N_PROJECT_ROOT env
Project whose installed @c2n/* packages the server reports. Defaults to the working directory.

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub code2nguyen ซึ่งเป็นเจ้าของ repo
… ยังไม่ตรวจ
ยังมีคนดูแล
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด อื่น ๆi

ดาวมากกว่า 0% ของอีก 32380 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 95% ของอีก 32380 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 32380 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

c2n Web Components ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.0.21) เข้า registry เมื่อวาน

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Spec Driven Development, Remote Desktop Commander, Dechonet MCP

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Spec Driven Development

โดย formulahendry

MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.

รันบนเครื่อง★ 440MITอัปเดต 14 เดือนที่ผ่านมา

ติดตั้ง

Remote Desktop Commander

โดย desktop-commander

Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.

รันบนคลาวด์★ 211อัปเดต เมื่อวาน

ติดตั้ง

Dechonet MCP

โดย node-man

30 security tools for AI agents: phishing links, exposure maps, DNS, SSL, PQC, history, pivots.

บนเครื่องหรือคลาวด์อัปเดต วันนี้

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

@c2n/mcp

Model Context Protocol server that exposes the c2n web components to AI agents: component APIs (attributes, slots, events, native CSS parts, CSS variables with their theme tokens), usage and gallery examples, curated presets, the @c2n/theme tokens, variant code generation and the application workflow guides. Everything is bundled in data/registry.json, so it works offline in any project.

Use

The server uses stdio and can be launched by any MCP host:

npx -y @c2n/mcp

Claude Code project .mcp.json:

{ "mcpServers": { "c2n": { "type": "stdio", "command": "npx", "args": ["-y", "@c2n/mcp"] } } }

Codex project .codex/config.toml:

[mcp_servers.c2n]

command = "npx" args = ["-y", "@c2n/mcp"]

Google Antigravity project .agents/mcp_config.json uses the same mcpServers command/args structure as the Claude example. The @c2n/skill package can install the skill and merge these configurations automatically.

Run the server from a project directory: it reports which @c2n/* packages are installed and serves the bundled API when the installed version differs. The registry is packaged locally, so tool calls do not require network access after installation.

Use c2n-mcp --version to inspect the installed server version and c2n-mcp --help for CLI usage.

The MCP server supplies structured component facts; it does not install component packages or edit an application by itself. Pair it with @c2n/skill when you also want the agent to follow c2n's application, theming and variant conventions. See the AI tools guide for the complete setup and example prompts.

Verify the connection

Restart the agent after adding its MCP configuration, then ask it to use the c2n MCP server to list components or inspect c2-button. A connected client should expose the tools below and report @c2n/* packages installed in the current project. If the server cannot start, run npx -y @c2n/mcp --version in that project to distinguish an npm/runtime problem from an MCP client configuration problem.

Tools

Tool	Purpose
`list_components`	Every component with tag, package, category, description, installed version
`search_components`	Free-text search across names, descriptions, attributes, slots, events, examples, icons
`get_component`	Full API of one component, CSS variables grouped by part/state with their theme token
`get_examples`	Usage rows and gallery cards; `view: "index"` lists every look (summary, screenshot)
`search_examples`	Find a look across every component's gallery ("glass", "pill", "underline")
`get_presets`	Curated presets as CSS variable values
`get_theme`	The `--c2-theme--*` tokens, install/mapping snippets; per-component mapping with `tag`
`generate_variant`	CSS class / HTML + style / Lit subclass / JSON from overrides, a preset or a gallery card
`validate_markup`	Checks markup/CSS you wrote: native controls to replace, unknown tags/attributes/slots/events/variables
`get_workflow_guide`	`workflow`, `theming`, `variant-components`, `frameworks`

Gallery cards are served with a generated summary of what they change and CSS whose colours follow the --c2-theme--* tokens wherever a literal equals a token's value (var(--c2-theme--color-outline, #d4d4d8)), so a copied card follows the application's theme and dark mode. Each card also links light and dark PNG captures hosted with the docs site (gallery-shots/ / . .png, written by apps/ui/scripts/gallery-shots.mjs in the Pages deploy).

Validate from the command line

validate_markup is also a CLI, for CI and editor hooks. It reads HTML, JSX/TSX, Vue, Svelte, Astro, Angular and Lit templates and CSS, and checks them against the API of the @c2n/* packages the project has installed:

npx -y @c2n/mcp validate src            # exit 1 on errors

npx -y @c2n/mcp validate src --strict # warnings fail too (native controls, box styling on a c2 host) npx -y @c2n/mcp validate --hook # Claude Code PostToolUse hook: reads the payload on stdin

It reports native / / / / / / elements that a c2-* element replaces, unknown c2-* tags, attributes, slots and --c2-* variables (with "did you mean"), events a c2-* element does not fire (with its event list), a static camelCase attribute the element ignores (rowKey for row-key), and box styling on a c2-* host (border, padding, background, box-shadow, outline; a radius alone is fine). A line holding c2n-ignore, or the line after a comment holding it, is skipped. In hook mode the findings go to stderr with exit code 2, which Claude Code hands back to the agent; npx -y @c2n/skill install registers that hook in .claude/settings.json.

Resources: c2n://components, c2n://components/{tag}, c2n://theme, c2n://guide/{topic}.

Development

data/registry.json is an ignored build artifact. npm run build:tools (repo root) regenerates it from the component manifests, docs content, presets and theme, then compiles dist/ and refreshes the committed skill fallback.
dev, inspect, smoke and npm pack automatically build the registry when needed.
npm run smoke -w packages/tools/mcp spawns the server over stdio and checks every tool.
npm run inspect -w packages/tools/mcp opens the MCP Inspector against the source entry (node src/cli.ts, Node 24 type stripping).

c2n Web Components

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

ค่าที่ต้องใส่เอง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

เทียบกับตัวอื่นในหมวด อื่น ๆi

คำถามที่พบบ่อย

ตัวที่ใช้แทนได้

Spec Driven Development

Remote Desktop Commander

Dechonet MCP

README จากผู้ทำ

@c2n/mcp

Use

Verify the connection

Tools

Validate from the command line

Development