@baseline-ui/mcp 0.0.0-nightly-20251125000500 → 0.0.0-nightly-20251202000557
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 +7 -1
- package/dist/guidelines.md +88 -0
- package/dist/index.js +20 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# Baseline UI MCP Server Guidelines
|
|
2
|
+
|
|
3
|
+
This MCP server provides AI assistants with access to Baseline UI's component documentation, icons, and design resources.
|
|
4
|
+
|
|
5
|
+
- Baseline UI is a design system for building accessible and consistent user interfaces.
|
|
6
|
+
- It is built with React and TypeScript and styled with Vanilla Extract.
|
|
7
|
+
- It is also known as BUI.
|
|
8
|
+
- It is a client side design system that depends on global variables like document, window, etc.
|
|
9
|
+
|
|
10
|
+
## Available Tools
|
|
11
|
+
|
|
12
|
+
### Component Documentation
|
|
13
|
+
|
|
14
|
+
**`list_baseline_components`**
|
|
15
|
+
|
|
16
|
+
- Lists all available components in the Baseline UI design system
|
|
17
|
+
- Optional parameter: `includeDescription` (boolean) - includes component descriptions
|
|
18
|
+
- Use this when you need to discover what components are available
|
|
19
|
+
|
|
20
|
+
**`get_baseline_component_info`**
|
|
21
|
+
|
|
22
|
+
- Returns high-level component information: name, description, and available documentation sections
|
|
23
|
+
- Requires: `componentName` (string)
|
|
24
|
+
- Use this before diving into detailed documentation to understand what sections are available
|
|
25
|
+
|
|
26
|
+
**`get_baseline_component_docs`**
|
|
27
|
+
|
|
28
|
+
- Returns complete or section-specific component documentation in markdown format
|
|
29
|
+
- Requires: `componentName` (string)
|
|
30
|
+
- Optional: `sectionName` (string) - get a specific section (e.g., "Usage", "Examples")
|
|
31
|
+
- Use this to read component documentation, examples, and usage patterns
|
|
32
|
+
|
|
33
|
+
**`get_baseline_component_types`**
|
|
34
|
+
|
|
35
|
+
- Returns TypeScript type definitions and prop interfaces for a component
|
|
36
|
+
- Requires: `componentName` (string)
|
|
37
|
+
- Use this when you need to understand component props, their types, and constraints
|
|
38
|
+
|
|
39
|
+
**`get_baseline_component_source`**
|
|
40
|
+
|
|
41
|
+
- Returns the source code implementation of a component
|
|
42
|
+
- Requires: `componentName` (string)
|
|
43
|
+
- Use this to understand how a component is implemented
|
|
44
|
+
|
|
45
|
+
### Icon System
|
|
46
|
+
|
|
47
|
+
**`search_baseline_icons`**
|
|
48
|
+
|
|
49
|
+
- Searches the Baseline UI icon set by name
|
|
50
|
+
- Requires: `terms` (string or array of strings)
|
|
51
|
+
- Returns icon names matching the search terms
|
|
52
|
+
- Import syntax: `import { IconName } from '@baseline-ui/icons/[size]'`
|
|
53
|
+
|
|
54
|
+
### Getting Started
|
|
55
|
+
|
|
56
|
+
**`get_baseline_getting_started`**
|
|
57
|
+
|
|
58
|
+
- Returns complete setup and installation guide for Baseline UI
|
|
59
|
+
- Use this when helping users set up Baseline UI in a new project
|
|
60
|
+
- Always use this for setup-related questions or issues
|
|
61
|
+
|
|
62
|
+
## Recommended Workflow
|
|
63
|
+
|
|
64
|
+
1. **For component discovery**: Use `list_baseline_components` to see available components
|
|
65
|
+
2. **For understanding a component**: Use `get_baseline_component_info` to see available sections
|
|
66
|
+
3. **For detailed documentation**: Use `get_baseline_component_docs` to read full documentation or specific sections
|
|
67
|
+
4. **For implementation details**: Use `get_baseline_component_types` and `get_baseline_component_source`
|
|
68
|
+
5. **For icon selection**: Use `search_baseline_icons` with relevant terms
|
|
69
|
+
6. **For setup**: Use `get_baseline_getting_started` for new projects or setup issues
|
|
70
|
+
|
|
71
|
+
## Styling Guidelines
|
|
72
|
+
|
|
73
|
+
When recommending styling or customization approaches:
|
|
74
|
+
|
|
75
|
+
- **Always prioritize using sprinkles from `@baseline-ui/tokens`** for styling
|
|
76
|
+
- Sprinkles provides a type-safe, zero-runtime CSS utility layer built with Vanilla Extract
|
|
77
|
+
- Use sprinkles for spacing, colors, typography, shadows, and other design tokens
|
|
78
|
+
- Example: `<div className={sprinkles({ padding: 'md', color: 'text.primary' })}>Content</div>`
|
|
79
|
+
- Only use custom CSS when sprinkles doesn't provide the necessary utilities
|
|
80
|
+
- This ensures consistency with the design system and maintains design token governance
|
|
81
|
+
|
|
82
|
+
## Tips for Better Results
|
|
83
|
+
|
|
84
|
+
- When presenting component information to users, format tool results as readable lists or tables, not raw JSON
|
|
85
|
+
- For component documentation, render markdown content with proper formatting and syntax highlighting
|
|
86
|
+
- When suggesting components, mention available sections that users can explore
|
|
87
|
+
- For props and types, highlight required vs optional properties and their constraints
|
|
88
|
+
- When searching icons, try multiple terms if the first search doesn't yield results (e.g., "search", "find", "magnifying")
|
package/dist/index.js
CHANGED
|
@@ -164,6 +164,26 @@ async function startServer() {
|
|
|
164
164
|
name: "baseline-ui-docs-server",
|
|
165
165
|
version: packageJson.version,
|
|
166
166
|
});
|
|
167
|
+
// Register guidelines resource
|
|
168
|
+
server.registerResource("guidelines", "resource://baseline-ui/guidelines.md", {
|
|
169
|
+
description: "Guidelines for using the Baseline UI MCP server",
|
|
170
|
+
mimeType: "text/markdown",
|
|
171
|
+
}, () => {
|
|
172
|
+
const guidelinesPath = path.resolve(__dirname, "guidelines.md");
|
|
173
|
+
if (!fs.existsSync(guidelinesPath)) {
|
|
174
|
+
throw new Error("Guidelines file not found");
|
|
175
|
+
}
|
|
176
|
+
const content = fs.readFileSync(guidelinesPath, "utf8");
|
|
177
|
+
return {
|
|
178
|
+
contents: [
|
|
179
|
+
{
|
|
180
|
+
uri: "resource://baseline-ui/guidelines.md",
|
|
181
|
+
mimeType: "text/markdown",
|
|
182
|
+
text: content,
|
|
183
|
+
},
|
|
184
|
+
],
|
|
185
|
+
};
|
|
186
|
+
});
|
|
167
187
|
// List components tool
|
|
168
188
|
server.registerTool("list_baseline_components", {
|
|
169
189
|
title: "List Baseline UI components",
|
package/package.json
CHANGED