@dialpad/dialtone-mcp-server 1.0.1 → 1.1.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.
Files changed (3) hide show
  1. package/README.md +176 -0
  2. package/build/index.js +20628 -864
  3. package/package.json +8 -6
package/README.md ADDED
@@ -0,0 +1,176 @@
1
+ # Dialtone MCP Server
2
+
3
+ A [Model Context Protocol (MCP)](https://modelcontextprotocol.io) server that provides AI assistants with search access to Dialtone's design system: utility classes, design tokens, and Vue components.
4
+
5
+ ## Quick Start
6
+
7
+ ### 1. Build
8
+
9
+ From the monorepo root:
10
+
11
+ ```bash
12
+ pnpm install
13
+ pnpm nx run dialtone-mcp-server:build
14
+ ```
15
+
16
+ ### 2. Test Interactively
17
+
18
+ Try out search queries (must be run from the package directory):
19
+
20
+ ```bash
21
+ # Navigate to the package directory first!
22
+ cd packages/dialtone-mcp-server
23
+
24
+ # Then run the interactive tool
25
+ pnpm run interactive
26
+ ```
27
+
28
+ Or use tsx directly from anywhere:
29
+ ```bash
30
+ npx tsx packages/dialtone-mcp-server/interactive-search.ts
31
+ ```
32
+
33
+ **Query Format:** Use keywords only, not questions.
34
+ - ✓ Good: `padding 8px`, `color primary`, `button`
35
+ - ✗ Bad: `how do I add padding?`, `what button component exists?`
36
+
37
+ Example session:
38
+ ```
39
+ Select a search tool:
40
+ 1. Utility Classes
41
+ 2. Design Tokens
42
+ 3. Components
43
+
44
+ Enter 1, 2, or 3: 1
45
+
46
+ > padding 8px
47
+ Found 8 results:
48
+ 1. d-p8
49
+ 2. d-pt8
50
+ 3. d-pr8
51
+ 4. d-pb8
52
+ ...
53
+ ```
54
+
55
+ Type `help` for more examples, `switch` to change tools, `quit` to exit.
56
+
57
+ ### 3. Configure with Claude Desktop
58
+
59
+ Add to `~/Library/Application Support/Claude/claude_desktop_config.json` (MacOS) or `%APPDATA%/Claude/claude_desktop_config.json` (Windows):
60
+
61
+ ```json
62
+ {
63
+ "mcpServers": {
64
+ "dialtone": {
65
+ "command": "node",
66
+ "args": [
67
+ "/ABSOLUTE/PATH/TO/dialtone/packages/dialtone-mcp-server/build/index.js"
68
+ ]
69
+ }
70
+ }
71
+ }
72
+ ```
73
+
74
+ **Important:**
75
+ - Use the absolute path to your dialtone repo
76
+ - Restart Claude Desktop completely after updating the config
77
+ - Look for the 🔌 icon to confirm connection
78
+
79
+ **Finding your absolute path:**
80
+ ```bash
81
+ cd /path/to/dialtone
82
+ pwd
83
+ # Use the output + /packages/dialtone-mcp-server/build/index.js
84
+ ```
85
+
86
+ ## What You Can Search
87
+
88
+ ### 1. Utility Classes (3,315 classes)
89
+ Find CSS utility classes for styling HTML elements.
90
+
91
+ **Example queries:**
92
+ - `padding 8px` → d-p8, d-pt8, d-pr8, d-pb8, d-pl8, d-px8, d-py8
93
+ - `display flex` → d-d-flex, d-d-inline-flex
94
+ - `width 100%` → d-w100p
95
+ - `margin top auto` → d-mt-auto
96
+ - `text align center` → d-ta-center
97
+
98
+ ### 2. Design Tokens (5,691 tokens)
99
+ Search for design tokens (CSS variables).
100
+
101
+ **Example queries:**
102
+ - `color foreground primary` → --dt-color-foreground-primary
103
+ - `space 400` → --dt-space-400, --dt-space-400-negative
104
+ - `font family` → --dt-font-family-body, --dt-font-family-expressive
105
+ - `font weight bold` → --dt-font-weight-bold
106
+
107
+ ### 3. Components (87 components)
108
+ Discover Vue components with props, events, and slots.
109
+
110
+ **Example queries:**
111
+ - `button` → DtButton, DtButtonGroup, DtBanner (29 results)
112
+ - `modal` → DtModal, DtBanner, DtDropdown (6 results)
113
+ - `checkbox` → DtCheckbox, DtCheckboxGroup, DtRadio
114
+
115
+ ## Development
116
+
117
+ ### Project Structure
118
+
119
+ ```
120
+ packages/dialtone-mcp-server/
121
+ ├── src/
122
+ │ ├── index.ts # MCP server setup
123
+ │ ├── types.ts # TypeScript interfaces
124
+ │ ├── data.ts # Data imports
125
+ │ ├── utils/filters.ts # Smart filtering
126
+ │ └── tools/ # Search implementations
127
+ │ ├── utility-classes.ts
128
+ │ ├── tokens.ts
129
+ │ └── components.ts
130
+ ├── build/ # Compiled output
131
+ ├── test-search.js # Automated tests
132
+ ├── interactive-search.js # Interactive CLI tool
133
+ └── README.md
134
+ ```
135
+
136
+ ### Run Tests
137
+
138
+ From the package directory:
139
+ ```bash
140
+ cd packages/dialtone-mcp-server
141
+ pnpm run test
142
+ ```
143
+
144
+ Or from monorepo root:
145
+ ```bash
146
+ node packages/dialtone-mcp-server/test-search.js
147
+ ```
148
+
149
+ Expected: `Overall Success Rate: 100%` (77/77 tests)
150
+
151
+ ### Rebuild After Changes
152
+
153
+ ```bash
154
+ pnpm nx run dialtone-mcp-server:build
155
+ ```
156
+
157
+ ## Troubleshooting
158
+
159
+ **MCP server not connecting:**
160
+ 1. Verify `build/index.js` exists
161
+ 2. Check the path in config is absolute (not relative)
162
+ 3. Restart Claude Desktop completely
163
+ 4. Check Claude Desktop logs for errors
164
+
165
+ **Test the server manually:**
166
+ ```bash
167
+ node build/index.js
168
+ # Should print: "Dialtone MCP Server running on stdio"
169
+ # Press Ctrl+C to exit
170
+ ```
171
+
172
+ ## Resources
173
+
174
+ - [MCP Documentation](https://modelcontextprotocol.io)
175
+ - [Dialtone Docs](https://dialtone.dialpad.com)
176
+ - [Search Implementation Details](./SEARCH_REFERENCE.md)