How do I use Bootstrap Studio MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Bootstrap Studio MCP Server analyze 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

by fengweimian

Overview Schema Related Servers Score Discussions

TypeScript

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
`bs_read_project`	Parse a `.bsdesign` file and return a comprehensive project overview
`bs_list_pages`	List all pages with metadata and component counts
`bs_get_page_tree`	Get the full component tree for a specific page
`bs_find_components`	Search components by type, label, or text content
`bs_get_css`	Extract all custom CSS/SASS code from the project
`bs_get_js`	Extract all custom JavaScript code from the project
`bs_get_text_content`	Extract all visible text from a page

Code Generation (5 tools)

Tool	Description
`bs_generate_component`	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)
`bs_generate_layout`	Generate complete page layouts (full-page, dashboard)
`bs_generate_custom_css`	Generate custom CSS with responsive breakpoints
`bs_generate_custom_js`	Generate custom JavaScript (smooth scroll, navbar effects, form validation, tooltips, etc.)
`bs_compare_versions`	Check Bootstrap 4 to 5 class name migrations

Documentation Lookup (2 tools)

Tool	Description
`bs_lookup_class`	Look up Bootstrap 5 CSS class documentation
`bs_search_component`	Search Bootstrap 5 component reference with code examples

Project Editing (6 tools)

Tool	Description
`bs_update_component`	Update component properties, CSS classes, text, or label
`bs_add_component`	Add a new component at a specified position in the tree
`bs_remove_component`	Remove a component from a page by its path
`bs_set_css_code`	Write custom CSS using Bootstrap Studio's native structured block format
`bs_set_js_code`	Write custom JavaScript code
`bs_batch_update`	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 build

Configuration

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 个工具）

工具	说明
`bs_read_project`	解析 `.bsdesign` 文件，返回完整项目概览
`bs_list_pages`	列出所有页面及其元数据和组件数量
`bs_get_page_tree`	获取指定页面的完整组件树
`bs_find_components`	按类型、标签或文本内容搜索组件
`bs_get_css`	提取项目中所有自定义 CSS/SASS 代码
`bs_get_js`	提取项目中所有自定义 JavaScript 代码
`bs_get_text_content`	提取页面中所有可见文本

代码生成（5 个工具）

工具	说明
`bs_generate_component`	生成 Bootstrap 5 组件 HTML（21 种组件：导航栏、卡片、表单、模态框、表格、轮播、折叠面板、提示框、徽章、面包屑、进度条、加载动画、英雄区、特性区、页脚、联系表单、定价表、用户评价、时间线、常见问题、数据统计）
`bs_generate_layout`	生成完整页面布局（全页面、仪表盘）
`bs_generate_custom_css`	生成包含响应式断点的自定义 CSS
`bs_generate_custom_js`	生成自定义 JavaScript（平滑滚动、导航栏效果、表单验证、提示框等）
`bs_compare_versions`	检查 Bootstrap 4 到 5 的类名迁移

文档查询（2 个工具）

工具	说明
`bs_lookup_class`	查询 Bootstrap 5 CSS 类名文档
`bs_search_component`	搜索 Bootstrap 5 组件参考和代码示例

项目编辑（6 个工具）

工具	说明
`bs_update_component`	修改组件属性、CSS 类、文本或标签
`bs_add_component`	在指定位置添加新组件
`bs_remove_component`	按路径删除组件
`bs_set_css_code`	写入自定义 CSS（Bootstrap Studio 原生结构化格式）
`bs_set_js_code`	写入自定义 JavaScript 代码
`bs_batch_update`	批量修改多个组件（一次文件写入）

安装

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

Install Server

license - not found

quality

maintenance

How are these scores calculated?

Maintenance

–Maintainers

–Response time

–Release cycle

–Releases (12mo)

Commit activity

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Tools

Related MCP Servers

Components Build MCP
Developer Tools Documentation Access Code Analysis
getlokiui
A
license
B
quality
D
maintenance
Provides 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.
Updated 8 months ago (2025-12-03 07:48 UTC)
11
8
Apache 2.0
Webpixels MCP Serverofficial
Developer Tools Content Management Systems Web Scraping
webpixels
A
license
A
quality
D
maintenance
Enables 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.
Updated 6 months ago (2026-02-09 10:48 UTC)
5
6
3
MIT
shadcn-svelte-mcp
Developer Tools Web Scraping Documentation Access
Michael-Obele
A
license
-
quality
A
maintenance
Provides real-time access to shadcn-svelte component documentation and developer utilities using web scraping.
Updated 8 days ago (2026-08-03 15:44 UTC)
58
MIT
SIN-Code-Frontend-Design-Skill
Design Tools Developer Tools
OpenSIN-Code
F
license
A
quality
C
maintenance
Provides 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.
Updated a month ago (2026-07-13 17:16 UTC)
8

View all related MCP servers

Related MCP Connectors

renCosta2025-context7fork
Get up-to-date, version-specific documentation and code examples from official sources directly in…
miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
leandrogavidia-vechain-mcp-server
Search VeChain documentation, query on-chain data, and fetch fee suggestions with direct links to…

View all MCP Connectors

Latest Blog Posts

Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)
By Om-Shree-0709 on July 25, 2026.
mcp
Agent Identity
OAuth 2.1
Your AI Chatbot Just Exposed Your CEO's Salary to an Intern
By Om-Shree-0709 on July 2, 2026.
Agent Identity
MCP Security
OAuth Delegation
Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)
By Om-Shree-0709 on June 30, 2026.
Agentic Ai
Prompt Injection
WebAssembly

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

Bootstrap Studio MCP Server

Features

Project Analysis (7 tools)

Code Generation (5 tools)

Documentation Lookup (2 tools)

Project Editing (6 tools)

Installation

Configuration

Requirements

Bootstrap Studio MCP 服务器（中文说明）

功能

项目分析（7 个工具）

代码生成（5 个工具）

文档查询（2 个工具）

项目编辑（6 个工具）

安装

配置

环境要求

Maintenance

Resources

Looking for Admin?

Tools

Related MCP Servers

Components Build MCP

Webpixels MCP Serverofficial

shadcn-svelte-mcp

SIN-Code-Frontend-Design-Skill

Related MCP Connectors

Latest Blog Posts

MCP directory API