Next AI Draw.io
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Animated website templates, cinematic video backgrounds, UI components and design systems.
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ผลตรวจผ่าน 4/5 · สิ่งที่คุณถามผ่านเซิร์ฟเวอร์ของผู้ทำ (mcp.animatedwebs.com)
ขั้นแรก: คุณใช้ AI ตัวไหน
เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง
ต่อกับ Claude ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม · ตั้งครั้งเดียวที่ claude.ai หรือแอปบนคอม แล้วใช้ในแชตได้ · บัญชีฟรีเพิ่มได้ 1 ตัว
CustomizeConnectors
คัดลอกจากที่นี่ไปวางในช่องชื่อเดียวกันบนหน้าจอของ Claude แล้วกด Continue
AnimatedWebshttps://mcp.animatedwebs.comหัวข้อ Authentication ปล่อยตามที่ Claude ตรวจเจอ แล้วกด Add
+ConnectorsAnimatedWebs
ใช้ AnimatedWebs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude บอกว่ากำลังใช้ AnimatedWebs หรือมีชื่อเครื่องมือของ AnimatedWebs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ ChatGPT ได้ เฉพาะแผนองค์กร
ใช้ได้กับ ChatGPT Business, Enterprise หรือ Edu บนเว็บ และแอดมินหรือเจ้าของ workspace ต้องเป็นคนเพิ่ม · ถ้าใช้ Free, Plus หรือ Pro: ChatGPT แผนของคุณยังต่อ MCP เองไม่ได้
Plugins+Add custom MCP server
ใส่ชื่อ แล้ววางที่อยู่ใต้ Connection ติ๊กยอมรับคำเตือน แล้วกด Create as a plugin
AnimatedWebshttps://mcp.animatedwebs.comเปิดแชตใหม่แล้วเลือก AnimatedWebs จากรายการปลั๊กอินก่อนพิมพ์
ใช้ AnimatedWebs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า ChatGPT บอกว่ากำลังใช้ AnimatedWebs หรือมีชื่อเครื่องมือของ AnimatedWebs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ OpenAI เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ Claude Code ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comต้องเห็น AnimatedWebs ในรายการและขึ้นว่าเชื่อมต่อแล้ว
ใช้ AnimatedWebs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Claude Code บอกว่ากำลังใช้ AnimatedWebs หรือมีชื่อเครื่องมือของ AnimatedWebs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ Cursor ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
ใช้ AnimatedWebs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า Cursor บอกว่ากำลังใช้ AnimatedWebs หรือมีชื่อเครื่องมือของ AnimatedWebs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
ต่อกับ VS Code ได้ · ประมาณ 2 นาที
ไม่ต้องใช้คีย์ ไม่ต้องลงโปรแกรม
ใช้ AnimatedWebs บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง✓ ถ้า VS Code บอกว่ากำลังใช้ AnimatedWebs หรือมีชื่อเครื่องมือของ AnimatedWebs ขึ้นในคำตอบ แปลว่าต่อสำเร็จ
ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป
โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม
ที่อยู่สำหรับโปรแกรมที่ต่อผ่านเว็บ
https://mcp.animatedwebs.comค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง
Claude Code
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.comCursor (~/.cursor/mcp.json)
{
"mcpServers": {
"animatedwebs": {
"url": "https://mcp.animatedwebs.com"
}
}
}VS Code (mcp.json)
{
"servers": {
"animatedwebs": {
"type": "http",
"url": "https://mcp.animatedwebs.com"
}
}
}ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569
ต่อผ่านคลาวด์ได้ใน
ClaudeChatGPTGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatOpen WebUIRaycast
ชื่อและคำอธิบายเครื่องมือตามที่ server ตอบมาเมื่อ 11 พ.ย. 2569 ผู้ทำเป็นคนเขียน ไม่ใช่เรา แสดงเป็นข้อความล้วน
search_catalogSearches the AnimatedWebs catalog (AnimatedWebs templates, UI library components, cinematic video backgrounds, website style references and verified creators) and returns metadata grouped by kind, never prompt text or source code. Use it first to find an identifier, then open one
list_categoriesLists the valid values for search_catalog's category filter, with counts. Use it before filtering a search by category; use search_catalog itself to find items. kind templates (default) returns AnimatedWebs template categories under categories (fixed display order, zero-count cat
get_templateReturns one AnimatedWebs template by slug: description, stack, tags, access level, tools it works with, licence note, demo and preview URLs, views, saves and likes, and with include_prompt true the full build prompt as Markdown. Use it to inspect a template found with search_cata
get_componentReturns one AnimatedWebs UI library component by id: description, runtime, interaction, tags, every variant with live URL and thumbnail, import name, shadcn install command, and with include_source true its complete source code (Pro). Use it after search_catalog (kind components)
generate_componentWrites one new UI component from a text description with AnimatedWebs AI and returns a complete self-contained HTML document (Tailwind CDN, inline JS). Use it when no library component fits; search_catalog (kind components) first to reuse one, and refine_component to change a res
refine_componentApplies one requested change to an existing component's HTML with AnimatedWebs AI and returns the complete updated HTML document. Use it to iterate on a generate_component result (or any self-contained HTML component); use generate_component to start from scratch. Output has the
open_builderReturns links that start a new project from one AnimatedWebs template's build prompt in Lovable, v0 and Bolt; nothing is created until the user opens a link. Use it to hand a template to a hosted AI builder; use get_template with include_prompt true instead to build it yourself i
get_backgroundReturns one AnimatedWebs cinematic video background by slug: on Pro and Lifetime the clean watermark-free MP4 URL plus an HTML snippet for a muted, looping, autoplaying hero video; on other plans the watermarked preview URL, clean: null and the plan required (not an error). Use i
get_style_referenceReturns the full DESIGN.md for one AnimatedWebs website style reference (colour tokens, type scale, radius, buttons, layout notes, build prompt) plus a Tailwind v4 @theme block and CSS variables. Use it after search_catalog (kind styles) to build original work in that style; use
get_creatorReturns one verified AnimatedWebs creator's public profile by handle (name, headline, bio, website, stack, specialties, tier, certificate number, profile URL) and their live templates (title, tagline, kind, access, price in USD, stack, demo and preview URLs). Use it after search_
get_pricingReturns AnimatedWebs plans and prices (Free, Prompt Pack, Pro monthly and yearly, Lifetime) with what each includes, founding Lifetime spots left and the pricing page URL. Use it for plan and price questions; use get_account for the signed-in user's own plan, credits and usage. P
get_accountReturns the signed-in account's AnimatedWebs plan and today's usage (Pro prompt access or Prompt Pack credits, UI generations and Design AI requests used against the daily limits), links, the Design workspace URL, and on request the account's items. Use it to check whether a Pro
request_templateSends the AnimatedWebs team a request for a new template or component that the catalog does not have, and returns the request id. Use it only after search_catalog found nothing suitable; use manage_request to check, list or cancel requests already sent instead of sending one agai
manage_requestLists, checks or cancels the signed-in account's own template requests (sent with request_template or the contact form's template-request topic). Use it to follow up on a request instead of sending it again; use request_template to send a new one. action list (default) returns re
save_itemSaves, unsaves or lists the signed-in account's favorite AnimatedWebs templates, UI components and cinematic backgrounds. Use it when the user wants to keep an item for later or see what they kept; use get_account with include_items for the full picture (saved plus unlocked and g
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 12 พ.ย. 2569
ชื่อใน registry ยืนยันโดเมน animatedwebs.com แล้ว (registry ตรวจความเป็นเจ้าของโดเมน)
มีการแก้โค้ดล่าสุด 9 วันที่ผ่านมา
GitHub อ่านชนิด license ไม่ออก ต้องเปิดไฟล์ดูเอง
ตอบกลับใน 310 ms (HTTP 200)
ไม่ต้องล็อกอิน
อ่านคำอธิบายเครื่องมือ 15 ตัวแล้ว ไม่พบคำสั่งแอบแฝงถึง AI
ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์
ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย
ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx
ยังไม่มีรีวิว
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 4 จาก 5 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนคลาวด์ของผู้ทำ ต่อผ่านอินเทอร์เน็ตได้เลย ไม่ต้องลงโปรแกรม แต่ข้อมูลที่ส่งให้จะผ่านเซิร์ฟเวอร์ของผู้ทำ
repo บน GitHub มีการแก้โค้ดล่าสุด 9 วันที่ผ่านมา และส่งรุ่นล่าสุด (1.2.2) เข้า registry 9 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT แผน Business ขึ้นไป
ในหมวดเดียวกันมี Next AI Draw.io, Pascal 3D Editor, screenpipe
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand
สร้าง ตรวจ และบันทึกฉากอาคาร 3 มิติที่แก้ไขได้ ด้วย Pascal
Search your local screen recordings, audio transcripts, and computer activity from screenpipe.
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
Turn a one-line brief into a production-ready animated website, without leaving Claude Code.
Cinematic templates, live WebGL scenes, video backgrounds, UI components and design systems, delivered through one plugin.
Website · Template library · Documentation · Pricing · Support
AnimatedWebs is a library of more than 1,400 animated website templates, each with a live demo and a complete build prompt. This plugin connects Claude Code to that library through the AnimatedWebs MCP server and adds skills and commands that know how to use it.
Describe what you need. Claude finds the closest designs, shows you the live demos, and builds the one you choose into your project with its motion, typography and layout intact.
In Claude Code, add the marketplace and install the plugin:
/plugin marketplace add iboss21/animatedwebs-claude
/plugin install animatedwebs@animatedwebs
The first time a tool runs, Claude Code opens your browser so you can sign in to AnimatedWebs. A free account is enough to get started.
Using another MCP client? Connect the server directly:
claude mcp add --transport http animatedwebs https://mcp.animatedwebs.com
Setup guides for Cursor, Codex, VS Code, Windsurf and Antigravity are at animatedwebs.com/mcp.
Ask in plain language. The right skill takes over:
*Build a premium landing page for my architecture studio, dark and cinematic.*
*Give this page a hero with a slow video background, something calm and blue.*
*Find me a particle scene for an AI product and apply it to my Next.js app.*
| Command | Description |
|---|---|
/animatedwebs:site | Selects the best-matching template and builds the complete site |
/animatedwebs:browse | Lists matching templates with links to their live demos |
/animatedwebs:hero | Replaces the current hero with a cinematic one |
/animatedwebs:background | Adds a cinematic video background to the hero |
/animatedwebs:component | Adds an animated UI component from the library, or generates one |
/animatedwebs:style | Applies a design system as tokens, theme and variables |
/animatedwebs:design | Connects your AnimatedWebs Design Studio workspace |
| Skill | Used when you ask to |
|---|---|
animatedwebs-site | build a full website or landing page |
animatedwebs-hero | create or upgrade a hero section |
animatedwebs-backgrounds | add a video or motion background |
animatedwebs-components | add animated UI components |
animatedwebs-style | apply a visual style or design system |
animatedwebs-design | work in Design Studio |
The server at https://mcp.animatedwebs.com exposes 15 tools. Every tool carries MCP annotations (read-only, destructive, open-world) and an icon.
| Area | Tools |
|---|---|
| Search | search (templates, components, backgrounds, styles, creators; kind, filters, empty query browses, cursor pages) · list_categories |
| Templates | get_template · get_template_prompt · open_in_builder · request_template |
| UI Library | get_component · get_component_source · generate_component · refine_component |
| Cinematic Backgrounds | get_background |
| Styles | get_style_reference |
| Account and community | get_account (includes the Design workspace) · get_pricing · get_creator |
Earlier versions listed search_templates, search_components, search_everything, search_backgrounds, search_styles, search_creators, list_component_categories and get_design_workspace. Those names still work when called but are no longer listed; see docs/MCP-TOOLS.md in the AnimatedWebs repository.
Noesis WebGL constellation brain · AI / SaaS
Orchid Cinematic video hero · AI studio
Amethyst Cinematic video hero · Travel
Chrome Capital Liquid chrome film · Fintech
Aurora Lagoon Cinematic video hero · Wellness
Atlas Morphing particle scene · AI agents
Browse all 1,400+ templates →
| Free | Pro | |
|---|---|---|
| Free templates and prompts | Unlimited | Unlimited |
| Pro templates, backgrounds and component source | Unlimited | |
| AI component generations | 5 a day | 100 a day |
| Design Studio AI requests | 40 a day | 600 a day |
| Commercial licence for client work | Included |
Pro is $19 a month or $149 a year. One-time Prompt Packs and Lifetime access are also available. See animatedwebs.com/pricing.
Details are in the Privacy Policy.
Questions and account help: animatedwebs.com/contact. Bugs and template requests: open an issue. Security reports: see SECURITY.md. You can also request a template from inside Claude with the request_template tool.
AnimatedWebs templates, prompts, demos and media are licensed under the AnimatedWebs Terms. The plugin manifest and skills in this repository are provided for use with the AnimatedWebs service.
Release notes are in CHANGELOG.md and the repository licence is in LICENSE.md.
Claude and Claude Code are trademarks of Anthropic, PBC. Other names mentioned belong to their respective owners.
© 2026 AnimatedWebs