iNET UI MCP server — Kết nối AI với hệ thống thiết kế

Vấn đề mà đội nào cũng gặp

✕ Không có MCP

Mã màu, khoảng cách chép tay vào codeGiá trị cứng, lệch dần sau mỗi lần đổi thiết kế

AI tự đoán màu, tự vẽ icon, lấy nhầm logoSản phẩm lệch thương hiệu

Marketing cần một trang giới thiệu là phải xếp hàng chờ lập trình viênQuy trình bị nghẽn

Mỗi công cụ AI một cách cài, một kiểu khoá APINgười không biết code bỏ cuộc

✓ Với iNET UI MCP server

AI đọc giá trị thiết kế thẳng từ mã nguồnChỉ ra chỗ viết cứng, luôn khớp bản mới nhất

AI dùng đúng component, bộ icon và logo, mascot chính thức của iNETĐồng nhất thương hiệu

Marketing tự tạo trang từ mẫu có sẵn bằng lời nóiXem bản nháp, ưng rồi mới xuất bản

Một địa chỉ cho cả công cụ lập trình lẫn ứng dụng chatĐăng nhập bằng tài khoản iNET

Tính năng

Tools, resources và prompts — được tổ chức theo đối tượng để bạn tìm đúng công cụ cần dùng.

generate_landing_page

Tạo trang giới thiệu từ mẫu có sẵn — chỉ cần nội dung, trả về đường dẫn bản nháp để xem trước.

Ví dụgenerate_landing_page({ template_id: "oneseries-01", ... })

Output

Đã ghi bản nháp: https://viui.inet.vn/lp/crm-pro
Trạng thái: NHÁP — cần đăng nhập @inet.vn
→ publish_landing_page() khi đã ưng

Mới

get_component_api

Xem API đầy đủ của 54 Vi* components — props, slots, emits, defaults.

Ví dụget_component_api("ViDataTable")

Output

Props: items, headers, loading, sortBy
Slots: top, bottom, item
Emits: update:sortBy

search_blocks

Tìm UI block có sẵn theo từ khoá — hero, pricing, cta, features...

Ví dụsearch_blocks("hero cta")

Output

Found: hero-with-cta, hero-split, hero-minimal
→ get_block("hero-with-cta")

design-system-qa

Hỏi về design system bằng tiếng Việt — components, tokens, blocks, conventions.

Ví dụSpacing nào dùng giữa các section?

Output

Dùng var(--sp-48) hoặc var(--sp-64) giữa sections.
Grids: 8pt system (4, 8, 12, 16, 24, 32, 48, 64px)

Mới

get_icon_usage

Bộ icon viui-icons (outline + duotone) theo phong cách iNET DNA — tìm bằng list_icons, lấy code dán được ngay.

Ví dụget_icon_usage("email-server")

Output

import { ViIcon } from '@inet/ui'
<ViIcon icon="inet-i:email-server" />

Xem MCP hoạt động

Nhờ AI bằng một câu — kết quả hiện ra ngay, đúng thứ AI nhận về từ MCP.

AI agentinet-ui · đã kết nối

Cho mình bộ nút bấm theo thương hiệu iNET.

inet-ui · list_dna_buttons({ group: "A" }) // theme: system, radius: full ✓ 6 mẫu

6 mẫu nút DNA nhóm iNET Brand — theo theme trang của bạn, bo tròn mặc định. Cần góc khác (sm, md, xl, 2xl…) cứ nói:

A-01 · Tactical Primeenterprise

A-04 · Layered Chargepremium

A-06 · Radial Burstgradient

A-08 · Mesh Shiftgradient

A-09 · Circuit Dualengineering

A-10 · Brand Spectrumgradient

Xem nút chạy thật trong Storybook ↗Nội dung = đúng kết quả tool trả về

Kiến trúc hệ thống MCP

iNET UI MCP server đóng vai trò trung tâm, giúp AI truy cập Design System an toàn và chính xác.

Host

AI Host

Claude, ChatGPT, Cursor, VS Code…

MCP · JSON-RPC 2.0

MCP Server

Đọc dữ liệu

Tokens
Components
Icons
Nút DNA
Thương hiệu
Ảnh & mẫu trang

Dữ liệu thiết kế iNET

Cùng nguồn với Storybook và assets.inet.vn

iNET UI MCP server hoạt động như Hub an toàn: AI Host đăng nhập bằng tài khoản iNET (OAuth 2.1), server đọc token, component, icon, nút DNA, tài nguyên thương hiệu và mẫu trang theo chuẩn MCP, rồi trả về đúng ngữ cảnh để AI sinh code tuân thủ Design System.

Kết nối iNET UI MCP server trong 3 bước

AI của bạn dùng đúng bộ thiết kế iNET — trong công cụ lập trình hay ứng dụng chat.

Chọn công cụ bạn dùng

Không cần code

Công cụ lập trình

✓ đã có người trong công ty dùng · không dấu: làm theo hướng dẫn chính thức của hãng

Sao chép, dán vào đúng chỗ

Claude Code

