ต้นแบบ · รุ่นทดลอง: มีทุก server ในทะเบียนทางการ อัปเดตทุก 30 นาที เข้าสู่ระบบด้วย Google เพื่อเขียนรีวิวได้แล้วต้นแบบ · อัปเดตทุก 30 นาที
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · วิธีติดตั้งภาษาไทยทุกตัว

Systra Tools

โดย systra-toolsรุ่น 1.0.1i★ 0iรันบนคลาวด์
ชื่อใน registrytools.systra/systra-tools

วิธีติดตั้ง

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

ยังไม่มีคำอธิบายภาษาไทย ดูข้อเท็จจริงด้านล่าง หรือเปิดคำอธิบายต้นฉบับจากผู้ทำ

  • ต่อแบบ คลาวด์ (ต่อผ่านอินเทอร์เน็ต)
  • บัญชีหรือคีย์ ใช้ได้โดยไม่ใส่คีย์ · ใส่ Authorization ได้ถ้ามี (มักเพิ่มโควตา)
  • หมวด ค้นข้อมูลและความจำของ AI
คำอธิบายต้นฉบับจากผู้ทำ (อังกฤษ)
Search and pull production-ready React + Tailwind sections and elements from a growing library

ติดตั้ง

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

ผลตรวจผ่าน 4/4 · สิ่งที่คุณถามผ่านเซิร์ฟเวอร์ของผู้ทำ (systra.tools) · ✓ ตรวจคำสั่งแล้ว 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 · ชื่อSystra Tools
    Remote MCP server URL · ที่อยู่https://systra.tools/api/mcp

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

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

    +ConnectorsSystra Tools

  4. ลองเลย

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

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

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ 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 · ชื่อSystra Tools
    Connection · ที่อยู่https://systra.tools/api/mcp
  3. เลือก Systra Tools ในแชต

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

  4. ลองเลย

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

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

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

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

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

  1. เปิด Terminal

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

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

    claude mcp add --transport http --scope user systra-tools https://systra.tools/api/mcp
  3. พิมพ์ /mcp ใน Claude Code

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

  4. ลองเลย

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

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

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

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

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

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

    เปิดใน Cursor

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

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

  3. ลองเลย

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

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

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

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

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

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

    เปิดใน VS Code

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

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

  3. ลองเลย

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

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

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

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

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

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

ที่อยู่https://systra.tools/api/mcp

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

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

ต่อผ่านเว็บ

Claude Code

claude mcp add --transport http --scope user systra-tools https://systra.tools/api/mcp

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "systra-tools": {
      "url": "https://systra.tools/api/mcp"
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "systra-tools": {
      "type": "http",
      "url": "https://systra.tools/api/mcp"
    }
  }
}

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

  • Authorization ความลับ HTTP header
    Optional. Without a key the free components work. For the full library, create a Premium key at https://systra.tools/mcp

คำอธิบายยังเป็นภาษาอังกฤษตามต้นฉบับ

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

สรุป

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

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

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

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

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

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

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

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

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

  • list_categories

    Lists every component category of the Systra Tools library with its slug, its title and how many components it holds. Start here when the user names a kind of page part (hero, pricing, footer) instead of a component, then pass the slug to list_components. No parameters, works wit

  • list_components

    Lists component names, optionally limited to one category, one line each with the name and the category slug. Use it to browse a category before choosing; use search_components instead when you already have a keyword. Returns names only, no source: fetch the code with get_compone

  • search_components

    Finds components whose name or category contains the search term (one term, case-insensitive substring match) and returns their names with the category slug. Use it when you know roughly what you need, such as 'pricing', 'marquee', 'testimonial' or 'countdown'; use list_component

  • get_component

    Returns the complete, copy-ready React/TSX source of one component as designed, plus notes on its images and any extra files it needs. Components use Tailwind CSS classes and import react, framer-motion and lucide-react; a few also need gsap or three, which the response names wit

  • list_styles

    Lists the brand styles extracted from real websites with the Systra style extractor: slug, site name, primary and accent colour and heading font. Pass query to search by site name, domain, colour or font, for example 'bakery' or 'Inter'. Use it to find a slug for get_style, get_c

  • get_style

    Returns every design token of one extracted brand style: colours, font families and sizes, spacing, radii, CSS variables and the generated DESIGN.md (up to 4000 characters). Use it to theme your own code or set up a design system; use get_component_styled when you want one specif

  • get_component_styled

    Returns one component's source together with the tokens of a brand style, step-by-step instructions for mapping the component's colours, fonts and radii onto that style, and the colour values the component uses today. Use it instead of get_component when the result should match a

  • list_images

    Lists images and a few videos from the Systra Tools media library (all AI-generated), each with a permanent URL to use directly as src, plus title, album and format. Filter by album and format, 100 per page. Use it to browse an album; use search_images to find a motif by keyword.

  • search_images

    Finds images in the media library (all AI-generated) whose title, tags, file name or album contain every word of the query, and returns their permanent URLs, 100 per page. Use it for a motif, such as 'red dress', 'laptop desk' or 'misty forest'; use list_images to browse a whole

  • list_posts

    Lists the Instagram post templates (1080 x 1350) with slug, name, family and whether they need your own imagery. Each template is a single HTML file that can be rebuilt and exported as an image or a video. Pass query to search by name or purpose, for example 'quote' or 'statistic

  • get_post

    Returns one post template as working instructions: the full HTML file, an export script to render it locally as PNG or video, and the rules on what may be changed. The server renders nothing; you edit and export the file. Use it after list_posts.

  • list_recipes

    Lists curated page recipes: proven section sequences for complete landing pages (for example SaaS, coaching or a hotel), each with its number of sections and a short purpose. Pass query to search by industry, purpose or section, for example 'hotel' or 'pricing'. Use it when the u

  • get_recipe

    Returns one page recipe: the ordered sections with the purpose of each, a composition file where available, and the full source of every section. Pass style to add brand tokens and adaptation instructions. Without a premium key, sections that are not free are named but their sour

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

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

  • ✓ ผ่าน

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

    ชื่อใน registry ยืนยันโดเมน systra.tools แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)

  • ✓ ผ่าน

    ยังมีคนดูแล

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

  • – ไม่เกี่ยว

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

    ไม่เกี่ยว: server บนคลาวด์ของเจ้าของ systra.tools เอง คุณไม่ได้รันโค้ดจากรีโป

  • ✓ ผ่าน

    endpoint ตอบ

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

  • – ไม่เกี่ยว

    ล็อกอินแบบ OAuth

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

  • ✓ ผ่าน

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

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

