Orvain UI design system for React and Vue: real component props, variants and tokens for AI tools
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add --transport http orvain-ui https://mcp.orvain.dev --header 'Authorization: Bearer <LICENCE_KEY>'~/.codex/config.toml
[mcp_servers.orvain-ui]
url = "https://mcp.orvain.dev"
bearer_token_env_var = "ORVAIN_UI_LICENCE_KEY"
# codex mcp add orvain-ui --url https://mcp.orvain.dev --bearer-token-env-var ORVAIN_UI_LICENCE_KEY
# export ORVAIN_UI_LICENCE_KEY=<LICENCE_KEY>~/.cursor/mcp.json
{
"mcpServers": {
"orvain-ui": {
"url": "https://mcp.orvain.dev",
"headers": {
"Authorization": "Bearer <LICENCE_KEY>"
}
}
}
}.vscode/mcp.json
{
"servers": {
"orvain-ui": {
"type": "http",
"url": "https://mcp.orvain.dev",
"headers": {
"Authorization": "Bearer <LICENCE_KEY>"
}
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"orvain-ui": {
"httpUrl": "https://mcp.orvain.dev",
"headers": {
"Authorization": "Bearer <LICENCE_KEY>"
}
}
}
}claude_desktop_config.json · Customize › Connectors › Add custom connector
{
"mcpServers": {
"orvain-ui": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.orvain.dev",
"--header",
"Authorization:${AUTH_HEADER}"
],
"env": {
"AUTH_HEADER": "Bearer <LICENCE_KEY>"
}
}
}
}.trae/mcp.json
{
"mcpServers": {
"orvain-ui": {
"url": "https://mcp.orvain.dev",
"headers": {
"Authorization": "Bearer <LICENCE_KEY>"
}
}
}
}