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

Vấn đề mà mọi team đều gặp

✕ Không có MCP

Copy-paste token values từ Figma → hardcoded, drift theo thời gian

AI sinh code với màu/spacing ngẫu nhiên → không match brand

Không có "nguồn sự thật" nào mà AI tools có thể đọc được

Handoff thủ công: designer → doc → developer → sai lệch tích lũy

✓ Với MCP Server

AI đọc tokens trực tiếp từ source → luôn up-to-date

Component APIs đầy đủ (props, slots, emits) → code đúng ngay lần đầu

Conventions tự động enforce → không cần review thủ công

1 endpoint, mọi IDE → trải nghiệm nhất quán

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 HTML landing page hoàn chỉnh từ mô tả — tokens, layout, sections đầy đủ.

Ví dụgenerate_landing_page({ title: "CRM Pro", ... })

Output

<!DOCTYPE html>
<html>...
<!-- ~200 lines, self-contained -->

Mới

get_component_api

Xem API đầy đủ của 30+ 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

i-Duotone Icons

100+ custom SVG icons theo phong cách iNET DNA — services, hosting, cloud, SSL, CDN...

Ví dụread_resource("icons://i-duotone")

Output

{ category: "services", icons: [
  "cloud-server", "ssl-certificate",
  "cdn", "monitoring", ...20 icons
]}

Xem MCP hoạt động

Từ câu hỏi business đến code chuẩn — trong vài giây.

MCP Demo

User

Tôi cần hero section có CTA button

MCPsearch_blocks("hero cta") → get_block("hero-with-cta")

Kết quả

<template>
  <section class="hero-section">
    <ViContainer>
      <ViText variant="h1">
        Giải pháp tối ưu cho doanh nghiệp
      </ViText>
      <ViText variant="body" color="muted">
        Kết nối và mở rộng không giới hạn
      </ViText>
      <ViButton color="accent" size="lg">
        Bắt đầu ngay
      </ViButton>
    </ViContainer>
  </section>
</template>

User

Tạo landing page cho phần mềm quản lý kho

MCPgenerate_landing_page({ title: "WMS Pro", ... })

Kết quả