พูดคุย

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

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

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

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

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

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

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

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

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

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

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

Systra Tools ปลอดภัยไหม?

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

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

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

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

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

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

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

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

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

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

ในหมวดเดียวกันมี Context7, Codebase Memory, OpenSEO

ตัวอื่นในหมวดเดียวกัน

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

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

Context7

ส่งคู่มือการใช้ไลบรารีและเฟรมเวิร์กรุ่นล่าสุดให้ AI อ่านก่อนตอบ ช่วยให้โค้ดที่ AI เขียนไม่ใช้คำสั่งเก่าที่เลิกใช้แล้ว

โดย upstashใช้กันมาก↓ 1.2M/สัปดาห์★ 64.8Kอัปเดต เมื่อวานซืน

บนเครื่องหรือคลาวด์

Codebase Memory

Codebase knowledge graph for AI agents — 162 languages, sub-ms queries, 99% fewer tokens.

โดย DeusDataใช้กันมาก↓ 16.8K/สัปดาห์★ 48.6Kอัปเดต 28 วันที่ผ่านมา

รันบนเครื่อง

OpenSEO

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

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

รันบนคลาวด์✓ everyapp.com

README จากผู้ทำ

เปิดอ่าน README

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

Systra Tools

620+ production-ready React + Tailwind sections and elements,

searchable by your coding agent over MCP.


Systra Tools is a library of 620+ React and Tailwind sections and elements: heroes, pricing tables, bento grids, dashboards, footers and more. This repository connects it to your coding agent over MCP, so Claude, Cursor or VS Code can search the library and drop a section into your project as a single TSX file.

Every component imports only react, framer-motion and lucide-react and respects reduced motion. Six components can be pulled without a key. A Premium key from https://systra.tools/mcp opens the whole library, the image library and the page recipes.

Install

Cursor

Click the button above, or add the plugin from cursor.directory, or configure it by hand in ~/.cursor/mcp.json:

{

"mcpServers": { "systra-tools": { "url": "https://systra.tools/api/mcp", "headers": { "Authorization": "Bearer ${env:SYSTRA_MCP_KEY}" } } } }

Claude Code
/plugin marketplace add systra-tools/systra-tools-plugin

/plugin install systra-tools@systra

VS Code, Windsurf and anything else that speaks MCP

Point an HTTP MCP server at https://systra.tools/api/mcp and send your key as Authorization: Bearer .

Your key

The key is optional. Without one the agent gets the free sample components. For the full library, create a Premium key at systra.tools/mcp and put it in the environment as SYSTRA_MCP_KEY. Do not commit the key.

What the agent gets

ToolWhat it does
list_categories25 categories with counts
list_components, search_componentsfind a section by intent
get_componentthe full source
list_recipes, get_recipean ordered page, 23 recipes
list_styles, get_style, get_component_styledthe same component in a real brand's colours and fonts
list_images, search_imagesimagery with permanent URLs
list_posts, get_postsocial post templates

Largest categories: elements (78), heroes (76), features (38), interaktiv (29), gallery (25), gsap (22), stats (22), trust (19), dashboard (18).

What is in this repository

A rule, two skills and the MCP configuration. That is all a plugin is. The component library itself lives behind the MCP server.

License

The configuration in this repository is MIT licensed. The components you pull through the MCP server are licensed separately, see https://systra.tools/terms.