iNET UI MCP server — Connect AI to your design system

The problem every team runs into

✕ Without MCP

Colors and spacing copied into code by handHardcoded values that drift with every design change

AI guesses colors, draws its own icons, grabs the wrong logoOff-brand results

Marketing needs a landing page, so it waits in line for a developerThe pipeline stalls

Every AI tool has its own setup and its own API keyNon-coders give up

✓ With iNET UI MCP server

AI reads design tokens straight from the sourceFlags hardcoded values, always in sync

AI uses the real components, icon set, and official iNET logos and mascotConsistent branding

Marketing builds pages from templates just by describing themReview the draft, publish when ready

One address for coding tools and chat apps alikeSign in with your iNET account

Features

Tools, resources and prompts — organized by audience so you find the right tool fast.

generate_landing_page

Build a landing page from a ready-made template — just bring the content, get back a draft link to preview.

Examplegenerate_landing_page({ template_id: "oneseries-01", ... })

Output

Draft saved: https://viui.inet.vn/lp/crm-pro
Status: DRAFT — requires @inet.vn sign-in
→ publish_landing_page() when you are happy

New

get_component_api

Full API of 54 Vi* components — props, slots, emits, defaults.

Exampleget_component_api("ViDataTable")

Output

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

search_blocks

Find ready-made UI blocks by keyword — hero, pricing, cta, features...

Examplesearch_blocks("hero cta")

Output

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

design-system-qa

Ask about the design system in plain language — components, tokens, blocks, conventions.

ExampleWhat spacing goes between sections?

Output

Use var(--sp-48) or var(--sp-64) between sections.
Grids: 8pt system (4, 8, 12, 16, 24, 32, 48, 64px)

New

get_icon_usage

The viui-icons set (outline + duotone) in iNET DNA style — find with list_icons, get paste-ready code.

Exampleget_icon_usage("email-server")

Output

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

See MCP in action

Ask the AI in one sentence — the result appears instantly, exactly what the AI gets back from MCP.

AI agentinet-ui · connected

Give me a set of buttons in the iNET brand.

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

6 DNA button designs from the iNET Brand group — following your page theme, fully rounded by default. Need other corners (sm, md, xl, 2xl…)? Just ask:

A-01 · Tactical Primeenterprise

A-04 · Layered Chargepremium

A-06 · Radial Burstgradient

A-08 · Mesh Shiftgradient

A-09 · Circuit Dualengineering

A-10 · Brand Spectrumgradient

See the live buttons in Storybook ↗Content = exactly what the tool returned

MCP system architecture

iNET UI MCP server sits at the center, giving AI safe and accurate access to the design system.

Host

AI Host

Claude, ChatGPT, Cursor, VS Code…

MCP · JSON-RPC 2.0

MCP Server

Reads data

Tokens
Components
Icons
DNA buttons
Brand assets
Images & templates

iNET design data

Same source as Storybook and assets.inet.vn

iNET UI MCP server acts as a secure hub: the AI Host signs in with an iNET account (OAuth 2.1), the server reads tokens, components, icons, DNA buttons, brand assets and page templates via MCP, then returns exactly the right context so the AI generates code that follows the Design System.

Connect iNET UI MCP server in 3 steps

Your AI uses the real iNET design system — in coding tools and chat apps alike.

Pick the tool you use

No code needed

Coding tools

✓ used by people in the company · no mark: follows the vendor’s official guide

Copy and paste it in the right place

Claude Code

Run once, works in every project. Drop --scope user to use it only in the current project.

Terminal

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

Added it before as inet-viui? Run claude mcp remove inet-viui first so it isn’t duplicated.
Restart the tool, then ask the AI: “Use the list_blocks tool to show the block list”.
A browser opens by itself — sign in to iNET, come back and you’re set.

Don’t add an Authorization header — Claude Code handles sign-in itself; pasting a token causes a connection error instead of opening the browser.

Another way to connect: an API key
For CI, agents, scripts — or when you’d rather not click to sign in

Open viui.inet.vn/auth/mcp/setup and sign in to iNET once in the browser to get a key (valid 1 year, scope mcp:invoke).

Claude Code:the page gives you a ready claude mcp add command with the key included — paste it in the terminal, no sign-in window at all.
CI, agents, scripts:put the key in the Authorization: Bearer viui_sk_… header. The key doesn’t depend on the SSO session, so it runs continuously.

Revoke keys under Admin → MCP access.

Can’t connect? See the FAQ

Try it now: ask the AI to build a landing page

Describe it in plain words and the AI builds the page in iNET colors and layout — 6 marketing templates to choose from.

Product launch
Service campaign
Service promotion
Domains & Hosting
OneSeries 01
Event

Step 1
See which templates exist
Show me the available landing page templates.
Step 2
Say what you want
Create a September hosting promo page, 30% off, hotline 1900 9250, using the OneSeries 01 template.
No JSON or spreadsheets — talk like you would to a colleague.
Step 3
Review the draft, edit in words
The AI returns a preview link — only people signed in with @inet.vn can open it. Keep editing: “Change the headline to…”, “Remove the pricing table.”
Step 4
Publish when you’re happy
Publish this page.
The page becomes viui.inet.vn/lp/page-name. Nothing goes public before this step.

