webcake-landing-mcp 1.0.42 → 1.0.44

package/README.md

@@ -89,7 +89,7 @@ persists it (source-only — the page opens in the editor where re-saving render
 | **npx (local)** — runs on your machine | Personal daily use, full control | browser `login`, a JWT, or none (reference tools) |
 | **Hosted URL** — use our live server, nothing to install | No Node.js, teams, the claude.ai dialog | your personal `?jwt=` link / `x-webcake-jwt` header |
 
-The **reference + generation tools** (`get_generation_guide`, `list_elements`, `validate_page`, …) and the **ingest tools** (`ingest_html`, `ingest_url` — turn an existing HTML or URL into a layout anchor so the AI can recreate or adapt it) work with **zero config**; only the **persistence tools** (`create_page`, `update_page`, `add_section`, `list_pages`, `get_page`, `list_organizations`) need a token. Credentials resolve in order: **per-request header → env var → saved `auth.json`** (`login`).
+The **reference + generation tools** (`get_generation_guide`, `list_elements`, `validate_page`, …) and the **ingest tools** (`ingest_html`, `ingest_url` — turn an existing HTML or URL into a layout anchor so the AI can recreate or adapt it) work with **zero config**; only the **persistence tools** (`create_page`, `update_page`, `add_section`, `list_pages`, `find_pages`, `get_page`, `list_organizations`) need a token. Credentials resolve in order: **per-request header → env var → saved `auth.json`** (`login`).
 
 > 🛠️ Prefer a shell-script installer (`install.sh`/`install.ps1`), a cloned local build, or hand-written per-IDE config? See **[docs/manual-install.md](docs/manual-install.md)**.
 
@@ -464,6 +464,7 @@ Both `create_page` and `update_page` **default to `dry_run=true`** (validate and
 | `list_organizations` | List the account's organizations (id, name, is_default). Default = the `is_default` org. |
 | `create_page` | Persist a generated source as a new page (source-only). **Defaults to `dry_run=true`.** |
 | `list_pages` | List the account's pages (id, name, organization_id, updated_at) to pick one to edit. |
+| `find_pages` | Search the account's pages by name, domain, and/or page id (AND-combined) to locate one to edit; returns id, name, org, custom/default domain, updated_at. |
 | `get_page` | Fetch an existing page's decoded source tree so you can edit it. |
 | `update_page` | Overwrite an existing page's source with an edited tree. **Defaults to `dry_run=true`.** |
 

package/dist/changelog.json

@@ -1,4 +1,18 @@
 [
+  {
+    "v": "1.0.44",
+    "d": "09/06/2026",
+    "type": "Added",
+    "en": "New find_pages tool searches the account's pages by name, domain (matches custom_domain or default_domain), and/or page id (filters are…",
+    "vi": "Công cụ find_pages mới tìm kiếm các trang trong tài khoản theo tên, domain (khớp với custom_domain hoặc default_domain), và/hoặc page id (các bộ lọc…"
+  },
+  {
+    "v": "1.0.43",
+    "d": "09/06/2026",
+    "type": "Changed",
+    "en": "The GET / web guide page has refreshed copy throughout: updated page title and meta description, simplified FAQ answers in both English and…",
+    "vi": "Trang hướng dẫn GET / được làm mới toàn bộ nội dung: cập nhật tiêu đề trang và meta description, đơn giản hóa câu trả lời FAQ bằng cả tiếng Anh và…"
+  },
   {
     "v": "1.0.42",
     "d": "09/06/2026",
@@ -26,19 +40,5 @@
     "type": "Internal",
     "en": "Added server.json MCP Registry manifest (namespace io.github.vuluu2k/webcake-landing-mcp) and the corresponding mcpName field in package.json so the…",
     "vi": "Thêm manifest MCP Registry server.json (namespace io.github.vuluu2k/webcake-landing-mcp) và trường mcpName tương ứng trong package.json để MCP…"
-  },
-  {
-    "v": "1.0.38",
-    "d": "08/06/2026",
-    "type": "Added",
-    "en": "New add_section tool appends one or more sections to an existing page without re-sending the full source: the server fetches the current page,…",
-    "vi": "Công cụ add_section mới cho phép gắn thêm một hoặc nhiều section vào trang hiện có mà không cần gửi lại toàn bộ source: server lấy trang hiện tại,…"
-  },
-  {
-    "v": "1.0.37",
-    "d": "08/06/2026",
-    "type": "Changed",
-    "en": "get_generation_guide now includes a HEADER section build hint directing the agent to place every header child (logo, brand text, CTA button) on a…",
-    "vi": "get_generation_guide nay bổ sung gợi ý dựng section HEADER yêu cầu agent đặt mọi phần tử con trong header (logo, tên thương hiệu, nút CTA) trên cùng…"
   }
 ]

package/dist/domains/landing/instructions.js

@@ -13,7 +13,7 @@ RULES (follow for every request):
 - BUILD THE SOURCE IN ONE PASS — gather everything you need BEFORE assembling the source, then build the FULL tree once. BATCH the reads: when a section needs several element types (section + text-block + image-block + button + form + input), call get_element({types:[…]}) ONCE instead of one call per type — same for images, call search_images({queries:[…]}) ONCE with one query per image slot (it dedups + parallelizes and returns one best photo per query). Do NOT interleave get_element calls between create_page previews and rebuild. create_page/update_page take the entire source as input, so each call re-ships the whole page — re-previewing repeatedly wastes the request.
 - create_page and update_page DEFAULT to dry_run=true (a safety net for ambiguous requests). When the user's intent is clear AND validate_page already passed (no errors), SKIP the dry-run and call with dry_run=false directly — saves one round-trip. Use dry_run=true only when (a) the request is ambiguous about target/content, (b) the user explicitly asks to "preview" or "xem trước", (c) this is an update_page that overwrites significant existing content, or (d) you genuinely need to inspect the redacted payload. Never loop dry-runs to "check" the source — validate_page is the validator. Do not run dry-run then dry-run again before the real write.
 - LARGE PAGES (4+ sections) — build INCREMENTALLY to avoid the giant single create_page payload that can drop the connection: create_page with a SMALL skeleton (empty/near-empty page) to get a page_id, then call add_section once per section (each call ships ONLY that section; the backend appends it server-side and rejects duplicate ids — no whole-source get+put). Small pages can still go in one create_page pass.
-- EDIT existing pages surgically: get_page → change ONLY what was asked → keep every other element, its id, and coordinates → validate_page → update_page. Never regenerate the whole tree for a small change.
+- EDIT existing pages surgically: find_pages (locate the page by name/domain/id when you don't already have a page_id) → get_page → change ONLY what was asked → keep every other element, its id, and coordinates → validate_page → update_page. Never regenerate the whole tree for a small change.
 - Organizations: call list_organizations and ask which to use; default to the is_default org. Endpoints are owner-scoped (only the account's own pages).
 - REFERENCE INPUT — if the user provides a layout reference, USE it as the layout anchor (don't ignore it, don't re-invent from scratch). Three input modes: (1) IMAGE/screenshot attached in chat → analyze it natively (no tool call): identify section flow (hero/features/form/cta/footer), heading hierarchy, dominant colors, font feel, then map sections to Webcake elements. (2) HTML string → call ingest_html(html) to get a compact AST. (3) URL → call ingest_url(url) for the same AST. The AST classifies sections by role and lists headings/subheadings/ctas/images/form_fields plus brand hints (colors/fonts) — use it for LAYOUT + HIERARCHY, then generate FRESH content tailored to the user's brand (don't 1:1 copy text). intent='clone' only when the user explicitly asks to mirror the original; default intent='adapt'. The reference workflow PRESERVES craft rules above (centering, page margin, premium spacing, real images) — apply them on top of the reference layout, don't bypass them.
 
@@ -28,4 +28,4 @@ MODEL (essentials):
 - Visible content lives in specials (text, src, field_name…), never in styles. Colors as rgba(). Animation in config.animation={name,delay,duration,repeat}. Form inputs need a unique specials.field_name (use canonical keys: full_name, phone_number, email, address, quantity).
 - IMAGES: include them (hero/product, feature icons, about photo). PREFER REAL PHOTOS — call search_images with a short English subject (e.g. 'fresh coffee cup') and put a returned URL (src.large for a hero/banner, src.medium for a card/thumb) into the image-block specials.src; it works out of the box (a shared proxy supplies images). Only if search_images returns ok:false, FALL BACK to a PLACEHOLDER sized to the box: https://placehold.co/<width>x<height>. (gallery.media = array of OBJECTS {type:'image',link:'<url>',linkVideo:'',typeVideo:'youtube',imageCompression:true} — NOT plain strings, the gallery reads item.link; video.specials.img = poster). NEVER leave src empty (renders blank). Ensure text contrasts with its section background.
 
-Start by calling get_generation_guide. Tools: get_generation_guide, list_elements, get_element, new_element, new_page_skeleton, get_page_schema, validate_page, search_images, ingest_html, ingest_url, list_organizations, create_page, list_pages, get_page, update_page, add_section.`;
+Start by calling get_generation_guide. Tools: get_generation_guide, list_elements, get_element, new_element, new_page_skeleton, get_page_schema, validate_page, search_images, ingest_html, ingest_url, list_organizations, create_page, list_pages, find_pages, get_page, update_page, add_section.`;

package/dist/persistence/webcake-client.js

@@ -1,6 +1,7 @@
 const CREATE_ENDPOINT = "/api/v1/ai/create_page_from_source";
 const ORGS_ENDPOINT = "/api/v1/org/organizations";
 const PAGES_ENDPOINT = "/api/v1/ai/pages";
+const SEARCH_PAGES_ENDPOINT = "/api/v1/ai/search_pages";
 const PAGE_SOURCE_ENDPOINT = "/api/v1/ai/page_source";
 const UPDATE_ENDPOINT = "/api/v1/ai/update_page_source";
 const APPEND_ENDPOINT = "/api/v1/ai/append_section";
@@ -167,6 +168,32 @@ export async function listPages(config) {
     const pages = r.json?.data?.pages ?? r.json?.pages ?? [];
     return { ok: true, status: r.status, pages };
 }
+/**
+ * Search the account's pages by name / domain / id via the dedicated backend
+ * endpoint. Filters are AND-combined server-side; each row carries the page's
+ * `custom_domain` + `default_domain` so the caller can disambiguate by URL.
+ * Returns `endpoint_missing:true` on a 404 so the caller can fall back to
+ * filtering `listPages` client-side against an older backend lacking the route.
+ */
+export async function searchPages(config, filters) {
+    const qs = new URLSearchParams();
+    if (filters.name)
+        qs.set("name", filters.name);
+    if (filters.domain)
+        qs.set("domain", filters.domain);
+    if (filters.id)
+        qs.set("id", filters.id);
+    if (filters.limit != null)
+        qs.set("limit", `${filters.limit}`);
+    const url = `${config.base}${SEARCH_PAGES_ENDPOINT}${qs.toString() ? `?${qs}` : ""}`;
+    const r = await getJson(url, config);
+    if (r.status === 404)
+        return { ok: false, status: 404, endpoint_missing: true, error: "search_pages endpoint not found on backend" };
+    if (!r.ok)
+        return { ok: false, status: r.status, error: r.error };
+    const pages = r.json?.data?.pages ?? r.json?.pages ?? [];
+    return { ok: true, status: r.status, pages };
+}
 /** Read a page's decoded source tree (must be owned by the account). */
 export async function getPageSource(config, pageId) {
     const url = `${config.base}${PAGE_SOURCE_ENDPOINT}?page_id=${encodeURIComponent(pageId)}`;

package/dist/tools/persistence.js

@@ -12,7 +12,7 @@
 import { z } from "zod";
 import { text } from "../mcp/response.js";
 import { readConfig, configFromHeaders } from "../persistence/config.js";
-import { buildRequestRedacted, buildUpdateRequestRedacted, buildAppendRequestRedacted, createPage, listOrganizations, listPages, getPageSource, updatePageSource, appendSection, } from "../persistence/webcake-client.js";
+import { buildRequestRedacted, buildUpdateRequestRedacted, buildAppendRequestRedacted, createPage, listOrganizations, listPages, searchPages, getPageSource, updatePageSource, appendSection, } from "../persistence/webcake-client.js";
 export function registerPersistenceTools(server, domain) {
     // Resolve config from THIS request's headers (remote per-user JWT) first, then env.
     const cfgFor = (extra) => readConfig(configFromHeaders(extra?.requestInfo?.headers));
@@ -107,6 +107,52 @@ export function registerPersistenceTools(server, domain) {
             return text({ ok: false, reason: "missing_env", missing_env: missing });
         return text(await listPages(config));
     });
+    // 10b) Find pages (search by name / domain / id) ----------------------------
+    // The lookup step before an edit: locate the page the user means by name,
+    // domain (custom OR default), and/or page id, then feed its id to get_page →
+    // (edit) → update_page/add_section. Filters are AND-combined server-side and
+    // results carry both domain fields so the model can disambiguate by URL.
+    //
+    // Searches via the dedicated /api/v1/ai/search_pages endpoint (proper DB query,
+    // not limited to the 50 most-recent). If that route is missing (older backend
+    // → 404) it FALLS BACK to listing pages and filtering client-side by name/id
+    // (domain search is unavailable in the fallback — list_pages omits domains).
+    server.tool("find_pages", "Searches the account's pages by name, domain, and/or page id so you can locate the page to edit, then pass its id to get_page → update_page/add_section. Filters are AND-combined (e.g. name='sale' + domain='shop.com'). Each result includes id, name, organization_id, custom_domain, default_domain, updated_at. With no filters it returns the most-recent pages (like list_pages). Needs WEBCAKE_API_BASE + WEBCAKE_JWT.", {
+        name: z.string().optional().describe("Case-insensitive substring of the page name to match."),
+        domain: z
+            .string()
+            .optional()
+            .describe("Case-insensitive substring of the page's domain (matches custom_domain OR default_domain)."),
+        page_id: z.string().optional().describe("Exact page id — narrows to that single page (useful to confirm it exists/owned)."),
+        limit: z.number().int().positive().max(100).optional().describe("Max results (default 50, capped at 100)."),
+    }, { title: "Find Webcake Pages", readOnlyHint: true, openWorldHint: true }, async ({ name, domain, page_id, limit }, extra) => {
+        const { config, missing } = cfgFor(extra);
+        if (!config)
+            return text({ ok: false, reason: "missing_env", missing_env: missing });
+        const res = await searchPages(config, { name, domain, id: page_id, limit });
+        if (!res.endpoint_missing) {
+            return text({ ok: res.ok, pages: res.pages, count: res.pages?.length ?? 0, status: res.status, error: res.error });
+        }
+        // Fallback: older backend without /search_pages — list and filter client-side.
+        const listed = await listPages(config);
+        if (!listed.ok)
+            return text({ ok: false, status: listed.status, error: listed.error });
+        let pages = listed.pages ?? [];
+        const nameQ = name?.toLowerCase();
+        if (nameQ)
+            pages = pages.filter((p) => p.name?.toLowerCase().includes(nameQ));
+        if (page_id)
+            pages = pages.filter((p) => `${p.id}` === page_id);
+        if (limit != null)
+            pages = pages.slice(0, limit);
+        return text({
+            ok: true,
+            pages,
+            count: pages.length,
+            via: "legacy_list_filter_fallback",
+            ...(domain ? { note: "Domain search is unavailable on this backend (list_pages omits domains); the domain filter was ignored." } : {}),
+        });
+    });
     // 11) Get page (read source) ------------------------------------------------
     server.tool("get_page", "Fetches an existing page's decoded source tree { page, popup, settings, options, cartConfigs } plus name and organization_id. Needs WEBCAKE_API_BASE + WEBCAKE_JWT.", { page_id: z.string().describe("The page id (from list_pages or a URL).") }, { title: "Get Webcake Page Source", readOnlyHint: true, openWorldHint: true }, async ({ page_id }, extra) => {
         const { config, missing } = cfgFor(extra);

package/dist/web-guide.js

@@ -78,14 +78,14 @@ function tile(name) {
 // ── i18n: per-language SEO metadata ───────────────────────────────────────────
 const META = {
     vi: {
-        title: "Webcake Landing MCP — AI dựng landing page Webcake bằng lời nói",
-        desc: "MCP server cho phép AI (Claude, Cursor, Windsurf…) dựng, kiểm tra và lưu thẳng landing page Webcake từ một câu mô tả. Không kéo-thả, không viết JSON, kết nối một lần là xong.",
+        title: "Webcake Landing MCP — AI tự dựng landing page Webcake cho bạn",
+        desc: "Bạn chỉ cần mô tả bằng lời, AI (Claude, Cursor, Windsurf…) sẽ tự dựng, tự kiểm tra và lưu landing page Webcake cho bạn. Không cần kéo-thả, không cần biết code, kết nối một lần là xong.",
         keywords: "Webcake, landing page, MCP, Model Context Protocol, AI, Claude, Cursor, Windsurf, tạo landing page bằng AI, no-code, COD, lead generation",
         locale: "vi_VN",
     },
     en: {
-        title: "Webcake Landing MCP — let AI build Webcake landing pages from a sentence",
-        desc: "An MCP server that lets AI (Claude, Cursor, Windsurf…) build, validate and save Webcake landing pages straight from a plain-language description. No drag-and-drop, no JSON, connect once.",
+        title: "Webcake Landing MCP — let AI build Webcake landing pages for you",
+        desc: "Just describe it in plain words and AI (Claude, Cursor, Windsurf…) builds, checks and saves a Webcake landing page for you. No drag-and-drop, no coding — connect once and you're set.",
         keywords: "Webcake, landing page, MCP, Model Context Protocol, AI, Claude, Cursor, Windsurf, AI website builder, no-code, COD, lead generation",
         locale: "en_US",
     },
@@ -95,210 +95,210 @@ const FAQ = {
     vi: [
         {
             q: "Webcake Landing MCP là gì?",
-            a: "Một MCP server dạy AI cách dựng trọn cấu trúc nguồn của landing page Webcake từ yêu cầu bằng lời, kiểm tra hợp lệ rồi lưu về tài khoản Webcake của bạn. Server lo phần khó; bạn chỉ mô tả và duyệt.",
+            a: "Là một công cụ giúp AI (như Claude, Cursor) tự dựng landing page Webcake cho bạn từ một câu mô tả, tự kiểm tra rồi lưu vào tài khoản Webcake của bạn. Công cụ lo phần khó; bạn chỉ cần mô tả và xem lại.",
         },
         {
             q: "Tôi có cần biết lập trình không?",
-            a: "Không. Bạn chỉ cần mô tả trang bằng ngôn ngữ tự nhiên trong AI (Claude, Cursor…). AI dùng các tool của server để dựng đúng mô hình element thật của Webcake.",
+            a: "Không. Bạn chỉ cần mô tả trang bằng lời, ngay trong ứng dụng AI mà bạn đang dùng. Mọi phần kỹ thuật để công cụ tự lo.",
         },
         {
             q: "Có miễn phí không?",
-            a: "Có. Server là mã nguồn mở và miễn phí. Bạn chỉ cần một tài khoản Webcake để lưu trang; các tool tham chiếu + kiểm tra còn chạy được mà không cần token.",
+            a: "Có. Công cụ miễn phí và mã nguồn mở. Bạn chỉ cần một tài khoản Webcake để lưu trang.",
         },
         {
-            q: "Dùng được với AI/IDE nào?",
-            a: "Claude Desktop, Claude Code, Cursor, Windsurf, Augment (VS Code), Codex, và claude.ai trên web — hay bất kỳ client nào hỗ trợ Model Context Protocol.",
+            q: "Dùng được với ứng dụng nào?",
+            a: "Claude (máy tính, web, Claude Code), Cursor, Windsurf, Augment, Codex — và bất kỳ ứng dụng AI nào hỗ trợ chuẩn kết nối MCP.",
         },
         {
-            q: "Token của tôi có an toàn không?",
-            a: "Có. Token chỉ là của riêng bạn, gửi qua header hoặc link cá nhân, không lưu lại; và mọi thao tác ghi đều mặc định xem trước (dry-run) trước khi thực sự lưu.",
+            q: "Thông tin của tôi có an toàn không?",
+            a: "Có. Mã đăng nhập là của riêng bạn và không bị lưu lại. Ngoài ra, mỗi lần lưu trang công cụ đều cho bạn xem trước, chắc chắn rồi mới thực hiện.",
         },
     ],
     en: [
         {
             q: "What is Webcake Landing MCP?",
-            a: "An MCP server that teaches AI how to build the full source structure of a Webcake landing page from a plain-language request, validate it, then save it to your Webcake account. The server does the hard part; you just describe and review.",
+            a: "It's a tool that lets AI (like Claude or Cursor) build a Webcake landing page for you from a single description, check it, then save it to your Webcake account. The tool does the hard part; you just describe and review.",
         },
         {
             q: "Do I need to know how to code?",
-            a: "No. You just describe the page in natural language in your AI (Claude, Cursor…). The AI uses the server's tools to build against Webcake's real element model.",
+            a: "No. You just describe the page in plain words, right inside the AI app you already use. The tool handles all the technical parts.",
         },
         {
             q: "Is it free?",
-            a: "Yes. The server is open-source and free. You only need a Webcake account to save pages; the reference and validation tools work without a token.",
+            a: "Yes. The tool is free and open-source. You only need a Webcake account to save pages.",
         },
         {
-            q: "Which AI / IDEs work with it?",
-            a: "Claude Desktop, Claude Code, Cursor, Windsurf, Augment (VS Code), Codex, and claude.ai on the web — or any client that supports the Model Context Protocol.",
+            q: "Which apps work with it?",
+            a: "Claude (desktop, web, Claude Code), Cursor, Windsurf, Augment, Codex — and any AI app that supports the MCP connection standard.",
         },
         {
-            q: "Is my token safe?",
-            a: "Yes. The token is yours alone, sent via a header or your personal link and never stored; and every write defaults to a preview (dry-run) before anything is actually saved.",
+            q: "Is my information safe?",
+            a: "Yes. Your login code is yours alone and is never stored. On top of that, every save shows you a preview first, so nothing happens until you're sure.",
         },
     ],
 };
 const T = {
     vi: {
-        sub: "Cho AI dựng & sửa landing page Webcake bằng lời nói",
-        running: "Server đang chạy",
-        leadPre: "Bạn gõ yêu cầu, AI (Claude, Cursor…) dựng nguyên cái landing page rồi ",
+        sub: "Để AI tự dựng & sửa landing page Webcake cho bạn, chỉ bằng lời nói",
+        running: "Đang hoạt động",
+        leadPre: "Bạn gõ yêu cầu, AI (như Claude, Cursor…) tự dựng cả trang landing page rồi ",
         leadGrad: "lưu thẳng vào tài khoản Webcake",
-        leadPost: " của bạn. Không kéo thả, không cài server — kết nối một lần là xong.",
+        leadPost: " của bạn. Không cần kéo thả, không cần cài đặt phức tạp — kết nối một lần là xong.",
         ctaStart: "Bắt đầu kết nối",
-        ctaStar: "Star trên GitHub",
-        flowH2: "Mô hình hoạt động",
+        ctaStar: "Tặng sao trên GitHub",
+        flowH2: "Mọi thứ diễn ra thế nào",
         flow: [
-            { icon: "bulb", t: "Bạn", s: "ý tưởng" },
-            { icon: "brain", t: "Trợ lý AI", s: "Claude · Codex · Cursor,etc..." },
-            { icon: "server", t: "MCP", s: "webcake-landing" },
-            { icon: "window", t: "WebCake", s: "trang thật" },
+            { icon: "bulb", t: "Bạn", s: "ý tưởng của bạn" },
+            { icon: "brain", t: "Trợ lý AI", s: "Claude · Cursor · Codex…" },
+            { icon: "server", t: "Webcake MCP", s: "cầu nối thông minh" },
+            { icon: "window", t: "Webcake", s: "trang web thật" },
         ],
-        flowCap: "Bạn mô tả bằng lời → AI học mô hình thật từ MCP → MCP dựng JSON + kiểm tra → lưu thành trang thật trên WebCake. Bạn nhận link, mở editor, publish.",
-        howH2: "Cách hoạt động",
+        flowCap: "Bạn nói ý tưởng → AI hiểu cách Webcake hoạt động → tự dựng trang và tự kiểm tra → trang được lưu thật vào Webcake. Bạn nhận link, mở lên xem và đăng trang.",
+        howH2: "Vì sao bạn không cần biết kỹ thuật",
         how: [
             {
                 icon: "brain",
-                t: "AI học mô hình thật",
-                d: 'Danh mục element, <code class="inl">specials</code>, hệ toạ độ và sự kiện của Webcake — lấy trực tiếp qua các tool của server.',
+                t: "AI lo phần dựng trang",
+                d: "AI tự sắp xếp chữ, hình ảnh, nút bấm, biểu mẫu… theo đúng chuẩn của Webcake. Bạn không phải đụng tới.",
             },
             {
                 icon: "check2",
-                t: "Server lo phần khó",
-                d: "Dựng JSON nguồn, kiểm tra hợp lệ (validate) rồi lưu trang về backend Webcake — bạn khỏi đụng schema.",
+                t: "Hệ thống tự kiểm tra",
+                d: "Trang được dựng và kiểm tra tự động trước khi lưu, nên hiếm khi lỗi — bạn không cần biết gì về kỹ thuật.",
             },
             {
                 icon: "edit",
-                t: "Bạn chỉ duyệt",
-                d: "Mở trang trong editor Webcake, chỉnh vài chỗ nếu thích, lưu lại để render — xong.",
+                t: "Bạn chỉ việc xem lại",
+                d: "Mở trang trong trình chỉnh sửa Webcake, sửa vài chỗ nếu thích, bấm lưu là trang hiển thị. Vậy là xong.",
             },
         ],
-        buildH2: "Bạn dựng được những gì",
+        buildH2: "Bạn có thể tạo những gì",
         uses: [
             {
                 icon: "magnet",
-                t: "Trang thu lead",
-                e: '"Trang waitlist cho SaaS — hero, 3 lợi ích, form thu email."',
+                t: "Trang thu khách tiềm năng",
+                e: '"Trang đăng ký nhận tin cho ứng dụng — phần đầu nổi bật, 3 lợi ích, ô nhập email."',
             },
             {
                 icon: "cart",
-                t: "Bán hàng COD / online",
-                e: '"Trang một sản phẩm — gallery, giá, biến thể, form đặt hàng có giỏ."',
+                t: "Bán hàng (COD / online)",
+                e: '"Trang bán một sản phẩm — ảnh, giá, lựa chọn mẫu mã, form đặt hàng."',
             },
             {
                 icon: "ticket",
-                t: "Sự kiện / webinar",
-                e: '"Trang đăng ký — đếm ngược, agenda, form đăng ký."',
+                t: "Sự kiện / hội thảo",
+                e: '"Trang đăng ký tham gia — đồng hồ đếm ngược, lịch trình, form đăng ký."',
             },
             {
                 icon: "mail",
                 t: "Thiệp mời",
-                e: '"Thiệp cưới — tên, ngày, bản đồ, form RSVP."',
+                e: '"Thiệp cưới — tên cô dâu chú rể, ngày giờ, bản đồ, form xác nhận tham dự."',
             },
             {
                 icon: "phone",
-                t: "Quảng bá app",
-                e: '"Mockup điện thoại, danh sách tính năng, nút App Store + Google Play."',
+                t: "Giới thiệu ứng dụng",
+                e: '"Ảnh điện thoại, danh sách tính năng, nút tải trên App Store và Google Play."',
             },
             {
                 icon: "flame",
-                t: "Flash sale",
-                e: '"Đồng hồ đếm ngược to, lưới sản phẩm giảm giá, nút Mua dính."',
+                t: "Sale chớp nhoáng",
+                e: '"Đồng hồ đếm ngược cỡ lớn, lưới sản phẩm giảm giá, nút Mua luôn nổi."',
             },
         ],
         connectH2: "Kết nối — chọn 1 trong 2 cách",
-        m1Tag: "Cách ① · npx — chạy trên máy bạn",
-        m1Sub: "Hợp khi dùng cá nhân, muốn toàn quyền. Cần cài Node.js 18+.",
+        m1Tag: "Cách ① · Cài trên máy của bạn",
+        m1Sub: "Phù hợp khi bạn tự dùng và muốn chủ động. Cần có sẵn Node.js (một phần mềm miễn phí giúp chạy lệnh).",
         m1Steps: [
-            '<b>Cài Node.js 18+</b> nếu chưa có. Kiểm tra bằng <code class="inl">node -v</code>; chưa có thì tải ở <b>nodejs.org</b>.',
-            "<b>Mở Terminal và chạy:</b><pre>npx -y webcake-landing-mcp install</pre>",
-            '<b>Làm theo hỏi đáp:</b> chọn môi trường (<code class="inl">prod</code>) → đăng nhập Webcake qua trình duyệt (hoặc dán JWT) → chọn IDE (Claude Desktop / Cursor / Claude Code…).',
-            '<b>Khởi động lại IDE</b> → thấy <code class="inl">webcake-landing</code> trong danh sách MCP là xong.',
+            "<b>Cài Node.js</b> (miễn phí) nếu máy chưa có — tải tại <b>nodejs.org</b>. Đây là phần mềm giúp máy chạy được công cụ ở bước sau.",
+            "<b>Mở Terminal</b> (cửa sổ gõ lệnh — trên Mac tìm “Terminal”, trên Windows tìm “Command Prompt”), dán dòng dưới đây rồi nhấn Enter:<pre>npx -y webcake-landing-mcp install</pre>",
+            '<b>Làm theo hướng dẫn hiện ra:</b> chọn <code class="inl">prod</code> → đăng nhập Webcake bằng trình duyệt → chọn ứng dụng AI bạn đang dùng (Claude, Cursor…).',
+            '<b>Mở lại ứng dụng AI.</b> Thấy chữ <code class="inl">webcake-landing</code> xuất hiện là đã kết nối thành công.',
         ],
-        m1Note: "Muốn cấu hình mọi IDE một phát:",
-        m2Tag: "Cách ② · URL remote — không cần cài gì",
-        m2Sub: "Hợp khi máy không có Node.js, dùng theo nhóm, hoặc dùng claude.ai trên web.",
+        m1Note: "Muốn cài cho tất cả ứng dụng cùng lúc, dùng dòng lệnh này:",
+        m2Tag: "Cách ② · Dùng link — không cần cài gì",
+        m2Sub: "Phù hợp khi máy không cài được phần mềm, dùng theo nhóm, hoặc dùng Claude trên web (claude.ai).",
         m2Steps: [
-            '<b>Lấy link cá nhân</b> (đã gắn sẵn token) — mở trang sau rồi bấm <b>Copy</b>:<a class="btn" href="{REMOTE}">Mở {REMOTE_HOST} {ARROW}</a>',
-            '<b>Mở phần thêm connector</b> trong client:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: mở file <code class="inl">.mcp.json</code>',
-            "<b>Dán link</b> vừa copy (có dạng):<pre>{ENDPOINT}?jwt=&lt;TOKEN&gt;</pre>",
-            "<b>Bấm Add</b> (hoặc lưu file) → đợi kết nối → xong. Icon Webcake xanh hiện lên là chạy được.",
+            '<b>Lấy link riêng của bạn</b> (đã gắn sẵn mã đăng nhập) — mở trang dưới đây rồi bấm <b>Copy</b>:<a class="btn" href="{REMOTE}">Mở {REMOTE_HOST} {ARROW}</a>',
+            '<b>Vào nơi thêm kết nối</b> trong ứng dụng:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: mở file <code class="inl">.mcp.json</code>',
+            "<b>Dán link</b> bạn vừa copy (trông giống như):<pre>{ENDPOINT}?jwt=&lt;MÃ CỦA BẠN&gt;</pre>",
+            "<b>Bấm Add</b> (hoặc lưu file) rồi chờ một chút. Khi biểu tượng Webcake chuyển xanh là dùng được.",
         ],
-        m2Note: "⚠️ Link chứa token cá nhân — coi như mật khẩu, đừng chia sẻ, luôn dùng HTTPS.",
-        afterH2: "Sau khi kết nối, bạn nói được",
+        m2Note: "⚠️ Link có chứa mã đăng nhập riêng của bạn — hãy coi như mật khẩu, đừng chia sẻ cho ai.",
+        afterH2: "Kết nối xong, bạn chỉ cần nói",
         examples: [
             {
                 icon: "wand",
-                t: '"Dựng landing bán khoá học, tông xanh, có form đăng ký + nút Zalo."',
+                t: '"Dựng trang bán khóa học, tông màu xanh, có form đăng ký và nút Zalo."',
             },
             {
                 icon: "edit",
-                t: "\"Mở trang <i>sale-hè</i>, đổi tiêu đề thành 'Giảm 50%', nút sang màu đỏ.\"",
+                t: "\"Mở trang <i>sale-hè</i>, đổi tiêu đề thành 'Giảm 50%', đổi nút sang màu đỏ.\"",
             },
             {
                 icon: "clock",
-                t: '"Thêm section đếm ngược + 3 testimonial vào cuối trang."',
+                t: '"Thêm phần đếm ngược và 3 lời nhận xét của khách vào cuối trang."',
             },
         ],
         newH2: "Có gì mới",
         newBadge: "MỚI",
-        clMore: "Xem toàn bộ changelog",
+        clMore: "Xem tất cả thay đổi",
         faqH2: "Câu hỏi thường gặp",
-        starH2: "Thấy hữu ích? Thả cho dự án một star",
-        starP: "Đây là dự án mã nguồn mở — mỗi star là một liều động viên giữ nó phát triển và giúp người khác tìm thấy nó.",
-        starBtn: "Star trên GitHub",
+        starH2: "Thấy hữu ích? Tặng dự án một ngôi sao nhé",
+        starP: "Đây là dự án miễn phí, mã nguồn mở — mỗi ngôi sao là một lời động viên để dự án tiếp tục phát triển và giúp nhiều người biết đến hơn.",
+        starBtn: "Tặng sao trên GitHub",
         footGuide: "Hướng dẫn",
         switchLabel: "English",
     },
     en: {
-        sub: "Let AI build & edit Webcake landing pages from plain words",
-        running: "Server is running",
-        leadPre: "You type a request, AI (Claude, Cursor…) builds the whole landing page and ",
+        sub: "Let AI build & edit your Webcake landing pages, just by talking to it",
+        running: "Up and running",
+        leadPre: "You type what you want, AI (like Claude or Cursor) builds the whole landing page and ",
         leadGrad: "saves it straight to your Webcake account",
-        leadPost: ". No drag-and-drop, no server to host — connect once and you're set.",
+        leadPost: ". No drag-and-drop, no complicated setup — connect once and you're done.",
         ctaStart: "Get connected",
         ctaStar: "Star on GitHub",
-        flowH2: "How it flows",
+        flowH2: "How it all happens",
         flow: [
             { icon: "bulb", t: "You", s: "your idea" },
-            { icon: "brain", t: "AI assistant", s: "Claude · Codex · Cursor,etc..." },
-            { icon: "server", t: "MCP", s: "webcake-landing" },
-            { icon: "window", t: "WebCake", s: "a real page" },
+            { icon: "brain", t: "AI assistant", s: "Claude · Cursor · Codex…" },
+            { icon: "server", t: "Webcake MCP", s: "the smart bridge" },
+            { icon: "window", t: "Webcake", s: "a real page" },
         ],
-        flowCap: "You describe it in words → the AI learns the real model from the MCP → the MCP builds the JSON + validates → it's saved as a real WebCake page. You get a link, open the editor, publish.",
-        howH2: "How it works",
+        flowCap: "You say your idea → the AI learns how Webcake works → it builds the page and checks it → the page is saved for real in Webcake. You get a link, open it, and publish.",
+        howH2: "Why you don't need to be techy",
         how: [
             {
                 icon: "brain",
-                t: "AI learns the real model",
-                d: "Webcake's element catalog, <code class=\"inl\">specials</code>, coordinate system and events — pulled straight from this server's tools.",
+                t: "AI does the building",
+                d: "The AI arranges the text, images, buttons and forms the way Webcake expects. You never have to touch any of it.",
             },
             {
                 icon: "check2",
-                t: "The server does the hard part",
-                d: "Builds the source JSON, validates it, then saves the page to the Webcake backend — you never touch the schema.",
+                t: "It checks itself",
+                d: "Every page is built and checked automatically before it's saved, so things rarely break — no technical know-how needed.",
             },
             {
                 icon: "edit",
                 t: "You just review",
-                d: "Open the page in the Webcake editor, tweak if you like, save to render — done.",
+                d: "Open the page in the Webcake editor, tweak anything you like, hit save and it goes live. That's it.",
             },
         ],
         buildH2: "What you can build",
         uses: [
             {
                 icon: "magnet",
-                t: "Lead-gen page",
-                e: '"A SaaS waitlist — hero, 3 benefits, an email-capture form."',
+                t: "Lead-capture page",
+                e: '"A waitlist for an app — a bold header, 3 benefits, an email box."',
             },
             {
                 icon: "cart",
-                t: "COD / online store",
-                e: '"A one-product page — gallery, price, variations, an order form with cart."',
+                t: "Sell products (COD / online)",
+                e: '"A one-product page — photos, price, options, an order form."',
             },
             {
                 icon: "ticket",
                 t: "Event / webinar",
-                e: '"A registration page — countdown, agenda, sign-up form."',
+                e: '"A sign-up page — a countdown, the agenda, a registration form."',
             },
             {
                 icon: "mail",
@@ -308,38 +308,38 @@ const T = {
             {
                 icon: "phone",
                 t: "App promo",
-                e: '"Phone mockups, feature list, App Store + Google Play buttons."',
+                e: '"Phone photos, a feature list, App Store and Google Play buttons."',
             },
             {
                 icon: "flame",
                 t: "Flash sale",
-                e: '"A big countdown, a discounted product grid, a sticky Buy button."',
+                e: '"A big countdown, a grid of discounted products, a Buy button that follows you."',
             },
         ],
         connectH2: "Connect — pick one of two ways",
-        m1Tag: "Way ① · npx — runs on your machine",
-        m1Sub: "Best for personal use and full control. Needs Node.js 18+.",
+        m1Tag: "Way ① · Install on your computer",
+        m1Sub: "Best when it's just for you and you want full control. Needs Node.js (a free program that runs commands).",
         m1Steps: [
-            '<b>Install Node.js 18+</b> if you don\'t have it. Check with <code class="inl">node -v</code>; otherwise grab it from <b>nodejs.org</b>.',
-            "<b>Open a terminal and run:</b><pre>npx -y webcake-landing-mcp install</pre>",
-            '<b>Follow the prompts:</b> pick an environment (<code class="inl">prod</code>) → sign in to Webcake in the browser (or paste a JWT) → pick your IDE (Claude Desktop / Cursor / Claude Code…).',
-            '<b>Restart your IDE</b> → see <code class="inl">webcake-landing</code> in the MCP list and you\'re done.',
+            "<b>Install Node.js</b> (free) if you don't have it — get it at <b>nodejs.org</b>. It's the program that lets your computer run the tool in the next step.",
+            "<b>Open a terminal</b> (the command window — “Terminal” on Mac, “Command Prompt” on Windows), paste the line below and press Enter:<pre>npx -y webcake-landing-mcp install</pre>",
+            '<b>Follow the prompts:</b> choose <code class="inl">prod</code> → sign in to Webcake in your browser → pick the AI app you use (Claude, Cursor…).',
+            '<b>Reopen your AI app.</b> When you see <code class="inl">webcake-landing</code> listed, you\'re connected.',
         ],
-        m1Note: "Configure every IDE at once:",
-        m2Tag: "Way ② · Remote URL — nothing to install",
-        m2Sub: "Best when you have no Node.js, work in a team, or use claude.ai on the web.",
+        m1Note: "Set it up for every app at once with this command:",
+        m2Tag: "Way ② · Use a link — nothing to install",
+        m2Sub: "Best when you can't install software, work in a team, or use Claude on the web (claude.ai).",
         m2Steps: [
-            '<b>Get your personal link</b> (token baked in) — open the page below and hit <b>Copy</b>:<a class="btn" href="{REMOTE}">Open {REMOTE_HOST} {ARROW}</a>',
-            '<b>Open the add-connector area</b> in your client:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: open <code class="inl">.mcp.json</code>',
-            "<b>Paste the link</b> you copied (looks like):<pre>{ENDPOINT}?jwt=&lt;TOKEN&gt;</pre>",
-            "<b>Hit Add</b> (or save the file) → wait for it to connect → done. A green Webcake icon means it's live.",
+            '<b>Get your personal link</b> (your login is built in) — open the page below and hit <b>Copy</b>:<a class="btn" href="{REMOTE}">Open {REMOTE_HOST} {ARROW}</a>',
+            '<b>Go to where you add a connection</b> in your app:<br>• claude.ai: <i>Settings → Connectors → Add custom connector</i><br>• Cursor / Claude Code: open <code class="inl">.mcp.json</code>',
+            "<b>Paste the link</b> you just copied (it looks like):<pre>{ENDPOINT}?jwt=&lt;YOUR CODE&gt;</pre>",
+            "<b>Hit Add</b> (or save the file) and wait a moment. When the Webcake icon turns green, you're good to go.",
         ],
-        m2Note: "⚠️ The link carries your personal token — treat it like a password, never share it, always use HTTPS.",
-        afterH2: "Once connected, you can say",
+        m2Note: "⚠️ The link contains your personal login code — treat it like a password and never share it.",
+        afterH2: "Once connected, just say",
         examples: [
             {
                 icon: "wand",
-                t: '"Build a landing page to sell a course, green theme, a sign-up form + a Zalo button."',
+                t: '"Build a page to sell a course, green theme, with a sign-up form and a Zalo button."',
             },
             {
                 icon: "edit",
@@ -347,15 +347,15 @@ const T = {
             },
             {
                 icon: "clock",
-                t: '"Add a countdown section + 3 testimonials to the bottom of the page."',
+                t: '"Add a countdown and 3 customer reviews to the bottom of the page."',
             },
         ],
         newH2: "What's new",
         newBadge: "NEW",
-        clMore: "See full changelog",
+        clMore: "See all changes",
         faqH2: "FAQ",
-        starH2: "Find it useful? Drop the project a star",
-        starP: "It's an open-source project — every star keeps it moving and helps others discover it.",
+        starH2: "Find it useful? Give the project a star",
+        starP: "It's a free, open-source project — every star is a little encouragement to keep it growing and helps more people find it.",
         starBtn: "Star on GitHub",
         footGuide: "Docs",
         switchLabel: "Tiếng Việt",
@@ -456,7 +456,7 @@ export function guideHtml(origin, lang = "vi") {
 <html lang="${L}"><head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
-<script>(function(){try{var t=localStorage.getItem('wc-theme');if(t==='dark'||t==='light')document.documentElement.setAttribute('data-theme',t);}catch(e){}try{if('scrollRestoration' in history)history.scrollRestoration='manual';}catch(e){}})();</script>
+<script>(function(){document.documentElement.classList.add('js');try{var t=localStorage.getItem('wc-theme');if(t==='dark'||t==='light')document.documentElement.setAttribute('data-theme',t);}catch(e){}try{if('scrollRestoration' in history)history.scrollRestoration='manual';}catch(e){}})();</script>
 <title>${m.title}</title>
 <meta name="description" content="${m.desc}">
 <meta name="keywords" content="${m.keywords}">
@@ -692,10 +692,14 @@ export function guideHtml(origin, lang = "vi") {
     .flow .wire .pkt{display:none}
   }
   @media(prefers-reduced-motion:no-preference){
-    @supports (animation-timeline:view()){
-      .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
-      @keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
-    }
+    /* One-shot reveal: JS adds .in the first time an element scrolls into view and
+       never removes it. Gated on .js so content is always visible without
+       JavaScript. We deliberately DON'T use a scroll-driven (animation-timeline)
+       reveal here — that ties opacity to scroll position and fades content back
+       out when you scroll up, which reads as the page flickering. */
+    .js .reveal{opacity:0;transform:translateY(24px);
+      transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
+    .js .reveal.in{opacity:1;transform:none}
     .hero-in{animation:rise2 .8s cubic-bezier(.2,.7,.2,1) both}
     @keyframes rise2{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
   }
@@ -843,6 +847,20 @@ export function guideHtml(origin, lang = "vi") {
   window.addEventListener('beforeunload',saveScroll);
   window.addEventListener('pagehide',saveScroll);
 
+  // One-shot reveal-on-scroll. Each .reveal fades in once when it enters the
+  // viewport and then keeps its class forever — replacing the old scroll-driven
+  // CSS reveal that re-ran (and flickered) when scrolling back up. Falls back to
+  // showing everything if IntersectionObserver is missing.
+  var reveals=[].slice.call(document.querySelectorAll('.reveal'));
+  if(window.IntersectionObserver&&reveals.length){
+    var io=new IntersectionObserver(function(entries){
+      entries.forEach(function(en){if(en.isIntersecting){en.target.classList.add('in');io.unobserve(en.target);}});
+    },{rootMargin:'0px 0px -8% 0px'});
+    reveals.forEach(function(el){io.observe(el);});
+  }else{
+    reveals.forEach(function(el){el.classList.add('in');});
+  }
+
   // Enable smooth scrolling only after the browser has restored scroll position
   // on (re)load — applying it globally animates that restore into a jerky scroll.
   window.addEventListener('load',function(){requestAnimationFrame(function(){html.classList.add('smooth');});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcake-landing-mcp",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "MCP server exposing Webcake landing-page element schemas + AI usage hints, and persisting LLM-generated page sources to a Webcake backend.",
   "mcpName": "io.github.vuluu2k/webcake-landing-mcp",
   "type": "module",
@@ -14,10 +14,15 @@
   "engines": {
     "node": ">=18"
   },
+  "author": "vuluu2k (https://github.com/vuluu2k)",
+  "homepage": "https://mcp.toolvn.io.vn",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuluu2k/webcake-landing-mcp.git"
   },
+  "bugs": {
+    "url": "https://github.com/vuluu2k/webcake-landing-mcp/issues"
+  },
   "scripts": {
     "build": "node scripts/gen-changelog.mjs && tsc && node scripts/copy-assets.mjs",
     "start": "node dist/index.js",