ต้นแบบ · รุ่นทดลอง: มีทุก server ในทะเบียนทางการ อัปเดตทุก 30 นาที เข้าสู่ระบบด้วย Google เพื่อเขียนรีวิวได้แล้วต้นแบบ · อัปเดตทุก 30 นาที
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · วิธีติดตั้งภาษาไทยทุกตัว
☰ เมนูไทย ตั้งค่า
โหมดมือใหม่ เปิด
สีหน้าจอตามเครื่องสว่างขาวมืด
ภาษาไทยEnglish中文日本語한국어EspañolDeutsch

affectUI

โดย flohoellerรุ่น 1.0.0i★ 806iรันบนคลาวด์
ชื่อใน registryio.github.flohoeller/affectui

วิธีติดตั้ง

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

affectUI เป็นเครื่องมือสำหรับค้นหา อ่าน และติดตั้งคอมโพเนนต์ หน้าจอ และบล็อก React ที่พร้อมให้ AI นำไปใช้งานในผลิตภัณฑ์ AI

แปลอัตโนมัติจากคำอธิบายของผู้ทำ · ทีมยังไม่ได้ตรวจ

  • ต่อแบบ คลาวด์ (ต่อผ่านอินเทอร์เน็ต)
  • บัญชีหรือคีย์ ใช้ได้โดยไม่ใส่คีย์ · ใส่ Authorization ได้ถ้ามี (มักเพิ่มโควตา)
  • หมวด ค้นข้อมูลและความจำของ AI
คำอธิบายต้นฉบับจากผู้ทำ (อังกฤษ)
Search, read and install agent-ready React components, screens and blocks for AI products.

ติดตั้ง

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

ผลตรวจผ่าน 5/5 · สิ่งที่คุณถามผ่านเซิร์ฟเวอร์ของผู้ทำ (www.affectui.com) · ✓ ตรวจคำสั่งแล้ว 13 พ.ย. 2569

ขั้นแรก: คุณใช้ AI ตัวไหน

เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง

ต่อกับ Claude ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม · ตั้งครั้งเดียวที่ claude.ai หรือแอปบนคอม แล้วใช้ในแชตได้ · บัญชีฟรีเพิ่มได้ 1 ตัว · แผน Team/Enterprise ให้เจ้าของ (Owner) เป็นคนเพิ่ม

  1. เปิดหน้า Connectors ของ Claude

    CustomizeConnectors

    CustomizeConnectors1Add2https://…3Add4

  2. กด “Add” → “Custom” → “Web” แล้วกรอก 2 ช่องนี้

    คัดลอกจากที่นี่ไปวางในช่องชื่อเดียวกันบนหน้าจอของ Claude แล้วกด Continue

    Name · ชื่อaffectUI
    Remote MCP server URL · ที่อยู่https://www.affectui.com/api/mcp

    กด Continue ผ่านหน้าตรวจการล็อกอินที่ Claude ตรวจเจอ · หัวข้อ Authentication เลือกตามที่ผู้ทำบอก (Sign in now, Sign in when needed หรือ No sign in) แล้วกด Add

  3. เปิดใช้ในแชต

    +ConnectorsaffectUI

  4. ลองเลย

    ใช้ affectUI บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Claude บอกว่ากำลังใช้ affectUI หรือมีชื่อเครื่องมือของ affectUI ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ ChatGPT ได้ ขึ้นกับแผน

