Context7
ส่งคู่มือการใช้ไลบรารีและเฟรมเวิร์กรุ่นล่าสุดให้ AI อ่านก่อนตอบ ช่วยให้โค้ดที่ 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) เป็นคนเพิ่ม
CustomizeConnectors
คัดลอกจากที่นี่ไปวางในช่องชื่อเดียวกันบนหน้าจอของ Claude แล้วกด Continue
Systra Toolshttps://systra.tools/api/mcpกด Continue ผ่านหน้าตรวจการล็อกอินที่ Claude ตรวจเจอ · หัวข้อ Authentication เลือกตามที่ผู้ทำบอก (Sign in now, Sign in when needed หรือ No sign in) แล้วกด Add
+ConnectorsSystra Tools
ใช้ Systra Tools บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude บอกว่ากำลังใช้ Systra Tools หรือมีชื่อเครื่องมือของ Systra Tools ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ ChatGPT ได้ ขึ้นกับแผน
MCP แบบเต็ม: ChatGPT Business, Enterprise หรือ Edu บนเว็บ · Pro: ต่อได้ด้วยสิทธิ์อ่านและดึงข้อมูล เครื่องมือที่แก้ข้อมูลอาจใช้ไม่ได้ · Plus: เอกสารยังไม่ยืนยัน ถ้าเห็นเมนูเพิ่ม MCP แบบกำหนดเองในหน้าปลั๊กอิน ลองตามขั้นตอนได้ · ใช้บนเว็บเท่านั้น
Plugins+Add custom MCP server
ใส่ชื่อ แล้ววางที่อยู่ใต้ Connection ติ๊กยอมรับคำเตือน แล้วกด Create as a plugin
Systra Toolshttps://systra.tools/api/mcpเปิดแชตใหม่แล้วเลือก Systra Tools จากรายการปลั๊กอินก่อนพิมพ์
ใช้ Systra Tools บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า ChatGPT บอกว่ากำลังใช้ Systra Tools หรือมีชื่อเครื่องมือของ Systra Tools ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ OpenAI เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ Claude Code ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
claude mcp add --transport http --scope user systra-tools https://systra.tools/api/mcpต้องเห็น Systra Tools ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ใช้ Systra Tools บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude Code บอกว่ากำลังใช้ Systra Tools หรือมีชื่อเครื่องมือของ Systra Tools ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ Cursor ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
ใช้ Systra Tools บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Cursor บอกว่ากำลังใช้ Systra Tools หรือมีชื่อเครื่องมือของ Systra Tools ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ VS Code ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
ใช้ Systra Tools บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า VS Code บอกว่ากำลังใช้ Systra Tools หรือมีชื่อเครื่องมือของ Systra Tools ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม
ที่อยู่สำหรับโปรแกรมที่ต่อผ่านเว็บ
https://systra.tools/api/mcpค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง
Claude Code
claude mcp add --transport http --scope user systra-tools https://systra.tools/api/mcpCursor (~/.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"
}
}
}คำอธิบายยังเป็นภาษาอังกฤษตามต้นฉบับ
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569
ต่อผ่านคลาวด์ได้ใน
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 9 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน
list_categoriesLists 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_componentsLists 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_componentsFinds 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_componentReturns 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_stylesLists 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_styleReturns 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_styledReturns 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_imagesLists 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_imagesFinds 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_postsLists 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_postReturns 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_recipesLists 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_recipeReturns 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
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 14 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน systra.tools แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
มีการแก้โค้ดล่าสุด วันนี้
ไม่เกี่ยว: server บนคลาวด์ของเจ้าของ systra.tools เอง คุณไม่ได้รันโค้ดจากรีโป
ตอบกลับใน 1788 ms (HTTP 200)
ไม่ต้องล็อกอิน
อ่านคำอธิบายเครื่องมือ 13 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI
ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์
ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย
ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx
ยังไม่มีรีวิว
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 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
ส่งคู่มือการใช้ไลบรารีและเฟรมเวิร์กรุ่นล่าสุดให้ AI อ่านก่อนตอบ ช่วยให้โค้ดที่ AI เขียนไม่ใช้คำสั่งเก่าที่เลิกใช้แล้ว
Codebase knowledge graph for AI agents — 162 languages, sub-ms queries, 99% fewer tokens.
Keyword research, site audits, rank tracking and AI visibility for your AI agent.
ส่วนนี้คัดจาก 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.
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}" } } } }
/plugin marketplace add systra-tools/systra-tools-plugin
/plugin install systra-tools@systra
Point an HTTP MCP server at https://systra.tools/api/mcp and send your key as Authorization: Bearer .
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.
| Tool | What it does |
|---|---|
list_categories | 25 categories with counts |
list_components, search_components | find a section by intent |
get_component | the full source |
list_recipes, get_recipe | an ordered page, 23 recipes |
list_styles, get_style, get_component_styled | the same component in a real brand's colours and fonts |
list_images, search_images | imagery with permanent URLs |
list_posts, get_post | social post templates |
Largest categories: elements (78), heroes (76), features (38), interaktiv (29), gallery (25), gsap (22), stats (22), trust (19), dashboard (18).
A rule, two skills and the MCP configuration. That is all a plugin is. The component library itself lives behind the MCP server.
The configuration in this repository is MIT licensed. The components you pull through the MCP server are licensed separately, see https://systra.tools/terms.