Bootstrap Studio MCP Server
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Bootstrap Studio MCP Serveranalyze my Bootstrap Studio project file"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Bootstrap Studio MCP Server
An MCP (Model Context Protocol) server that provides tools for analyzing Bootstrap Studio .bsdesign project files, generating Bootstrap 5 component code, and looking up Bootstrap documentation. Designed to complement Bootstrap Studio's built-in AI assistant with file-level project analysis and code generation capabilities.
Features
Project Analysis (7 tools)
Tool | Description |
| Parse a |
| List all pages with metadata and component counts |
| Get the full component tree for a specific page |
| Search components by type, label, or text content |
| Extract all custom CSS/SASS code from the project |
| Extract all custom JavaScript code from the project |
| Extract all visible text from a page |
Code Generation (5 tools)
Tool | Description |
| Generate Bootstrap 5 component HTML (21 components: navbar, card, form, modal, table, carousel, accordion, alert, badge, breadcrumb, progress, spinner, hero, features, footer, contact-form, pricing, testimonial, timeline, faq, stats) |
| Generate complete page layouts (full-page, dashboard) |
| Generate custom CSS with responsive breakpoints |
| Generate custom JavaScript (smooth scroll, navbar effects, form validation, tooltips, etc.) |
| Check Bootstrap 4 to 5 class name migrations |
Documentation Lookup (2 tools)
Tool | Description |
| Look up Bootstrap 5 CSS class documentation |
| Search Bootstrap 5 component reference with code examples |
Project Editing (6 tools)
Tool | Description |
| Update component properties, CSS classes, text, or label |
| Add a new component at a specified position in the tree |
| Remove a component from a page by its path |
| Write custom CSS using Bootstrap Studio's native structured block format |
| Write custom JavaScript code |
| Update multiple components in a single request (single file write) |
Related MCP server: Webpixels MCP Server
Installation
git clone https://github.com/niz1230/bootstrap-studio-mcp-server.git
cd bootstrap-studio-mcp-server
npm install
npm run buildConfiguration
Add to your MCP client configuration (e.g., opencode.json):
{
"mcp": {
"bootstrap-studio": {
"type": "local",
"command": ["node", "C:\\path\\to\\bootstrap-studio-mcp-server\\dist\\index.js"]
}
}
}Requirements
Node.js >= 18
npm >= 9
Bootstrap Studio MCP 服务器(中文说明)
一个 MCP(模型上下文协议) 服务器,提供分析 Bootstrap Studio .bsdesign 项目文件、生成 Bootstrap 5 组件代码以及查询 Bootstrap 文档的工具。旨在补充 Bootstrap Studio 内置 AI 助手的功能,提供文件级项目分析和代码生成能力。
功能
项目分析(7 个工具)
工具 | 说明 |
| 解析 |
| 列出所有页面及其元数据和组件数量 |
| 获取指定页面的完整组件树 |
| 按类型、标签或文本内容搜索组件 |
| 提取项目中所有自定义 CSS/SASS 代码 |
| 提取项目中所有自定义 JavaScript 代码 |
| 提取页面中所有可见文本 |
代码生成(5 个工具)
工具 | 说明 |
| 生成 Bootstrap 5 组件 HTML(21 种组件:导航栏、卡片、表单、模态框、表格、轮播、折叠面板、提示框、徽章、面包屑、进度条、加载动画、英雄区、特性区、页脚、联系表单、定价表、用户评价、时间线、常见问题、数据统计) |
| 生成完整页面布局(全页面、仪表盘) |
| 生成包含响应式断点的自定义 CSS |
| 生成自定义 JavaScript(平滑滚动、导航栏效果、表单验证、提示框等) |
| 检查 Bootstrap 4 到 5 的类名迁移 |
文档查询(2 个工具)
工具 | 说明 |
| 查询 Bootstrap 5 CSS 类名文档 |
| 搜索 Bootstrap 5 组件参考和代码示例 |
项目编辑(6 个工具)
工具 | 说明 |
| 修改组件属性、CSS 类、文本或标签 |
| 在指定位置添加新组件 |
| 按路径删除组件 |
| 写入自定义 CSS(Bootstrap Studio 原生结构化格式) |
| 写入自定义 JavaScript 代码 |
| 批量修改多个组件(一次文件写入) |
安装
git clone https://github.com/niz1230/bootstrap-studio-mcp-server.git
cd bootstrap-studio-mcp-server
npm install
npm run build配置
添加到 MCP 客户端配置中(例如 opencode.json):
{
"mcp": {
"bootstrap-studio": {
"type": "local",
"command": ["node", "C:\\path\\to\\bootstrap-studio-mcp-server\\dist\\index.js"]
}
}
}环境要求
Node.js >= 18
npm >= 9
Available Tools
8 toolsbs_compare_versionsCompare Bootstrap Class Between VersionsARead-onlyIdempotent
Check if a Bootstrap CSS class needs migration between Bootstrap 4 and Bootstrap 5.
Handles common renames: mr- -> me-, ml- -> ms-, font-weight- -> fw-, text-left -> text-start, etc.
Args:
class_name (string): The Bootstrap CSS class to check
Returns: Migration suggestion if the class changed between versions.
| Name | Required | Description | Default |
|---|---|---|---|
| class_name | Yes | Bootstrap CSS class name to check |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Description adds behavioral context beyond annotations: specifies it handles common renames between Bootstrap 4 and 5 and returns a migration suggestion if the class changed. Annotations (readOnlyHint, idempotentHint) align, and no contradictions exist.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Description is concise: one sentence for purpose, one for examples, and a structured Args/Returns section. No wasted words, front-loaded with key information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given single parameter, detailed annotations, and no output schema, the description adequately covers what the tool does, what input is needed, and what output to expect (migration suggestion). Complete for its complexity.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Only one parameter (class_name), schema coverage 100%, and description adds minimal value beyond schema's description. The schema already documents the parameter well; the description repeats it with a hint about usage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Title and description clearly state the tool checks migration status of Bootstrap CSS classes between v4 and v5. The verb 'Check' with specific resource ('Bootstrap CSS class migration') distinguishes it from siblings like bs_lookup_class or generation tools.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Description lists common renames (mr- -> me- etc.) providing context for when the tool is useful. However, it does not explicitly state when to use vs alternatives (e.g., not for obtaining current class definition) or when not to use, which would improve guideline clarity.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bs_generate_componentGenerate Bootstrap Component HTMLARead-onlyIdempotent
Generate ready-to-use Bootstrap 5 component HTML that can be pasted into Bootstrap Studio's Custom Code panel.
Generates production-quality HTML for common Bootstrap components with proper attributes and structure.
Available components: accordion, alert, badge, breadcrumb, card, carousel, contact-form, faq, features, footer, form, hero, modal, navbar, pricing, progress, spinner, stats, table, testimonial, timeline
Args:
component (string): Component type to generate
description (string, optional): Context/comments about the component's purpose
Returns: Formatted HTML string for the requested component.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Component type. Available: accordion, alert, badge, breadcrumb, card, carousel, contact-form, faq, features, footer, form, hero, modal, navbar, pricing, progress, spinner, stats, table, testimonial, timeline | |
| description | No | Optional description/comment for the component |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations (readOnlyHint=true, idempotentHint=true, destructiveHint=false) already cover behavioral traits. The description aligns, stating it 'generates' HTML with no side effects, adding context that the output is pasteable.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is well-structured with a summary, available components list, and parameter details. It is concise but the component list is lengthy yet necessary.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (2 params, no output schema), the description fully covers purpose, available components, and return type (HTML string). No gaps for an agent to invoke correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%; the description repeats the same info (component types and optional description). No additional meaning beyond what the schema provides. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states it generates Bootstrap 5 component HTML and lists available components. The title is specific and distinguishes from sibling tools like bs_generate_layout or bs_generate_custom_css.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description mentions 'ready-to-use Bootstrap 5 component HTML that can be pasted into Bootstrap Studio's Custom Code panel,' implying its use case. However, it doesn't explicitly contrast with sibling tools for when to use this vs others, though the component list provides guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bs_generate_custom_cssGenerate Custom CSS CodeARead-onlyIdempotent
Generate custom CSS code based on a description of styling needs. Produces ready-to-paste CSS for Bootstrap Studio's CSS editor.
Includes responsive breakpoints, CSS custom properties, and Bootstrap-compatible patterns.
Args:
request (string): Description of the styling you need (e.g. "hero section with gradient background", "card hover effects")
Returns: Custom CSS code with comments and responsive considerations.
| Name | Required | Description | Default |
|---|---|---|---|
| request | Yes | Description of the CSS/styling you need |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The description adds value beyond annotations by detailing that the output includes responsive breakpoints, CSS custom properties, and Bootstrap-compatible patterns. Annotations already declare readOnlyHint and idempotentHint, so the bar is lower.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded, with the first sentence stating the purpose. It includes structured Args/Returns sections with no wasted words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The description is fairly complete for a generation tool, covering input, output format, and key features (breakpoints, custom properties). No output schema exists, so the description compensates well but could mention error handling or limitations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description adds meaning beyond the schema by providing examples of the request parameter (e.g., 'hero section with gradient background'). Schema coverage is 100%, baseline 3, and the examples enhance understanding.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool generates custom CSS code from a styling description. It distinguishes itself from siblings like bs_generate_custom_js and bs_generate_component by focusing on CSS output.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for CSS generation but does not explicitly state when to use this tool over alternatives. No when-not or alternative suggestions are provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bs_generate_custom_jsGenerate Custom JavaScript CodeARead-onlyIdempotent
Generate custom JavaScript code for Bootstrap Studio's JS editor. Includes common patterns like smooth scroll, navbar effects, form validation, back-to-top buttons, and tooltip initialization.
Args:
request (string): Description of the JavaScript functionality you need
Returns: Custom JS code wrapped in DOMContentLoaded ready to paste.
| Name | Required | Description | Default |
|---|---|---|---|
| request | Yes | Description of the JavaScript/interactivity you need |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already cover read-only, open-world, idempotent, and non-destructive traits. The description adds that output is wrapped in DOMContentLoaded and ready to paste, which is useful behavioral context beyond annotations. No contradictions.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is relatively concise with a clear main sentence, followed by examples and structured args/returns. It is front-loaded but could be slightly more terse without losing value.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (1 param, good annotations, no output schema), the description adequately covers purpose, usage examples, and output format. It does not mention limitations or prerequisites, but the context is sufficient for correct invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The single parameter 'request' has nearly identical description in both schema and tool description. With 100% schema coverage, the description adds no new semantic detail, leading to a baseline score of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool generates custom JavaScript code for Bootstrap Studio's JS editor, lists example patterns, and implies its niche among siblings like bs_generate_custom_css. It is specific, active-voiced, and distinguishes itself as a JS code generator.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explains what the tool does and gives example use cases but does not explicitly state when to use it over alternatives or when not to use it. With siblings like bs_generate_custom_css and bs_generate_component, more guidance would improve selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bs_generate_layoutGenerate Page LayoutARead-onlyIdempotent
Generate a complete Bootstrap 5 page layout structure that can be pasted into Bootstrap Studio.
Available layouts: dashboard, full-page
Args:
layout (string): Layout type to generate
description (string, optional): Context about the layout's purpose
Returns: Complete HTML layout with Bootstrap grid system and components.
| Name | Required | Description | Default |
|---|---|---|---|
| layout | Yes | Layout type. Available: dashboard, full-page | |
| description | No | Optional description for the layout |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and destructiveHint as false, so the description adds value by describing the output (complete HTML layout with Bootstrap grid/system). Does not repeat annotations, but provides sufficient additional context.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences plus a concise Args/Returns block. Front-loaded with main purpose, no redundant or verbose phrasing.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a straightforward layout generation tool with good annotations and schema coverage, the description fully explains what the tool does, its inputs, and output. No missing critical information.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the schema already documents both parameters. The description only restates the available layouts without adding new meaning or examples beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states it generates a Bootstrap 5 page layout for Bootstrap Studio, listing available layouts (dashboard, full-page). Distinguishes from sibling tools like bs_generate_component (component-level) and bs_generate_custom_css/js (style/script-level).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use vs. alternatives. The tool's purpose is clear, but the description lacks 'when not to use' or comparison with sibling tools, leaving the agent to infer usage from context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bs_get_jsGet Custom JavaScript from ProjectARead-onlyIdempotent
Extract all custom JS files and their content from a .bsdesign file.
Bootstrap Studio stores custom scripts in the assets.js section. This tool retrieves them.
Args:
file_path (string): Absolute path to the .bsdesign file
file_name (string, optional): Get a specific JS file by name. If omitted, returns all JS files.
Returns: JS file names and their content blocks.
| Name | Required | Description | Default |
|---|---|---|---|
| file_name | No | Specific JS file name | |
| file_path | Yes | Absolute path to the .bsdesign file |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations indicate read-only, open-world, idempotent, non-destructive behavior. The description adds context about the source (assets.js section) and that it retrieves files, which is consistent and provides extra detail beyond annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise with five sentences, front-loading the main purpose, then detailing arguments and return value. No unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the low complexity (2 parameters, no output schema), the description adequately covers what the tool does, its arguments, and its return value. Annotations provide safety context, making it sufficiently complete for an agent to use correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema covers both parameters with descriptions (100% coverage). The description elaborates by noting file_name is optional and that omitting it returns all JS files, adding value beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The name, title, and description clearly state the tool extracts all custom JS files and their content from a .bsdesign file. It distinguishes from siblings like bs_generate_custom_js, which generates JS rather than extracts.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for retrieving custom JS from a .bsdesign file, but does not explicitly state when to use this tool versus alternatives like bs_generate_custom_js or when not to use it.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bs_get_text_contentGet All Text Content from PageARead-onlyIdempotent
Extract all visible text content from a page in a .bsdesign file.
Useful for reviewing copy, checking placeholder text, or auditing content.
Args:
file_path (string): Absolute path to the .bsdesign file
page_name (string, optional): Page name. If omitted, first page is used.
Returns: All text content found on the page.
| Name | Required | Description | Default |
|---|---|---|---|
| file_path | Yes | Absolute path to the .bsdesign file | |
| page_name | No | Page name (e.g. 'index.html') |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint, idempotentHint, and destructiveHint. Description adds 'visible' text, which is a useful constraint beyond annotations, but does not detail return format or edge cases. With strong annotations, the description is adequate but not exceptional.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Concise, well-structured with clear sections (Args, Returns). Every sentence adds value. No fluff.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Lacks output schema, but description explains return is 'All text content found on the page.' For a simple extraction tool, this is fairly complete. Could specify format (e.g., plain text string or list), but annotations provide safety context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema covers 100% of parameters with descriptions, but the tool description adds value by specifying default behavior for page_name: 'If omitted, first page is used.' This is not in the schema, providing extra guidance.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states 'Extract all visible text content from a page in a .bsdesign file' – specific verb+resource. Distinguishes from sibling tools like bs_generate_layout or bs_get_js by focusing on text extraction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Provides clear use cases ('reviewing copy, checking placeholder text, auditing content') and implies when it's appropriate. However, does not explicitly exclude cases or mention alternatives among siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
bs_lookup_classLook Up Bootstrap CSS ClassARead-onlyIdempotent
Look up documentation for a Bootstrap 5 CSS class. Returns description, usage, and related classes.
Args:
class_name (string): Bootstrap CSS class to look up (e.g. "container", "btn", "d-flex", "g-3")
Returns: Description of the class, its variants, and usage examples.
| Name | Required | Description | Default |
|---|---|---|---|
| class_name | Yes | Bootstrap CSS class to look up |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare the tool as read-only, idempotent, and non-destructive. The description adds return value content (description, variants, examples) but does not contradict annotations.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise, with a brief purpose statement followed by structured parameter/returns sections. No unnecessary content.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple lookup tool with no output schema, the description adequately specifies return value content. It could mention edge cases (e.g., class not found), but overall sufficient.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single parameter. The description reinforces the parameter meaning and provides examples, adding marginal value beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool looks up Bootstrap 5 CSS class documentation, with a specific verb ('Look up') and resource ('Bootstrap CSS class'). It distinguishes from siblings that perform generation or text extraction.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for class documentation needs but does not explicitly address when to avoid using it or mention alternatives. The sibling list provides context for differentiation.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Each tool has a distinct function: extracting text, generating layouts/CSS/JS/components, looking up classes, comparing versions, and retrieving JS files. No overlap in purpose.
All tools follow the 'bs_verb_noun' pattern consistently, using clear action prefixes like 'get', 'generate', 'compare', 'lookup'. No naming anomalies.
Eight tools cover the main needs for a Bootstrap Studio assistant. The count is reasonable and not overwhelming, though a few more utilities (e.g., for managing pages) could be added.
Core workflows are covered: content extraction, layout generation, custom code creation, component generation, and class references. Minor gaps like file manipulation or page management do not hinder typical use.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Get up-to-date, version-specific documentation and code examples from official sources directly in…
Provides tools for searching Google Workspace documentation and much more.
Serves your design system and coding standards to coding agents, so they stop guessing.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Related MCP Servers
- AlicenseBqualityDmaintenanceProvides AI assistants with tools to grade, generate, and validate UI components against the components.build specification. Supports searching documentation, checking compliance, and generating framework-agnostic accessible components.1119Apache 2.0

Webpixels MCP Serverofficial
AlicenseAqualityDmaintenanceEnables AI assistants to search, retrieve, and assemble Bootstrap UI components from the Webpixels library. It provides tools to explore component categories, fetch HTML snippets, and build complete web pages.5143MIT- AlicenseNot gradedqualityAmaintenanceProvides real-time access to shadcn-svelte component documentation and developer utilities using web scraping.58MIT
- FlicenseAqualityCmaintenanceProvides 8 MCP tools for frontend design: load design system, generate components, scaffold pages, review consistency, extract tokens, check WCAG 2.2 AA, test responsiveness, and export to Figma.8
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/fengweimian/bootstrap-studio-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server