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.

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 · Antigravity✓ Thêm --dry-run để xem trước · --yes để bỏ qua xác nhận

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.

.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.

.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.

.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.

.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.

Không cần API key · Không cần đăng ký · Hoạt động ngay

Ứ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?

Hiện tại không cần API key — MCP Server hoạt động nội bộ cho team iNET. Khi mở rộng ra bên ngoài, chúng tôi sẽ thêm cơ chế xác thực và quản lý key.

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

generate_landing_page

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

Ứ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?