MCP แบบเต็ม: ChatGPT Business, Enterprise หรือ Edu บนเว็บ · Pro: ต่อได้ด้วยสิทธิ์อ่านและดึงข้อมูล เครื่องมือที่แก้ข้อมูลอาจใช้ไม่ได้ · Plus: เอกสารยังไม่ยืนยัน ถ้าเห็นเมนูเพิ่ม MCP แบบกำหนดเองในหน้าปลั๊กอิน ลองตามขั้นตอนได้ · ใช้บนเว็บเท่านั้น

  1. เปิดหน้าเพิ่ม MCP ของ ChatGPT บนเว็บ

    Plugins+Add custom MCP server

    ChatGPTPlugins1+2https://…3Create4

  2. กรอกชื่อและที่อยู่

    ใส่ชื่อ แล้ววางที่อยู่ใต้ Connection ติ๊กยอมรับคำเตือน แล้วกด Create as a plugin

    Name · ชื่อaffectUI
    Connection · ที่อยู่https://www.affectui.com/api/mcp

  3. เลือก affectUI ในแชต

    เปิดแชตใหม่แล้วเลือก affectUI จากรายการปลั๊กอินก่อนพิมพ์

  4. ลองเลย

    ใช้ affectUI บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า ChatGPT บอกว่ากำลังใช้ affectUI หรือมีชื่อเครื่องมือของ affectUI ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ OpenAI เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ Claude Code ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม

  1. เปิด Terminal

    Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell

  2. วางคำสั่งนี้แล้วกด Enter

    claude mcp add --transport http --scope user affectui https://www.affectui.com/api/mcp

  3. พิมพ์ /mcp ใน Claude Code

    ต้องเห็น affectUI ในรายการและขึ้นว่าเชื่อมต่อแล้ว

  4. ลองเลย

    ใช้ affectUI บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Claude Code บอกว่ากำลังใช้ affectUI หรือมีชื่อเครื่องมือของ affectUI ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ Cursor ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม

  1. กดปุ่มนี้เพื่อเปิด Cursor

    เปิดใน Cursor

    Cursor จะถามยืนยันการติดตั้ง ให้กด Install

  2. เปิดแชตของ AI ใน Cursor โหมด Agent

  3. ลองเลย

    ใช้ affectUI บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Cursor บอกว่ากำลังใช้ affectUI หรือมีชื่อเครื่องมือของ affectUI ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ VS Code ได้ · ประมาณ 2 นาที

ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม

  1. กดปุ่มนี้เพื่อเปิด VS Code

    เปิดใน VS Code

    VS Code จะถามยืนยันการติดตั้ง ให้กด Install

  2. เปิดแชตของ AI ใน VS Code โหมด Agent

  3. ลองเลย

    ใช้ affectUI บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า VS Code บอกว่ากำลังใช้ affectUI หรือมีชื่อเครื่องมือของ affectUI ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม

ดูโปรแกรมที่ใช้ MCP ทั้งหมด →

ที่อยู่สำหรับโปรแกรมที่ต่อผ่านเว็บ

ที่อยู่https://www.affectui.com/api/mcp

ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง

ติดตรงไหน? ถามคนที่ใช้ affectUI อยู่💬 พูดคุย →
สำหรับคนเขียนโค้ด: คำสั่ง Terminal และค่าตั้ง JSON

ต่อผ่านเว็บ

Claude Code

claude mcp add --transport http --scope user affectui https://www.affectui.com/api/mcp

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "affectui": {
      "url": "https://www.affectui.com/api/mcp"
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "affectui": {
      "type": "http",
      "url": "https://www.affectui.com/api/mcp"
    }
  }
}

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

  • Authorization ความลับ HTTP header
    ไม่บังคับ "Bearer aui_…" พร้อมคีย์การเข้าถึง affectUI Pro ของคุณ (บัญชี → ดาวน์โหลด) เพื่อรับซอร์สของรายการ Pro รายการฟรีและเอกสารทั้งหมดใช้งานได้โดยไม่ต้องใช้คีย์นี้
    ดูต้นฉบับภาษาอังกฤษOptional. "Bearer aui_…" with your affectUI Pro access key (Account → Downloads) to get the source of Pro items. Free items and all docs work without it.

คำอธิบายแปลอัตโนมัติ ชื่อตัวแปรคงตามต้นฉบับ ถ้าไม่แน่ใจให้ดูต้นฉบับ

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

สรุป

ดาวน์โหลดต่อสัปดาห์i
ไม่มียอดใน npm/PyPI
การเชื่อมต่อ
รันบนคลาวด์
รุ่นล่าสุดi
1.0.0
ส่งเข้า registryi
9 ต.ค. 2569
แก้โค้ดล่าสุดi
14 พ.ย. 2569
ผู้ทำ
flohoeller
เว็บผู้ทำ
www.affectui.com
สถานะใน registry
ใช้งานอยู่

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

ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569

ต่อผ่านคลาวด์ได้ใน

ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast

ดูโปรแกรมทั้งหมดพร้อมข้อดีข้อเสีย →