Chạy một lần, dùng được cho mọi project. Bỏ --scope user nếu chỉ muốn dùng trong project đang mở.

Terminal

claude mcp add --transport http --scope user \
  inet-ui https://viui.inet.vn/mcp

Đăng nhập iNET — một lần

Đã từng thêm với tên inet-viui? Chạy claude mcp remove inet-viui trước, để không bị trùng.
Khởi động lại công cụ, rồi nhờ AI: “Dùng tool list_blocks để xem danh sách block”.
Trình duyệt tự mở — đăng nhập iNET, quay lại là dùng được.

Không thêm header Authorization — Claude Code tự lo đăng nhập; dán token vào sẽ báo lỗi kết nối thay vì mở trình duyệt.

Cách kết nối khác: dùng khoá API
Cho CI, agent, script — hoặc khi không muốn bấm đăng nhập

Mở viui.inet.vn/auth/mcp/setup, đăng nhập iNET một lần trên trình duyệt để lấy khoá (hạn 1 năm, quyền mcp:invoke).

Claude Code:trang trả sẵn câu lệnh claude mcp add đã kèm khoá — dán vào terminal, không mở cửa sổ đăng nhập lần nào.
CI, agent, script:đặt khoá vào header Authorization: Bearer viui_sk_…. Khoá không phụ thuộc phiên SSO nên chạy liên tục.

Thu hồi khoá tại Admin → Quyền truy cập MCP.

Kết nối không được? Xem Hỏi đáp

Thử ngay: nhờ AI tạo một trang giới thiệu

Bạn nói bằng tiếng Việt, AI dựng trang đúng màu và bố cục iNET — có 6 mẫu cho marketing.

Ra mắt sản phẩm
Chiến dịch dịch vụ
Khuyến mãi dịch vụ
Tên miền & Hosting
OneSeries 01
Sự kiện

Bước 1
Xem có những mẫu nào
Cho tôi xem các mẫu trang giới thiệu đang có.
Bước 2
Nói nội dung bạn muốn
Tạo trang khuyến mãi hosting tháng 9, giảm 30%, hotline 1900 9250, dùng mẫu OneSeries 01.
Không cần JSON hay bảng biểu — nói như với đồng nghiệp.
Bước 3
Xem bản nháp, sửa bằng lời
AI trả đường dẫn xem trước — chỉ người đăng nhập @inet.vn mở được. Sửa tiếp: “Đổi tiêu đề thành…”, “Bỏ phần bảng giá.”
Bước 4
Xuất bản khi đã ưng
Xuất bản trang này.
Trang thành viui.inet.vn/lp/tên-trang. Trước bước này chưa có gì ra ngoài.

Vướng ở đâu, hoặc kết quả chưa dùng được? Nói với AI: “Gửi góp ý cho team iNET UI: …” — góp ý vào thẳng danh sách việc của team, kèm ngữ cảnh.

Ứng dụng thực tế

Những việc bạn nhờ AI làm mỗi ngày — và tool nào của iNET UI MCP server làm việc đó.

Soát code theo chuẩn thương hiệu
“Soát file này xem có sai chuẩn iNET không?”
AI chỉ đúng dòng dùng sai màu trạng thái, thời lượng chuyển động lệch thang, icon không đủ tương phản — kèm cách sửa.
Toolvalidate_brand_usagesuggest_token
Dựng trang từ 19 block có sẵn
“Làm trang giới thiệu có hero, bảng giá và phần đánh giá.”
AI chọn block phù hợp (hero, bảng giá 3 gói, đánh giá khách hàng…), lấy mã nguồn dùng component và token của iNET, rồi ghép thành trang.
Toollist_blocksget_block
Chuyển code Vuetify sang iNET UI
“Đổi component này từ Vuetify sang iNET UI.”
AI tra API từng component (props, slot, sự kiện) rồi đổi v-btn → ViButton, v-card → ViCard, v-data-table → ViDataTable cho đúng cách dùng.
Toolmigrate-to-viuiget_component_api
Ảnh và logo đúng thương hiệu
“Cần ảnh hero ngành công nghệ và logo OneMail.”
Nhận ảnh CC0 dùng thương mại được (đã lọc ảnh có mặt người) và logo chính thức từ kho thương hiệu — link dán thẳng vào trang.
Toolfind_images_for_sectionlist_brand_assets

Chuẩn hóa

MCP protocol chuẩn mở — tương thích mọi MCP client, không vendor lock-in.

Dễ mở rộng

Thêm tool hoặc resource mới trong vài phút — chỉ cần define schema và handler.

Đa nền tảng

Claude, ChatGPT, Copilot, Cursor, Gemini, VS Code, Windsurf — 1 địa chỉ cho tất cả.

AI-Native

Thiết kế từ đầu cho AI-first development — không phải REST API bọc lại.

Câu hỏi thường gặp

Giải đáp những thắc mắc phổ biến nhất về iNET UI MCP server.

MCP Server là gì và tại sao nó quan trọng với Design System?