Stuck, or the result isn’t usable yet? Tell the AI: “Send feedback to the iNET UI team: …” — it goes straight into the team’s backlog, with context.

Real-world use cases

Everyday tasks you hand to the AI — and which iNET UI MCP server tool does each one.

Review code against brand rules
“Check this file for iNET brand violations.”
The AI points to the exact lines using status colors in the wrong place, motion durations off the scale, or low-contrast icons — with how to fix each.
Toolsvalidate_brand_usagesuggest_token
Build pages from 19 ready blocks
“Make a landing page with a hero, pricing and testimonials.”
The AI picks matching blocks (hero, 3-tier pricing, testimonials…), fetches their source built on iNET components and tokens, and assembles the page.
Toolslist_blocksget_block
Move Vuetify code to iNET UI
“Convert this component from Vuetify to iNET UI.”
The AI looks up each component's API (props, slots, events) and swaps v-btn → ViButton, v-card → ViCard, v-data-table → ViDataTable the right way.
Toolsmigrate-to-viuiget_component_api
On-brand images and logos
“I need a tech hero image and the OneMail logo.”
Get CC0 images cleared for commercial use (photos with faces filtered out) and official logos from the brand library — links you paste straight in.
Toolsfind_images_for_sectionlist_brand_assets

Standardized

MCP is an open standard — works with every MCP client, no vendor lock-in.

Extensible

Add a new tool or resource in minutes — just define a schema and a handler.

Cross-platform

Claude, ChatGPT, Copilot, Cursor, Gemini, VS Code, Windsurf — one address for all of them.

AI-Native

Built from the ground up for AI-first development — not a wrapped REST API.

Frequently asked questions

Answers to the most common questions about iNET UI MCP server.

What is an MCP server and why does it matter for a design system?

An MCP (Model Context Protocol) server is an open protocol that lets AI tools (Cursor, Claude, VS Code...) connect directly and pull real context from your design system. Instead of relying on descriptions or screenshots, the MCP server supplies tokens, components, variables, spacing, typography and design rules precisely, so the AI generates code that strictly follows the design system.

What is the biggest benefit over the traditional approach?

Far fewer inconsistencies between design and code. The AI understands the whole design system (tokens, components, theming, naming conventions), so it produces cleaner, on-standard, easier-to-maintain code — and the team saves a lot of review and rework time.

Which protocol does the server use?

iNET UI MCP server uses Streamable HTTP (JSON-RPC 2.0) with Server-Sent Events (SSE). It currently runs stateless — each request gets a fresh server instance, which keeps it stable and easy to scale.

What does a design system need for an MCP server to work well?

For the best results, a design system should have: systematic tokens & variables (colors, spacing, typography, radii...), components organized with clear variants, documented naming and theming conventions, and a readable folder and token-file structure. The better the structure, the more accurate the generated code.

Do I need an API key?

No API key needed — just sign in with your iNET account. On first connect, the tool opens a browser for you to sign in; commands and config stay the same. @inet.vn accounts work right away; people outside the organization need to be granted access. Only CI/automation (where no browser can open) uses an API key with the mcp:invoke scope.

Is there a rate limit?

Yes. Each IP address can send 60 requests per minute, with bursts of up to 100 at once; beyond that the server returns 429 and you just retry after a few seconds. We adjust limits to each team’s usage.

Can’t connect — what should I check?

Open viui.inet.vn/mcp/health — "status":"ok" means the server is up. If the server is up but your tool still reports 401, the problem is the sign-in session: sign in again inside that tool. Still stuck? Tell the AI “Send feedback to the iNET UI team: …” along with the name of the tool you use.

Do I need to know how to code to set up and use iNET UI MCP server?

No. With Claude Desktop you just paste one address into Connectors — no files to edit. With a coding tool, the Setup section has a ready config for each tool — copy it, paste it in the right place, then sign in to iNET when asked.

Does iNET UI MCP server replace designers or developers?

No. iNET UI MCP server is a powerful aid that helps AI understand and respect the design system. Designers still build and maintain the system, and developers still review and refine the code. MCP just helps both sides work faster and more consistently.

Ready to bring MCP into your workflow?

Be among the first to standardize your AI infrastructure with iNET UI MCP server.

Get started View Storybook

MCP server — turning your Design System into a shared language for the whole company

The problem every team runs into

✕ Without MCP

✓ With iNET UI MCP server

Features

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

See MCP in action

MCP system architecture

Connect iNET UI MCP server in 3 steps

Claude Code

Try it now: ask the AI to build a landing page

Real-world use cases

Review code against brand rules

Build pages from 19 ready blocks

Move Vuetify code to iNET UI

On-brand images and logos

Standardized

Extensible

Cross-platform

AI-Native

Frequently asked questions

Ready to bring MCP into your workflow?