คู่มือที่เกี่ยวข้อง

เรื่องที่ 8เช็ก 5 ข้อก่อนติดตั้ง MCP ไม่ให้ข้อมูลรั่วใช้เวลาราว 2 นาทีต่อตัว ดูจากหน้าของตัวนั้นบนเว็บเรา และหน้าขออนุญาตของโปรแกรม AI ก่อนกดยอมอ่าน 4 นาที

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

ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 14 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน

  • search_components

    Find affectUI components, screens, blocks, illustrations and motion effects for a UI need, e.g. 'chat input with model picker' or 'onboarding checklist'.

  • list_components

    Every affectUI item with slug, section, category, free or Pro, and a one-line description.

  • get_component

    Docs for one item: install command, usage example, props, keyboard, accessibility and notes.

  • get_source

    The full .tsx source of an item, to write to components/ui/ .tsx when the shadcn CLI isn't available. Pro items need the user's access key in the MCP connection.

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

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

  • ✓ ผ่าน

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

    ชื่อใน registry ยืนยันด้วยบัญชี GitHub flohoeller ซึ่งเป็นเจ้าของ repo

  • ✓ ผ่าน

    ยังมีคนดูแล

    มีการแก้โค้ดล่าสุด เมื่อวาน

  • ✓ ผ่าน

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

    ใช้ MIT

  • ✓ ผ่าน

    endpoint ตอบ

    ตอบกลับใน 354 ms (HTTP 200)

  • – ไม่เกี่ยว

    ล็อกอินแบบ OAuth

    ไม่ต้องล็อกอิน

  • ✓ ผ่าน

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

    อ่านคำอธิบายเครื่องมือ 4 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI

เราตรวจอะไรบ้าง → · JSON

ผู้ทำ: ขอให้ตรวจใหม่ หรือแจ้งข้อมูลผิด

เข้าสู่ระบบ

พูดคุย

ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์

ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย

ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx

เข้าสู่ระบบเพื่อโพสต์

รีวิวจากผู้ใช้

ยังไม่มีรีวิว

เข้าสู่ระบบเพื่อเขียนรีวิว

เทียบกับตัวอื่นในหมวด ค้นข้อมูลและความจำของ AIi

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

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

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

affectUI ปลอดภัยไหม?

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

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

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

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

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

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

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

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

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT บนเว็บ (แบบเต็มในแผน Business ขึ้นไป · Pro แบบอ่านอย่างเดียว)

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

ในหมวดเดียวกันมี OpenSEO, Exa, Mockserver, Microsoft Learn MCP, Docs

ตัวอื่นที่ทำงานคล้ายกัน

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

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

OpenSEO

Keyword research, site audits, rank tracking and AI visibility for your AI agent.

โดย every-appใช้กันมาก★ 27.7Kอัปเดต เมื่อวาน

รันบนคลาวด์✓ everyapp.com
วิธีต่อ

Exa

Connect AI agents to Exa for web search, content fetching, and multi-step research.

โดย exa-labsใช้กันมาก★ 5.2Kอัปเดต 2 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · exa.aiทีม PopNx ลองใช้จริงแล้ว
วิธีต่อ

Mockserver

Mock, record/replay, verify and chaos-test any HTTP, REST, gRPC or LLM dependency over MCP.

โดย mock-serverกำลังโต★ 5Kอัปเดต 19 วันที่ผ่านมา

รันบนเครื่อง✓ เจ้าของบริการ · mock-server.com
ติดตั้ง

Microsoft Learn MCP

Official Microsoft Learn MCP Server – real-time, trusted docs & code samples for AI and LLMs.

โดย MicrosoftDocsใช้กันมาก★ 2Kอัปเดต 12 เดือนที่ผ่านมา

รันบนคลาวด์✓ เจ้าของบริการ · microsoft.comทีม PopNx ลองใช้จริงแล้ว
วิธีต่อ

Docs

Search and read Empryo's documentation. Read-only, no auth, no local access.

โดย proxysoulกำลังโต★ 1.6Kอัปเดต 2 เดือนที่ผ่านมา