<!DOCTYPE html>
<html lang="vi">
<head>
  <title>WMS Pro — Quản lý kho thông minh</title>
  <!-- iNET Design System tokens embedded -->
  <style>:root { --brand: #024799; --accent: #cc0e0e; }</style>
</head>
<body>
  <section class="hero">
    <h1>Quản lý kho thông minh</h1>
    <p>Tối ưu vận hành, giảm 40% thời gian xử lý đơn hàng.</p>
    <a href="#demo" class="btn-primary">Dùng thử miễn phí</a>
  </section>
  <!-- sections: features, pricing, testimonials, cta -->
</body>
</html>

User

Tôi cần icon cho tính năng email server

MCPicons://i-duotone → { name: "email-server", svg: "<svg...>" }

Kết quả

// @hobui/i-duotone — 40+ icons, 5 categories
import { emailServer, emailRouting, cloudServer } from '@hobui/i-duotone'

// Dùng trong Vue component:
<template>
  <span v-html="emailServer" class="icon" />
</template>

// DNA: viewBox="0 0 24 24" stroke="currentColor" fill="none"
// Tự động kế thừa màu từ parent (currentColor)

User

Tạo button CTA theo phong cách iNET DNA Glass

MCPcomponent_api("ViButton") → themes://list → "dna-glass"

Kết quả

<!-- iNET DNA Glass — ViButton CTA variant -->
<ViButton
  color="primary"
  variant="elevated"
  class="vi-button--cta-dna"
>
  Bắt đầu ngay
</ViButton>

<!-- DNA Glass tự động bật khi body có class "dna-glass" -->
<!-- backdrop-filter: blur(12px)                          -->
<!-- border: 1px solid rgba(255,255,255,.18)              -->
<!-- background: linear-gradient(135deg, ...)             -->

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

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

(Cursor, Claude, VS Code...)

JSON-RPC 2.0

MCP Server

Design System API

Tokens

Components

Blocks

Themes

Docs

Design System

(Tokens, Components, Blocks, Themes...)

MCP Server hoạt động như Hub an toàn: tiếp nhận yêu cầu từ AI Host, đọc Design Tokens / Components / Blocks theo chuẩn MCP, và trả về ngữ cảnh chính xác để AI sinh code tuân thủ Design System.

Kết nối MCP Server dễ dàng

Chỉ cần vài bước đơn giản trong IDE, AI của bạn sẽ đọc và sử dụng Design System chính xác.

Cần đăng nhập tài khoản iNET — một lần. Sau đó IDE tự làm mới phiên ở nền, bạn không phải làm gì thêm và không phải dán token vào file cấu hình. Chỉ đăng nhập lại khi chạm trần 90 ngày, hoặc khi bỏ không dùng quá 60 ngày. Tài khoản @inet.vn dùng được ngay; ngoài tổ chức cần admin cấp quyền tại Admin → Quyền truy cập MCP.

Chạy 1 lệnh — CLI tự phát hiện IDE và ghi cấu hình cho bạn.

TERMINAL

$ npx @hobui/viui-cli config

✓ Claude Code · VS Code · Cursor · Windsurf · Trae · Gemini CLI✓ Thêm --dry-run để xem trước · --yes để bỏ qua xác nhận · --global để cấu hình cho mọi project✓ Antigravity chưa được CLI hỗ trợ — dùng tab cấu hình thủ công bên cạnh

Cách 2: Cấu hình thủ công

Terminal

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

Thêm MCP server vào project hiện tại. Thêm flag --scope user để dùng global cho mọi project. Phiên CI không mở được trình duyệt: thêm --header "Authorization: Bearer viui_sk_…" với API key có quyền mcp:invoke.

.mcp.json

{
  "mcpServers": {
    "inet-viui": {
      "type": "http",
      "url": "https://viui.inet.vn/mcp"
    }
  }
}

Tạo file .mcp.json ở thư mục gốc dự án. Không thêm header Authorization — Claude Code tự lo phần đăng nhập; dán token vào đây sẽ khiến client báo lỗi kết nối thay vì mở trình duyệt.

.claude/settings.json

{
  "mcpServers": {
    "inet-viui": {
      "type": "streamable-http",
      "url": "https://viui.inet.vn/mcp"
    }
  }
}

Thêm vào .claude/settings.json trong project hoặc ~/.claude/settings.json để dùng global.

claude_desktop_config.json

{
  "mcpServers": {
    "inet-viui": {
      "type": "http",
      "url": "https://viui.inet.vn/mcp"
    }
  }
}

Windows: %APPDATA%\Claude\claude_desktop_config.json · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

.cursor/mcp.json

{
  "mcpServers": {
    "inet-viui": {
      "url": "https://viui.inet.vn/mcp",
      "transport": "http"
    }
  }
}

Thêm vào .cursor/mcp.json trong thư mục gốc dự án, hoặc ~/.cursor/mcp.json để dùng global. Không thêm header Authorization — Cursor tự lo phần đăng nhập.

.vscode/mcp.json

{
  "servers": {
    "inet-viui": {
      "type": "http",
      "url": "https://viui.inet.vn/mcp"
    }
  }
}

Tạo file .vscode/mcp.json trong thư mục gốc dự án. File này không chứa secret nên commit được bình thường — VS Code tự lo phần đăng nhập.

.windsurf/mcp.json

{
  "mcpServers": {
    "inet-viui": {
      "type": "http",
      "url": "https://viui.inet.vn/mcp"
    }
  }
}

Tạo file .windsurf/mcp.json trong thư mục gốc dự án.

.trae/mcp.json

{
  "mcpServers": {
    "inet-viui": {
      "type": "http",
      "url": "https://viui.inet.vn/mcp"
    }
  }
}

Tạo file .trae/mcp.json trong thư mục gốc dự án.

~/.gemini/antigravity/mcp_config.json

{
  "mcpServers": {
    "inet-viui": {
      "serverUrl": "https://viui.inet.vn/mcp"
    }
  }
}

Mở: Agent panel → "..." → MCP Servers → Manage → View raw config, hoặc sửa trực tiếp ~/.gemini/antigravity/mcp_config.json.

Đăng nhập một lần · IDE tự làm mới phiên · Cùng một URL cho mọi công cụ

Sau khi cấu hình

Đăng nhập lần đầu

Khởi động lại IDE rồi yêu cầu AI: “Dùng tool list_blocks để xem danh sách block”. IDE tự mở trình duyệt → đăng nhập iNET → quay lại là dùng được.

Không muốn bấm lần nào

Mở viui.inet.vn/auth/mcp/setup — đăng nhập iNET một lần trên trình duyệt, trang trả sẵn câu lệnh claude mcp add đã kèm khoá (hạn 1 năm). Dán vào terminal là xong: IDE không mở cửa sổ đăng nhập lần nào.

Kiểm tra server còn sống

Mở viui.inet.vn/mcp/health — trả {"status":"ok"} là server đang chạy. Nếu server sống mà vẫn 401 thì vấn đề nằm ở phiên đăng nhập.

CI, agent, script

Máy không có trình duyệt thì lấy khoá tại /auth/mcp/setup rồi đặt vào header Authorization: Bearer viui_sk_…. Khoá không phụ thuộc phiên SSO nên agent chạy liên tục; thu hồi tại Admin → Quyền truy cập MCP khi cần.

Ứng dụng thực tế

Những tình huống cụ thể mà MCP Server giải quyết mỗi ngày.

Audit Design Tokens

Dán code → AI phát hiện hardcoded values (#024799, 16px, 300ms) → gợi ý token thay thế (colors.brand.primary, spacing.md, motion.duration.fast).

Tạo Block/Page nhanh

Mô tả layout bằng lời → AI compose từ blocks có sẵn + brand colors + đúng spacing tokens. Không cần code từ đầu.

Migrate Vuetify → ViUI

Paste code Vuetify → AI map v-btn sang ViButton, v-card sang ViCard, v-data-table sang ViDataTable — tự động chuyển props tương ứng.

So sánh Themes

Chọn 2 themes → xem diff CSS variables trong IDE — biết ngay biến nào khác, giá trị cũ vs mới, giúp quyết định theme nhanh hơn.

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, Copilot, Cursor, Gemini, VS Code, Windsurf, Trae — 1 config 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ề 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ì?

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?

Hiện tại giới hạn 100 kết nối đồng thời. Chúng tôi sẽ điều chỉnh linh hoạt tùy theo quy mô sử dụng của từng team.

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

Không bắt buộc. Chúng tôi cung cấp CLI (npx @hobui/viui-cli config) tự động phát hiện IDE và ghi cấu hình cho bạn. Chỉ cần chạy 1 lệnh là xong. Ngoài ra có tài liệu hướng dẫn chi tiết cho từng IDE nếu bạn muốn cấu hình thủ công.

MCP Server có thay thế Designer hoặc Developer không?

Không. 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 Design System 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à mọi team đều gặp

✕ Không có MCP

✓ Với MCP Server

Tính năng

generate_landing_page

get_component_api

search_blocks

design-system-qa

i-Duotone Icons

lookup_token

validate_token

search_tokens

get_component_api

get_component_usage

scaffold_component

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 MCP Server dễ dàng

Cách 1: Tự động qua CLI

Cách 2: Cấu hình thủ công

Sau khi cấu hình

Đăng nhập lần đầu

Không muốn bấm lần nào

Kiểm tra server còn sống

CI, agent, script

Ứng dụng thực tế

Audit Design Tokens

Tạo Block/Page nhanh

Migrate Vuetify → ViUI

So sánh Themes

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?