@gemini-suite/vera-mcp 0.1.10 → 0.1.12-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -16
- package/README.md +16 -16
- package/dist/{index-DN7ZNNxO.js → index-louYwcui.js} +12 -12
- package/dist/index.js +1 -1
- package/dist/server-BYQkWNGP.js +1 -0
- package/dist/transports/http.js +1 -1
- package/dist/transports/stdio.js +1 -1
- package/package.json +3 -3
- package/dist/server-De7qnBwD.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -4,21 +4,6 @@ All notable changes to this project will be documented in this file. See [Conven
|
|
|
4
4
|
|
|
5
5
|
<!-- MONOWEAVE:BELOW -->
|
|
6
6
|
|
|
7
|
-
## [0.1.10](https://github.com/Volue/vera/compare/@gemini-suite/vera-mcp@0.1.9...@gemini-suite/vera-mcp@0.1.10) "@gemini-suite/vera-mcp" (2026-02-18)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
## [0.1.9](https://github.com/Volue/vera/compare/@gemini-suite/vera-mcp@0.1.8...@gemini-suite/vera-mcp@0.1.9) "@gemini-suite/vera-mcp" (2026-02-17)
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
## [0.1.8](https://github.com/Volue/vera/compare/@gemini-suite/vera-mcp@0.1.8-next.0...@gemini-suite/vera-mcp@0.1.8) "@gemini-suite/vera-mcp" (2026-02-17)
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
7
|
## [0.1.7](https://github.com/Volue/vera/compare/@gemini-suite/vera-mcp@0.1.6...@gemini-suite/vera-mcp@0.1.7) "@gemini-suite/vera-mcp" (2026-02-12)
|
|
23
8
|
|
|
24
9
|
|
|
@@ -77,7 +62,7 @@ All notable changes to this project will be documented in this file. See [Conven
|
|
|
77
62
|
* add `get_styling_guidelines` tool ([e6c1189](https://github.com/Volue/vera/commit/e6c11891da2255998b0b8799dbad7a35150b5d3b))
|
|
78
63
|
* add `getTokens` tool ([c6abd19](https://github.com/Volue/vera/commit/c6abd191fca2a0c975cab897802d9237a2e4bc25))
|
|
79
64
|
* add env for switching to stable docs ([86a871e](https://github.com/Volue/vera/commit/86a871e1608480f648e0b72f9ef051773d528dc1))
|
|
80
|
-
* add
|
|
65
|
+
* add Vera MCP server ([419aac2](https://github.com/Volue/vera/commit/419aac270175fe2ed1c578208aa3185c132de00d))
|
|
81
66
|
|
|
82
67
|
|
|
83
68
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
## Available Tools
|
|
6
6
|
|
|
7
|
-
The following tools are available in the
|
|
7
|
+
The following tools are available in the Vera MCP server and can be executed by LLMs using agent mode:
|
|
8
8
|
|
|
9
9
|
| Tool Name | Description |
|
|
10
10
|
| ------------------------ | -------------------------------------------------------------------------------- |
|
|
@@ -16,16 +16,16 @@ The following tools are available in the Wave MCP server and can be executed by
|
|
|
16
16
|
| `get_color_usage` | Get color token usage and guidelines |
|
|
17
17
|
| `get_tokens` | Get design tokens and usage examples |
|
|
18
18
|
| `get_styling_guidelines` | Retrieve guidelines for styling components and creating custom styled components |
|
|
19
|
-
| `list_icons` | List all available icons in the
|
|
19
|
+
| `list_icons` | List all available icons in the Vera icon library |
|
|
20
20
|
| `get_icon` | Get SVG code and usage information for a specific icon |
|
|
21
21
|
|
|
22
22
|
## Setup
|
|
23
23
|
|
|
24
|
-
Add configuration code that tells your MCP-compatible client how to connect to the
|
|
24
|
+
Add configuration code that tells your MCP-compatible client how to connect to the Vera MCP server.
|
|
25
25
|
|
|
26
26
|
### VS Code (Copilot)
|
|
27
27
|
|
|
28
|
-
[](https://insiders.vscode.dev/redirect/mcp/install?name=Vera%20Design%20System&config=%7B%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40volue%2Fvera-mcp%40latest%22%5D%7D)
|
|
29
29
|
|
|
30
30
|
Use the button above or manually add to your `.vscode/mcp.json`:
|
|
31
31
|
|
|
@@ -45,7 +45,7 @@ Use the button above or manually add to your `.vscode/mcp.json`:
|
|
|
45
45
|
### Claude Code
|
|
46
46
|
|
|
47
47
|
> [!TIP]
|
|
48
|
-
> For Claude Code users, consider the [
|
|
48
|
+
> For Claude Code users, consider the [Vera plugin](../cli#readme) as an alternative to MCP.
|
|
49
49
|
|
|
50
50
|
Use the CLI:
|
|
51
51
|
|
|
@@ -53,8 +53,8 @@ Use the CLI:
|
|
|
53
53
|
# 1. Navigate to your project
|
|
54
54
|
cd your-awesome-project
|
|
55
55
|
|
|
56
|
-
# 2. Add
|
|
57
|
-
claude mcp add
|
|
56
|
+
# 2. Add Vera MCP server
|
|
57
|
+
claude mcp add vera --scope project -- npx -y @gemini-suite/vera-mcp@latest
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
Or manually add to your Claude Code MCP servers configuration:
|
|
@@ -62,7 +62,7 @@ Or manually add to your Claude Code MCP servers configuration:
|
|
|
62
62
|
```json
|
|
63
63
|
{
|
|
64
64
|
"mcpServers": {
|
|
65
|
-
"
|
|
65
|
+
"vera": {
|
|
66
66
|
"command": "npx",
|
|
67
67
|
"args": ["-y", "@gemini-suite/vera-mcp@latest"]
|
|
68
68
|
}
|
|
@@ -75,7 +75,7 @@ Or manually add to your Claude Code MCP servers configuration:
|
|
|
75
75
|
> CLI:
|
|
76
76
|
>
|
|
77
77
|
> ```bash
|
|
78
|
-
> claude mcp add
|
|
78
|
+
> claude mcp add vera --scope project -- cmd /c npx -y @gemini-suite/vera-mcp@latest
|
|
79
79
|
> ```
|
|
80
80
|
>
|
|
81
81
|
> Manual configuration:
|
|
@@ -83,7 +83,7 @@ Or manually add to your Claude Code MCP servers configuration:
|
|
|
83
83
|
> ```json
|
|
84
84
|
> {
|
|
85
85
|
> "mcpServers": {
|
|
86
|
-
> "
|
|
86
|
+
> "vera": {
|
|
87
87
|
> "command": "cmd",
|
|
88
88
|
> "args": ["/c", "npx", "-y", "@gemini-suite/vera-mcp@latest"]
|
|
89
89
|
> }
|
|
@@ -93,14 +93,14 @@ Or manually add to your Claude Code MCP servers configuration:
|
|
|
93
93
|
|
|
94
94
|
### Cursor
|
|
95
95
|
|
|
96
|
-
[](https://cursor.com/en/install-mcp?name=vera&config=eyJ0eXBlIjoic3RkaW8iLCJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkB2b2x1ZS93YXZlLW1jcEBsYXRlc3QiXX0=)
|
|
97
97
|
|
|
98
98
|
Use the button above or manually add to your Cursor MCP configuration:
|
|
99
99
|
|
|
100
100
|
```json
|
|
101
101
|
{
|
|
102
102
|
"mcpServers": {
|
|
103
|
-
"
|
|
103
|
+
"vera": {
|
|
104
104
|
"command": "npx",
|
|
105
105
|
"args": ["-y", "@gemini-suite/vera-mcp@latest"]
|
|
106
106
|
}
|
|
@@ -110,7 +110,7 @@ Use the button above or manually add to your Cursor MCP configuration:
|
|
|
110
110
|
|
|
111
111
|
## Supported Transports
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
Vera MCP supports two transport methods:
|
|
114
114
|
|
|
115
115
|
### stdio (default)
|
|
116
116
|
|
|
@@ -145,7 +145,7 @@ Pre-built Docker images are automatically published to GitHub Container Registry
|
|
|
145
145
|
The container runs the HTTP transport by default on port 3000:
|
|
146
146
|
|
|
147
147
|
```bash
|
|
148
|
-
docker run -p 3000:3000 ghcr.io/volue/
|
|
148
|
+
docker run -p 3000:3000 ghcr.io/volue/vera-mcp:latest
|
|
149
149
|
```
|
|
150
150
|
|
|
151
151
|
The MCP endpoint will be available at `http://localhost:3000/mcp`.
|
|
@@ -155,7 +155,7 @@ The MCP endpoint will be available at `http://localhost:3000/mcp`.
|
|
|
155
155
|
Override the default port:
|
|
156
156
|
|
|
157
157
|
```bash
|
|
158
|
-
docker run -p 8080:8080 -e PORT=8080 ghcr.io/volue/
|
|
158
|
+
docker run -p 8080:8080 -e PORT=8080 ghcr.io/volue/vera-mcp:latest
|
|
159
159
|
```
|
|
160
160
|
|
|
161
161
|
### Building Locally
|
|
@@ -163,5 +163,5 @@ docker run -p 8080:8080 -e PORT=8080 ghcr.io/volue/wave-mcp:latest
|
|
|
163
163
|
To build the image yourself from source:
|
|
164
164
|
|
|
165
165
|
```bash
|
|
166
|
-
docker buildx build -f mcp/Dockerfile -t
|
|
166
|
+
docker buildx build -f mcp/Dockerfile -t vera-mcp .
|
|
167
167
|
```
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var A=Object.defineProperty;var s=(e,t)=>A(e,"name",{value:t,configurable:!0});import{a as p,f as u,u as y,g as d}from"./server-BYQkWNGP.js";import P from"@gemini-suite/design-colors/generic";import*as D from"@gemini-suite/design-icons";import*as N from"@gemini-suite/design-media-queries";import j from"remark-parse";import O from"unified";import{z as v}from"zod";import{core as F,data as H,background as W,foreground as G,border as X,rgb as q}from"@gemini-suite/design-colors/flat";function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},m.apply(null,arguments)}s(m,"_extends");const J="0 1px 2.5px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.08)), 0 3px 9px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.048))",Q="0 0.4px 2.2px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.022)), 0 1.4px 5px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.04)), 0 5px 14px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.06))",Y="0 0.3px 2px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.015)), 0 1.5px 8px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.024)), 0 4px 16px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.04)), 0 8px 24px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.07))",K="0 0.7px 2px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.015)), 0 1.6px 8px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.024)), 0 3.3px 16px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.034)), 0 5px 26px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.06)), 0 12px 42px hsla(var(--shadow-color, 191, 74%, 6%), calc(var(--shadow-intensity, 1) * 0.08))";var Z=Object.freeze({__proto__:null,elevationL:K,elevationM:Y,elevationS:Q,elevationXs:J}),h={base:{2:"0.125rem",4:"0.25rem",6:"0.375rem",8:"0.5rem",12:"0.75rem",14:"0.875rem",16:"1rem",20:"1.25rem",24:"1.5rem",28:"1.75rem",32:"2rem",36:"2.25rem",40:"2.5rem",44:"2.75rem",48:"3rem",64:"4rem",72:"4.5rem",80:"5rem",96:"6rem",112:"7rem",128:"8rem"},borderRadius:{xs:"0.25rem",s:"0.375rem",m:"0.5rem",l:"0.75rem",xl:"1rem",full:"100vh"},spacing:{xs:"0.25rem",s:"0.5rem",m:"1rem",l:"1.5rem",xl:"2rem",xxl:"3rem",xxxl:"4.5rem"}},g={font:{family:{base:"'Source Sans Pro', system-ui, -apple-system, 'Segoe UI'",display:"'Swizzy', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif",mono:"ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"},weight:{normal:"400",semibold:"600"}},size:{font:{base:"16px",eta:"12px",zeta:"14px",epsilon:"16px",delta:"19px",gamma:"21px",beta:"28px",alpha:"38px",giga:"51px"},letterSpacing:{tighter:"-0.05em",tight:"-0.025em",normal:"normal",wide:"0.025em",wider:"0.05em",widest:"0.1em"},lineHeight:{none:"1",body:"1.5",base:"1.5rem",small:"1.25rem",xSmall:"1.125rem",zeta:"1.714286",epsilon:"1.5",delta:"1.263158",gamma:"1.52381",beta:"1.714286",alpha:"1.263158",giga:"1.411765"}}};function ee(e){return e.charAt(0).toUpperCase()+e.slice(1)}s(ee,"capitalizeFirstLetter");var T=Object.keys(h.spacing).reduce(function(e,t){var n;return m({},e,(n={},n["spacing"+ee(t)]=h.spacing[t],n))},{}),C={colors:m({},F,H,W,G,X,q),space:T,zIndices:{auto:"auto",0:"0",1:"100",2:"200",3:"300",4:"400",5:"500",9:"900"},fonts:g.font.family,fontWeights:g.font.weight,fontSizes:g.size.font,lineHeights:g.size.lineHeight,letterSpacings:g.size.letterSpacing,sizes:m({},h.base,{measureNarrow:"30ch",measureMedium:"60ch",measureWide:"90ch",containerNarrow:"32rem",containerMedium:"48rem",containerWide:"74rem"}),radii:m({},h.borderRadius,T),shadows:m({},Z,{lift:"0 10px 20px -5px rgba(0, 0, 0, 0.15)"})};const te=O().use(j),R={Components:"component","UX patterns":"pattern"};function ne(e,t){const n=te.parse(e);let o=null;return n.children.reduce((r,a)=>{if(p(a,"heading")&&a.depth===2)return o=oe(a),r;if(!o||!p(a,"list"))return r;const i=o,c=a.children.map(l=>re(l,i,t)).filter(l=>l!==null);return r.concat(c)},[])}s(ne,"parseLlmsIndex");function oe(e){const[t]=e.children;if(!t||!p(t,"text"))return null;const n=t.value.trim();if(!(n in R))return null;const o=R[n];return{title:n,type:o}}s(oe,"extractSectionContext");function re(e,t,n){const[o]=e.children;if(!o||!p(o,"paragraph")||o.children.length!==2)return null;const[r,a]=o.children;if(!p(r,"link")||!p(a,"text")||r.children.length!==1)return null;const i=r.children[0];if(!p(i,"text"))return null;const c=i.value.trim(),l=r.url.replace(/^\//,""),_=new URL(l,`${n}/`).toString(),U=ae(l),V=se(t.title,l,t.type),M=ce(a.value);return{name:c,slug:U,category:V,section:t.title,type:t.type,url:_,description:M??void 0}}s(re,"listItemToResource");function ae(e){return e.replace(/\.md$/,"").split("/").pop()??""}s(ae,"deriveSlug");function se(e,t,n){const o=t.replace(/\.md$/,"").split("/");if(n==="component"||n==="pattern"){const r=o.length>=3?o[o.length-2]:null;return r?`${e} / ${ie(r)}`:e}return e}s(se,"deriveCategory");function ie(e){return e.split("-").filter(Boolean).map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}s(ie,"formatSegment");function ce(e){if(!e)return null;const t=e.replace(/^\s*:\s*/,"").trim();return t.toLowerCase()==="no description available"?null:t}s(ce,"normalizeDescription");const x=process.env.USE_STABLE_DOCS==="true"||process.env.USE_STABLE_DOCS==="1"?"https://vera.geminisuite.com":"https://2e7f8603.vera-5ef.pages.dev",le=`${x}/llms.txt`,de=1e3*60*15,pe=process.env.VERA_RESOURCES_CACHE_TIME?Number.parseInt(process.env.VERA_RESOURCES_CACHE_TIME,10):de;function b(e){const t=new URL(e,x);return t.pathname.endsWith(".md")||(t.pathname+=".md"),t.toString()}s(b,"createUrl");let S=null,B=0;async function me(){if(S!==null&&Date.now()<B)return S;const e=await ue();return S=e,B=Date.now()+pe,e}s(me,"listCachedResources");let f=null;async function ue(){return f||(f=ge().finally(()=>{f=null})),f}s(ue,"idempotentLoadResourcesFromLlms");async function ge(){const e=await u(le,void 0,"fetch llms.txt");return ne(e,x)}s(ge,"loadResourcesFromLlms");async function he(e){return u(e.url,void 0,`fetch ${e.name} documentation`)}s(he,"fetchComponent");function fe(e){return u(e.url,void 0,`fetch ${e.name} pattern`)}s(fe,"fetchPattern");async function ye(){return u(b("get-started/developing"),void 0,"fetch developing guide")}s(ye,"fetchDevelopingGuide");async function ve(){return u(b("tokens/colors"),void 0,"fetch color usage guidelines")}s(ve,"fetchColorUsageGuidelines");function w(){return Object.entries(D).map(([e,t])=>({name:e,svg:t}))}s(w,"listIcons");function xe(){const e=w();return y(e.map(t=>t.name))}s(xe,"getIconNames");function be(e,t){const n=t.trim().toLowerCase();return e.find(o=>o.name.toLowerCase()===n)}s(be,"findIconByName");async function E(e){return(await me()).filter(n=>n.type===e)}s(E,"listResourcesByType");function I(e,t){const n=t.trim().toLowerCase();return e.find(o=>o.name.toLowerCase()===n)}s(I,"findResourceByName");function k(){return E("component")}s(k,"listComponents");async function Se(){const e=await k();return y(e.map(t=>t.name))}s(Se,"getComponentNames");function $(){return E("pattern")}s($,"listPatterns");async function we(){const e=await $();return y(e.map(t=>t.name))}s(we,"getPatternNames");function z(e){return e.reduce((t,n)=>(t[n.category]||(t[n.category]=[]),t[n.category].push(n),t),{})}s(z,"groupResourcesByCategory");const ke={name:"get_color_usage",description:"Retrieve the Vera Design System color tokens and guidelines for applying color in user interfaces.",exec(e,{name:t,description:n}){e.tool(t,n,async()=>{try{const o=await ve();return{content:[{type:"text",text:JSON.stringify(P)},{type:"text",text:`Here are the Vera Design System color usage guidelines:
|
|
2
2
|
|
|
3
3
|
${o}
|
|
4
4
|
|
|
@@ -35,13 +35,13 @@ ${a.svg}
|
|
|
35
35
|
${c}
|
|
36
36
|
|
|
37
37
|
---
|
|
38
|
-
Source: ${i.url}`}]}}catch(a){return{isError:!0,content:[{type:"text",text:`Failed to retrieve documentation for \`${r}\`: ${d(a)}`}]}}})}},
|
|
38
|
+
Source: ${i.url}`}]}}catch(a){return{isError:!0,content:[{type:"text",text:`Failed to retrieve documentation for \`${r}\`: ${d(a)}`}]}}})}},Re={name:"get_styling_guidelines",description:"Retrieve guidelines for styling Vera Design System components and creating custom styled components.",exec(e,{name:t,description:n}){e.tool(t,n,async()=>({content:[{type:"text",text:`Vera Design System components can be styled using standard React approaches (className, style prop), but Vera provides specialized styling APIs for customizing component styles and creating custom styled components. These APIs are powered by Stitches.js, a CSS-in-JS library with near-zero runtime. They are the recommended approach because they integrate seamlessly with Vera's design tokens and provide type-safe styles.
|
|
39
39
|
|
|
40
40
|
## Styling APIs
|
|
41
41
|
|
|
42
42
|
### CSS prop
|
|
43
43
|
|
|
44
|
-
The \`css\` property is available on all
|
|
44
|
+
The \`css\` property is available on all Vera components for styling. It generates CSS class names from the style object, supporting all standard CSS properties and selectors, plus design tokens and responsive breakpoints.
|
|
45
45
|
|
|
46
46
|
Example:
|
|
47
47
|
|
|
@@ -99,7 +99,7 @@ const SectionTitle = styled('h2', {
|
|
|
99
99
|
// Use with a specific variant
|
|
100
100
|
<SectionTitle size="large">Analytics Overview</SectionTitle>
|
|
101
101
|
|
|
102
|
-
// Extend an existing
|
|
102
|
+
// Extend an existing Vera component
|
|
103
103
|
import { AppFrame } from '@gemini-suite/vera-react';
|
|
104
104
|
|
|
105
105
|
const StyledAppFrame = styled(AppFrame.Root, {
|
|
@@ -109,13 +109,13 @@ const StyledAppFrame = styled(AppFrame.Root, {
|
|
|
109
109
|
|
|
110
110
|
## Design tokens
|
|
111
111
|
|
|
112
|
-
|
|
112
|
+
Vera provides a comprehensive set of design tokens for colors, spacing, typography, border radii, shadows, and more. All tokens are available in both \`css\` prop and \`styled()\` function using the \`$tokenName\` syntax (as shown in the examples above).
|
|
113
113
|
|
|
114
114
|
**Use the \`get_tokens\` tool to discover all available design tokens** including their values and usage examples.
|
|
115
115
|
|
|
116
116
|
## Media Query Tokens
|
|
117
117
|
|
|
118
|
-
|
|
118
|
+
Vera provides media query tokens for responsive design. Use these tokens to create breakpoint-based styles:
|
|
119
119
|
|
|
120
120
|
${Object.entries(N).map(([r,a])=>`- \`@${r}\`: ${a}`).join(`
|
|
121
121
|
`)}
|
|
@@ -189,8 +189,8 @@ const Button = styled('button', {
|
|
|
189
189
|
|
|
190
190
|
1. **Use design tokens**: Always prefer design tokens (prefixed with \`$\`) over hardcoded values for consistency. Use the \`get_tokens\` tool to discover available tokens.
|
|
191
191
|
2. **Choose the right API**: Use \`css\` prop for one-off styles, \`styled()\` for reusable components
|
|
192
|
-
3. **Semantic breakpoints**: Use
|
|
193
|
-
`}]}))}},
|
|
192
|
+
3. **Semantic breakpoints**: Use Vera's semantic media query tokens rather than arbitrary pixel values
|
|
193
|
+
`}]}))}},Be={colors:["background","backgroundColor","backgroundImage","border","borderBlock","borderBlockEnd","borderBlockStart","borderBottom","borderBottomColor","borderColor","borderInline","borderInlineEnd","borderInlineStart","borderLeft","borderLeftColor","borderRight","borderRightColor","borderTop","borderTopColor","caretColor","color","columnRuleColor","fill","outlineColor","stroke","textDecorationColor"],fonts:["fontFamily"],fontSizes:["fontSize"],fontWeights:["fontWeight"],lineHeights:["lineHeight"],letterSpacings:["letterSpacing"],radii:["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"],sizes:["blockSize","minBlockSize","maxBlockSize","inlineSize","minInlineSize","maxInlineSize","width","minWidth","maxWidth","height","minHeight","maxHeight","flexBasis","gridTemplateColumns","gridTemplateRows"],space:["gap","gridGap","columnGap","gridColumnGap","rowGap","gridRowGap","inset","insetBlock","insetBlockEnd","insetBlockStart","insetInline","insetInlineEnd","insetInlineStart","margin","marginTop","marginRight","marginBottom","marginLeft","marginBlock","marginBlockEnd","marginBlockStart","marginInline","marginInlineEnd","marginInlineStart","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingBlock","paddingBlockEnd","paddingBlockStart","paddingInline","paddingInlineEnd","paddingInlineStart","top","right","bottom","left","scrollMargin","scrollMarginTop","scrollMarginRight","scrollMarginBottom","scrollMarginLeft","scrollMarginX","scrollMarginY","scrollMarginBlock","scrollMarginBlockEnd","scrollMarginBlockStart","scrollMarginInline","scrollMarginInlineEnd","scrollMarginInlineStart","scrollPadding","scrollPaddingTop","scrollPaddingRight","scrollPaddingBottom","scrollPaddingLeft","scrollPaddingX","scrollPaddingY","scrollPaddingBlock","scrollPaddingBlockEnd","scrollPaddingBlockStart","scrollPaddingInline","scrollPaddingInlineEnd","scrollPaddingInlineStart"],zIndices:["zIndex"],shadows:["boxShadow","textShadow"],transitions:["transition"],borderWidths:["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth"],borderStyles:["borderStyle","borderTopStyle","borderRightStyle","borderBottomStyle","borderLeftStyle"]},Ee={name:"get_tokens",description:"Retrieve the Vera Design System design tokens (colors, fonts, spacing, font styles, etc.) exposed by the `@gemini-suite/vera-react` package. Includes token type mappings to CSS properties and usage examples.",exec(e,{name:t,description:n}){e.tool(t,n,async()=>{const o=Object.entries(Be).map(([r,a])=>`| ${r} | ${a.join(", ")} |`).join(`
|
|
194
194
|
`);return{content:[{type:"text",text:`Below is a list of design tokens available from Vera Design System.
|
|
195
195
|
There are ${Object.keys(C).length} token types available:
|
|
196
196
|
|
|
@@ -266,7 +266,7 @@ It's **important** that if the project is using a tool like Vite or Next.js, one
|
|
|
266
266
|
---
|
|
267
267
|
|
|
268
268
|
${await ye()}
|
|
269
|
-
`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve getting started documentation: ${d(o)}`}]}}})}},
|
|
269
|
+
`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve getting started documentation: ${d(o)}`}]}}})}},ze={name:"list_components",description:"List all components available from the Vera Design System. This tool retrieves the names of all available Vera Design System components grouped by category.",exec(e,{name:t,description:n}){e.tool(t,n,async()=>{try{const o=await k(),r=z(o);return{content:[{type:"text",text:`The following components are available in the Vera Design System:
|
|
270
270
|
|
|
271
271
|
${Object.entries(r).map(([i,c])=>`## ${i}
|
|
272
272
|
${c.map(l=>`- ${l.name}`).join(`
|
|
@@ -276,12 +276,12 @@ ${c.map(l=>`- ${l.name}`).join(`
|
|
|
276
276
|
|
|
277
277
|
Use the \`get_component\` tool to get more information about a specific component.
|
|
278
278
|
|
|
279
|
-
Use these components from the \`@gemini-suite/vera-react\` package.`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve the component index: ${d(o)}`}]}}})}},
|
|
279
|
+
Use these components from the \`@gemini-suite/vera-react\` package.`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve the component index: ${d(o)}`}]}}})}},Le={name:"list_icons",description:"List all icons available from the Vera Design System. Icons are sourced directly from the `@gemini-suite/design-icons` package.",exec(e,{name:t,description:n}){e.tool(t,n,async()=>{try{return{content:[{type:"text",text:`The following icons are available in the Vera Design System:
|
|
280
280
|
|
|
281
281
|
${w().map(a=>`- ${a.name}`).join(`
|
|
282
282
|
`)}
|
|
283
283
|
|
|
284
|
-
Use the \`get_icon\` tool to retrieve the SVG markup and usage guidelines for a specific icon.`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve the icon data: ${d(o)}`}]}}})}},
|
|
284
|
+
Use the \`get_icon\` tool to retrieve the SVG markup and usage guidelines for a specific icon.`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve the icon data: ${d(o)}`}]}}})}},_e={name:"list_patterns",description:"List all UX patterns available from the Vera Design System. This tool retrieves the names of all available Vera Design System patterns grouped by category.",exec(e,{name:t,description:n}){e.tool(t,n,async()=>{try{const o=await $(),r=z(o);return{content:[{type:"text",text:`The following UX patterns are available in the Vera Design System:
|
|
285
285
|
|
|
286
286
|
${Object.entries(r).map(([i,c])=>`## ${i}
|
|
287
287
|
${c.map(l=>`- ${l.name}`).join(`
|
|
@@ -289,4 +289,4 @@ ${c.map(l=>`- ${l.name}`).join(`
|
|
|
289
289
|
|
|
290
290
|
`)}
|
|
291
291
|
|
|
292
|
-
Use the \`get_pattern\` tool to access detailed guidance for a specific pattern.`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve the pattern index: ${d(o)}`}]}}})}},Ue=[Ie,
|
|
292
|
+
Use the \`get_pattern\` tool to access detailed guidance for a specific pattern.`}]}}catch(o){return{isError:!0,content:[{type:"text",text:`Failed to retrieve the pattern index: ${d(o)}`}]}}})}},Ue=[Ie,ze,$e,_e,Ce,ke,Le,Te,Ee,Re],L=new Set;async function Ve(e){await Promise.all(Ue.map(async t=>{if(L.has(t.name))return;const n=await t.ctx?.();L.add(t.name),t.exec(e,{name:t.name,description:t.description,ctx:n})}))}s(Ve,"initializeTools");export{Ve as i};
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var e=Object.defineProperty;var t=(o,r)=>e(o,"name",{value:r,configurable:!0});import{i}from"./server-
|
|
2
|
+
var e=Object.defineProperty;var t=(o,r)=>e(o,"name",{value:r,configurable:!0});import{i}from"./server-BYQkWNGP.js";import{s as g}from"./server-BYQkWNGP.js";import"node:fs";import"node:url";import"@modelcontextprotocol/sdk/server/mcp.js";if(i(import.meta.url)){const r=process.argv.slice(2)[0]||"stdio";async function s(){try{switch(r){case"stdio":await import("./transports/stdio.js");break;case"http":process.argv.push("--auto-run"),await import("./transports/http.js");break;default:console.error(`Unknown transport: ${r}`),console.error("Available transports: stdio, http"),process.exit(1)}}catch(a){console.error("Error running transport:",a),process.exit(1)}}t(s,"run"),s()}export{g as server};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var i=Object.defineProperty;var t=(e,r)=>i(e,"name",{value:r,configurable:!0});import{realpathSync as c}from"node:fs";import{pathToFileURL as f}from"node:url";import{McpServer as p}from"@modelcontextprotocol/sdk/server/mcp.js";async function u(e,r,s){const n=await fetch(e,r);if(!n.ok){const a=s??`fetch ${e}`;throw new Error(`Failed to ${a}: ${n.status} ${n.statusText}`)}return n.text()}t(u,"fetchMarkdown");function m(e,r){return e.type===r}t(m,"isNodeType");function v(e){return Array.from(new Set(e))}t(v,"uniq");function h(e){return e instanceof Error?e.message:"Unknown error"}t(h,"getErrorMessage");function g(e){if(!process.argv[1])return!1;const r=c(process.argv[1]),s=f(r);return e===s.href}t(g,"isEntryFile");var l="0.1.12-next.0",o={version:l};const w=new p({name:"Vera Design System",version:o.version},{capabilities:{tools:{}}});export{m as a,u as f,h as g,g as i,o as p,w as s,v as u};
|
package/dist/transports/http.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var v=Object.defineProperty;var i=(e,s)=>v(e,"name",{value:s,configurable:!0});import{StreamableHTTPServerTransport as f}from"@modelcontextprotocol/sdk/server/streamableHttp.js";import{isInitializeRequest as g}from"@modelcontextprotocol/sdk/types.js";import I from"cors";import l from"express";import{randomUUID as S}from"node:crypto";import{s as m,p as T,i as w}from"../server-
|
|
2
|
+
var v=Object.defineProperty;var i=(e,s)=>v(e,"name",{value:s,configurable:!0});import{StreamableHTTPServerTransport as f}from"@modelcontextprotocol/sdk/server/streamableHttp.js";import{isInitializeRequest as g}from"@modelcontextprotocol/sdk/types.js";import I from"cors";import l from"express";import{randomUUID as S}from"node:crypto";import{s as m,p as T,i as w}from"../server-BYQkWNGP.js";import{i as y}from"../index-louYwcui.js";import"node:fs";import"node:url";import"@modelcontextprotocol/sdk/server/mcp.js";import"@gemini-suite/design-colors/generic";import"@gemini-suite/design-icons";import"@gemini-suite/design-media-queries";import"remark-parse";import"unified";import"zod";import"@gemini-suite/design-colors/flat";const t=l(),P=process.env.CORS_ORIGIN?.split(",")??"*";t.use(I({origin:P,exposedHeaders:["Mcp-Session-Id"],allowedHeaders:["Content-Type","mcp-session-id"]})),t.use(l.json());const n=new Map;t.post("/mcp",async(e,s)=>{const r=e.headers["mcp-session-id"];let o;if(r&&n.has(r))o=n.get(r);else if(!r&&g(e.body))o=new f({sessionIdGenerator:i(()=>S(),"sessionIdGenerator"),onsessioninitialized:i(h=>{n.set(h,o)},"onsessioninitialized")}),o.onclose=()=>{o.sessionId&&n.has(o.sessionId)&&n.delete(o.sessionId)},await y(m),await m.connect(o);else return s.status(400).json({error:{message:"Bad Request: No valid session ID provided"}});await o.handleRequest(e,s,e.body)});const d=i(async(e,s)=>{const r=e.headers["mcp-session-id"];if(!r||!n.has(r))return s.status(404).send("Invalid or missing session ID");await n.get(r).handleRequest(e,s)},"handleSessionRequest");t.get("/mcp",d),t.delete("/mcp",d),t.get("/",(e,s)=>{s.json({name:"Vera MCP Server",version:T.version,description:"MCP server for Vera Design System",endpoints:{"/":"Server information (this response)","/mcp":"Streamable HTTP endpoint for MCP connection","/health":"Health check endpoint"}})}),t.get("/health",(e,s)=>{s.json({status:"healthy",timestamp:new Date().toISOString(),uptime:process.uptime()})});const a=process.env.HOST??"localhost",p=process.env.PORT?Number(process.env.PORT):3e3;let c=null;(process.argv.includes("--auto-run")||w(import.meta.url))&&(c=t.listen(p,a,e=>{e&&(console.error("\u274C Failed to start server:",e),process.exit(1)),console.log(`\u{1F680} Vera MCP Server running on http://${a}:${p}`),console.log(`\u{1F517} Connect via http://${a}:${p}/mcp`)}));const u=i(async()=>{const e=Array.from(n.values()).map(s=>s.close());c&&e.push(new Promise(s=>c.close(()=>s()))),await Promise.allSettled(e),console.log("\u{1F44B} Server shut down gracefully"),process.exit(0)},"cleanup");process.on("SIGTERM",u),process.on("SIGINT",u);export{t as default};
|
package/dist/transports/stdio.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var s=Object.defineProperty;var t=(o,r)=>s(o,"name",{value:r,configurable:!0});import{StdioServerTransport as e}from"@modelcontextprotocol/sdk/server/stdio.js";import{s as i}from"../server-
|
|
2
|
+
var s=Object.defineProperty;var t=(o,r)=>s(o,"name",{value:r,configurable:!0});import{StdioServerTransport as e}from"@modelcontextprotocol/sdk/server/stdio.js";import{s as i}from"../server-BYQkWNGP.js";import{i as p}from"../index-louYwcui.js";import"node:fs";import"node:url";import"@modelcontextprotocol/sdk/server/mcp.js";import"@gemini-suite/design-colors/generic";import"@gemini-suite/design-icons";import"@gemini-suite/design-media-queries";import"remark-parse";import"unified";import"zod";import"@gemini-suite/design-colors/flat";async function a(){await p(i);const o=new e;await i.connect(o);const r=t(async()=>{await o.close(),process.exit(0)},"cleanup");process.on("SIGTERM",r),process.on("SIGINT",r)}t(a,"main"),a().catch(o=>{console.error("\u274C Failed to start server:",o),process.exit(1)});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gemini-suite/vera-mcp",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12-next.0",
|
|
4
4
|
"description": "An MCP server that connects AI tools to the Vera Design System",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"inspect:http": "yarn dlx -q @modelcontextprotocol/inspector --transport http --server-url http://localhost:3000/mcp"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@gemini-suite/design-colors": "^3.0.
|
|
54
|
+
"@gemini-suite/design-colors": "^3.1.0-next.0",
|
|
55
55
|
"@gemini-suite/design-icons": "^1.9.9",
|
|
56
56
|
"@gemini-suite/design-media-queries": "^1.3.18",
|
|
57
57
|
"@modelcontextprotocol/sdk": "1.26.0",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"zod": "3.25.76"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@gemini-suite/vera-react": "1.
|
|
70
|
+
"@gemini-suite/vera-react": "1.7.0-next.0",
|
|
71
71
|
"@types/node": "22.19.7",
|
|
72
72
|
"@volue/eslint-config": "1.3.12",
|
|
73
73
|
"eslint": "9.39.2",
|
package/dist/server-De7qnBwD.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var i=Object.defineProperty;var t=(r,e)=>i(r,"name",{value:e,configurable:!0});import{realpathSync as c}from"node:fs";import{pathToFileURL as f}from"node:url";import{McpServer as p}from"@modelcontextprotocol/sdk/server/mcp.js";async function u(r,e,s){const n=await fetch(r,e);if(!n.ok){const a=s??`fetch ${r}`;throw new Error(`Failed to ${a}: ${n.status} ${n.statusText}`)}return n.text()}t(u,"fetchMarkdown");function m(r,e){return r.type===e}t(m,"isNodeType");function v(r){return Array.from(new Set(r))}t(v,"uniq");function h(r){return r instanceof Error?r.message:"Unknown error"}t(h,"getErrorMessage");function g(r){if(!process.argv[1])return!1;const e=c(process.argv[1]),s=f(e);return r===s.href}t(g,"isEntryFile");var l="0.1.10",o={version:l};const w=new p({name:"Vera Design System",version:o.version},{capabilities:{tools:{}}});export{m as a,u as f,h as g,g as i,o as p,w as s,v as u};
|