MCP (Model Context Protocol) Server là giao thức mở cho phép các công cụ AI (Cursor, Claude, VS Code...) kết nối trực tiếp và lấy ngữ cảnh thực tế từ Design System của bạn. Thay vì AI chỉ dựa vào mô tả hoặc ảnh chụp, MCP Server cung cấp tokens, components, variables, spacing, typography và quy tắc thiết kế một cách chính xác, giúp AI sinh code tuân thủ nghiêm ngặt Design System.

Lợi ích lớn nhất so với cách làm truyền thống là gì?

Giảm đáng kể lỗi không nhất quán giữa Design và Code. AI hiểu rõ toàn bộ Design System (tokens, components, theming, naming convention) nên sinh ra code sạch, đúng chuẩn và dễ bảo trì hơn. Đồng thời giúp đội ngũ tiết kiệm rất nhiều thời gian review và chỉnh sửa.

Server dùng protocol gì?

iNET UI MCP server sử dụng Streamable HTTP (JSON-RPC 2.0) kết hợp Server-Sent Events (SSE). Hiện tại hoạt động ở chế độ stateless — mỗi request tạo server instance mới để đảm bảo tính ổn định và dễ scale.

Design System cần chuẩn bị gì để MCP Server hoạt động hiệu quả?

Để MCP Server hoạt động tốt nhất, Design System nên: xây dựng Tokens & Variables có hệ thống (colors, spacing, typography, radii...), tổ chức Components với variants rõ ràng, có tài liệu naming convention và theming rõ ràng, cấu trúc thư mục và file tokens dễ đọc. Càng có cấu trúc tốt, AI càng sinh code chính xác.

Có cần API key không?

Không cần API key — chỉ cần đăng nhập bằng tài khoản iNET. Lần kết nối đầu tiên, công cụ tự mở trình duyệt để bạn đăng nhập; lệnh và cấu hình không thay đổi. Tài khoản @inet.vn dùng được ngay, ngoài tổ chức cần được cấp quyền. Riêng CI/tự động hoá (không mở được trình duyệt) thì dùng API key có quyền mcp:invoke.

Có rate limit không?

Có. Mỗi địa chỉ IP gửi được 60 yêu cầu/phút, cho phép dồn tối đa 100 yêu cầu một lúc; vượt ngưỡng thì server trả lỗi 429 và bạn chỉ cần thử lại sau ít giây. Chúng tôi sẽ điều chỉnh theo quy mô sử dụng của từng team.

Kết nối không được thì kiểm tra gì?

Mở viui.inet.vn/mcp/health — thấy "status":"ok" là server đang chạy. Server sống mà công cụ vẫn báo lỗi 401 thì vấn đề nằm ở phiên đăng nhập: đăng nhập lại trong chính công cụ đó. Vẫn không được thì nói với AI “Gửi góp ý cho team iNET UI: …” kèm tên công cụ bạn dùng.

Tôi có cần biết code để cài đặt và sử dụng iNET UI MCP server không?

Không bắt buộc. Dùng Claude Desktop thì chỉ cần dán một địa chỉ vào mục Connectors, không sửa file nào. Dùng công cụ lập trình thì mục Cài đặt có sẵn cấu hình cho từng công cụ — sao chép, dán vào đúng chỗ, rồi đăng nhập iNET khi được hỏi.

iNET UI MCP server có thay thế Designer hoặc Developer không?

Không. iNET UI MCP server là công cụ hỗ trợ mạnh mẽ giúp AI hiểu và tôn trọng Design System tốt hơn. Designer vẫn chịu trách nhiệm xây dựng và duy trì system, Developer vẫn cần review và tinh chỉnh code. MCP chỉ giúp hai bên làm việc nhanh chóng và nhất quán hơn.

Sẵn sàng tích hợp MCP vào workflow?

Hãy là những người đầu tiên chuẩn hóa hạ tầng AI cùng iNET UI MCP server.

Bắt đầu ngay Xem Storybook

MCP server — biến Design System thành ngôn ngữ chung của doanh nghiệp

Vấn đề mà đội nào cũng gặp

✕ Không có MCP

✓ Với iNET UI MCP server

Tính năng

generate_landing_page

get_component_api

search_blocks

design-system-qa

get_icon_usage

lookup_token

validate_token

search_tokens

get_component_api

get_component_usage

scaffold_component

review_design_tokens

search_blocks

get_block

list_blocks

create-component

migrate-to-viui

customize-block

search_blocks

get_block

get_landing_page_defaults

create-component

generate-block

generate-page

customize-block

get_component_api

list_themes

compare_themes

migrate-to-viui

accessibility-check

design-system-qa

Xem MCP hoạt động

Kiến trúc hệ thống MCP

Kết nối iNET UI MCP server trong 3 bước

Claude Code

Thử ngay: nhờ AI tạo một trang giới thiệu

Ứng dụng thực tế

Soát code theo chuẩn thương hiệu

Dựng trang từ 19 block có sẵn

Chuyển code Vuetify sang iNET UI

Ảnh và logo đúng thương hiệu

Chuẩn hóa

Dễ mở rộng

Đa nền tảng

AI-Native

Câu hỏi thường gặp

Sẵn sàng tích hợp MCP vào workflow?