Spec Driven Development
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Install & correctly use appCN React Native / Expo components, streamed from the live registry.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
APPCN_REGISTRY_URLต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"appcn": {
"command": "npx",
"args": [
"-y",
"@app-cn/mcp"
],
"env": {
"APPCN_REGISTRY_URL": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add appcn --env APPCN_REGISTRY_URL='ใส่ค่าของคุณ' -- npx -y @app-cn/mcpเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"appcn": {
"command": "npx",
"args": [
"-y",
"@app-cn/mcp"
],
"env": {
"APPCN_REGISTRY_URL": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"appcn": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@app-cn/mcp"
],
"env": {
"APPCN_REGISTRY_URL": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
APPCN_REGISTRY_URL envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569
ผู้ลงทะเบียน (shineup.digital) ไม่ใช่เจ้าของ repo (Salah-XD) อาจเป็นคนอื่นที่นำมาลงต่อ
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 0 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.2) เข้า registry 5 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Spec Driven Development, Remote Desktop Commander, Reelsaw
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.
Drive a self-hosted Reelsaw: turn long videos into vertical clips, edit, re-render and export them.
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Copy-paste mobile components for React Native + Expo.
A shadcn-philosophy library: you own the source, NativeWind styles the surface, Reanimated drives the motion — and the featured AI-native collection ships streaming bubbles, prompt composers, reasoning traces, and a reactive 3D voice orb.
[Browse components](https://appcn.vercel.app/components) · [CLI docs](https://appcn.vercel.app/docs/cli) · [Mobile app](https://appcn.vercel.app/docs/mobile-app) · [Live showcase](https://appcn-showcase.vercel.app) · [GitHub](https://github.com/Salah-XD/appCN)
The CLI handles NativeWind + Reanimated wiring and registers the @app-cn shadcn namespace for you. One command to set up, one to add a component.
# 1. (Recommended) One-shot project setup
npx @app-cn/cli@latest init
npx @app-cn/cli@latest add voice-sphere
Prefer your own pipeline? appcn add is a thin wrapper around shadcn — you can skip the CLI entirely:
# Copy a single component via shadcn (no setup, one-off)
npx shadcn@latest add https://appcn.vercel.app/r/voice-sphere.json
npm install @app-cn/ui
Building with an AI agent? Add the appCN MCP server so Claude Code, Cursor, or Windsurf can discover and install components for you — and write new code in appCN's motion/haptic style:
# Claude Code
claude mcp add appcn -- npx -y @app-cn/mcp
See [MCP docs](https://appcn.vercel.app/docs/mcp) for Cursor / Windsurf / VS Code config.
Status: v0.1.0 live on npm. Five components shipped — the AI collection
is the marketed wedge and is the first place to land new work.
New: appCN is live on real phones — scan a QR with [Expo Go](https://appcn.vercel.app/docs/mobile-app)
and the entire component gallery loads on Android or iPhone in seconds.
No emulator, no developer account. Standalone Play Store APK is in review —
shipping soon.
| Component | Delight |
|---|---|
Button | Spring-y press scale to 0.96, settles in 140 ms — feels weighted, never twitchy |
| Component | Delight |
|---|---|
StreamBubble | Three-phase thinking → token stream → settle |
PromptInput | Send morphs into a stop with a spinning ring |
ReasoningTrace | Auto-collapses the instant the answer lands |
VoiceSphere | Reactive 3D orb that breathes with voice level |
Every component has an interactive web preview, a QR you can scan with Expo Go to run it live on your phone, and a video — same code path on every surface. → [appcn.vercel.app/components](https://appcn.vercel.app/components)
appcn CLI, the shadcn registry, @app-cn/ui from npm — or the MCP server, so your AI coding agent installs components for you. Same primitives, your call.duration / easing / spring), one delight detail per component.| Surface | What's there |
|---|---|
| [appcn.vercel.app](https://appcn.vercel.app) | Live docs site — landing, every component, live previews |
| [CLI docs](https://appcn.vercel.app/docs/cli) | init, add, env vars, the idempotency contract |
| [Mobile app](https://appcn.vercel.app/docs/mobile-app) | Play Store + Expo Go install paths, deep-link contract |
| [`CLAUDE.md`](./CLAUDE.md) | Architecture, monorepo map, commands, Metro/Reanimated gotchas |
| [`DESIGN.md`](./DESIGN.md) | Taste layer — motion rules, the "one delight detail" rule, the 8-step SOP |
| [`CONTRIBUTING.md`](./CONTRIBUTING.md) | Dev setup, the Changesets release flow, PR conventions |
| [`AGENTS.md`](./AGENTS.md) | Cross-tool guide for AI coding agents (Claude / Cursor / Windsurf / Codex / Aider) |
Every new component ships through the 8-step SOP in DESIGN.md → Component checklist. Don't skip steps — the PR template enforces them and a missing changeset blocks the release pipeline.
Working with an AI agent? Invoke the `/new-component` Claude skill — it walks the checklist, drops a typed .meta.ts template ready to fill, wires the registry + showcase entries, and verifies with typecheck + registry build.
Full guide: CONTRIBUTING.md.
Releases are driven by Changesets and published to npm via OIDC Trusted Publishing — zero long-lived secrets.
pnpm changeset # describe what changed + pick a bump
git commit -am "..." # commit the changeset alongside your code
Every published version gets a verified provenance badge on npm.
The site is two Vercel projects from one monorepo — click for setup.
| Project | Vercel root directory | What it serves |
|---|---|---|
| Docs | apps/web | Landing, /components/*, /docs/*, the shadcn registry at /r/*.json |
| Showcase | apps/showcase | Expo web export — the iframe target for interactive previews |
Deploy order (matters):
apps/showcase) so you have a URL.NEXT_PUBLIC_SHOWCASE_WEB_URL to that URL.appcn.vercel.app → docs, appcn-showcase.vercel.app → showcase).Required env vars (docs project):
| Variable | Value |
|---|---|
NEXT_PUBLIC_SHOWCASE_WEB_URL | https:// .vercel.app |
NEXT_PUBLIC_EXPO_URL | *(empty for v1 — needs EAS Update for the QR tab)* |
NEXT_PUBLIC_REGISTRY_URL | https:// /r |
The showcase project needs no env vars. Defaults live in apps/web/.env.example.
Inspired by shadcn/ui's copy-paste philosophy and react-native-reusables's docs-site polish. Built on top of NativeWind, Reanimated, and Expo.
MIT — you own the code.
Made with care by Salah-XD .
Powered by Shineup ↗