รันบนคลาวด์✓ empryo.com
วิธีต่อ
  • OpenSEO — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์
  • Exa — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์ · อยู่ในคลังของ Claude
  • Mockserver — ต้องลงในเครื่อง · ไม่ต้องใช้คีย์
  • Microsoft Learn MCP — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์ · อยู่ในคลังของ Claude
  • Docs — ใช้บนคลาวด์ ไม่ต้องลงเครื่อง · ไม่ต้องใช้คีย์

README จากผู้ทำ

เปิดอ่าน README

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

Website · Browse components · Docs · Install · Pro

UI for AI agents. affectUI is a library of React components for what agents do – runs, tool calls, traces, handoffs, approvals and context – and for the rest of your app: inputs, menus, charts, screens, illustrations and motion. Every item is one `.tsx` file with its styles inside: no Tailwind, no CSS setup, no animation library. Install it with the shadcn CLI, or let Claude Code, Cursor or Codex add it through the MCP server, and it is source you own.

Showcase

Agent components, recorded live from affectui.com. Items marked Pro are part of affectUI Pro and are not in this repository; everything else installs from here for free.

Agent Tree Pro

Who started whom

Tool Call Card

An agent's tool call in one line

Trace Waterfall Pro

Where the time and money of an agent run go

Decision Inbox

Open decisions with two quick answers each

Agent Inbox Pro

All your background agent tasks in one calm list

Thinking Loader

A small working pill for AI replies

Context Map Pro

What fills an agent's context window, as a living treemap

Agent Handoff Pro

A task passed from agent to agent like a relay

Contents

  • Why affectUI
  • Choose the UI for your workflow
  • Install
  • Usage
  • Use it with AI tools
  • Components
  • Blocks
  • Illustrations
  • Motion
  • affectUI Pro
  • Contributing
  • License

Why affectUI

  • Made for agents. Components for what agents actually do: trees of sub-agents, tool calls, traces with cost per step, handoffs, approvals and the context window – live states, not static mockups.
  • Agent-ready. An MCP server and llms.txt let Claude Code, Cursor, Codex or v0 find and add items for you.
  • One file each. Every component is a single .tsx file with its styles inside. Nothing to configure, no CSS framework required.
  • Motion that feels finished. Morphs, staggered reveals, rolling numbers and smooth state changes, and all of it respects prefers-reduced-motion.
  • Dark mode built in. Each item switches when an ancestor has the class dark or data-theme="dark".
  • Accessible by default. Real buttons, labels, keyboard support and live regions where they matter.
  • Responsive. Container queries, so items adapt to the space they get, not just the window.

Choose the UI for your workflow

affectUI is the presentation layer of an AI product. Your application supplies runtime data, connects tools and enforces permissions; the components render that state and expose callbacks for your actions.

  • Agent UI: task plans, run progress, decisions and outcomes for delegated work. Start with the Agent UI guide or the agent dashboard guide.
  • AI chat UI: composers, streaming answers, citations and reply actions. Read React components for AI chat.
  • Human in the loop: review a proposed action and its target before the backend executes it. Read approvals and permissions.
  • Tool-call UI: make tool activity, results and failures readable. Read tool calls in an agent UI.
  • MCP UI: present tools connected through MCP. The protocol connection and the finished interface are separate concerns; see the MCP UI guide. The affectUI MCP server below helps coding assistants discover and install components.
  • Generative UI: map model-selected tools and validated data to known React views. Read generative UI in React, including fallback states and why this does not require executing arbitrary generated code.

Browse all guides, follow the AI setup docs, or compare UI libraries to choose the pieces that fit your application.

Install

Requirements
  • React 19, with or without TypeScript
  • Any React setup: Next.js, Vite, Remix or plain React
  • The @/* import alias if you use the shadcn CLI (Next.js and shadcn set it up by default)
With the shadcn CLI

Every item has its own registry URL. Run the command from its page on affectui.com or from the tables below:

npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json

The file lands in components/ui, ready to import.

Prefer short names? Register the namespace once in components.json:

{

"registries": { "@affectui": "https://www.affectui.com/r/{name}.json" } }

npx shadcn@latest add @affectui/reaction-bar
Copy and paste

Open the item's folder in this repository (components/, illustrations/ or motion/), copy the file into your project and import it

ตัดมาแค่ช่วงต้น อ่านต่อใน repo