流线型MCP服务器

一个全面的模型上下文协议（MCP）服务器，用于在人工智能的帮助下构建Streamlit应用程序。此服务器提供 106个工具（100%完成！） 涵盖Streamlit组件，从基本文本元素到复杂的数据可视化、布局、状态指示器、媒体、聊天界面、导航、状态管理、身份验证和数据连接。

特性

🎯 关键能力

🎭 端到端编排：从绘图到验证实施的完整工作流程
🎨 绘图解释器：通过自动单页/多页检测将草图和线框直接转换为代码
✅ 内置验证：根据计划和最佳做法验证实施情况
AI驱动的页面规划器：分析需求，并使用最佳实践生成完整的页面代码
103个流线型工具 （100%完成！🎉): 由API官方结构组织的Streamlit组件的全面覆盖
代码生成：自动生成格式正确的Streamlit代码
模板库：用于仪表板、数据浏览器、聊天界面等的预构建模板
最佳实践：内置组件使用和应用程序架构建议
资源管理：11个用于访问指南、代码片段和模板的工具

🔄 新工作流工具

1.编排工具(`orchestrate_app_from_drawing`)

完整的端到端工作流程：

获取绘图 → 解释组件和结构
了解组件 → 提取页面、功能、依赖关系
计划完整应用程序 → 始终从完整的应用程序计划开始（适用于多页）
计划每一页 → 创建个人页面计划
执行 → 为每个页面分别生成代码
验证 → 对照计划和要求进行检查

2.图纸翻译(`interpret_page_drawing`)

通过多页检测增强：

自动检测单页与多页应用程序
通往适当规划工作流程的路线
为多页应用程序创建完整应用程序计划+单个页面计划
使用最佳实践生成代码

3.验证工具(`validate_implementation`)

全面的代码验证：

部件存在检查
最佳实践合规性
计划对齐验证
评分反馈（0-100）

📊 组件覆盖范围

显示与交互（已实施66个工具✅)

文本元素 （11工具✅): 标题、标题、标记、代码、LaTeX、分隔符、徽章
输入部件组 （10个工具✅): 按钮、滑块、文本输入、选择器、文件上传器
数据显示 （6工具✅): 数据帧、数据编辑器、表、指标、JSON查看器、列配置
图表（12工具✅): 线条、条形图、面积图、散点图、地图、Plotly、Altair、Vega Lite、Bokeh、PyDeck、Graphviz、Pyplot
布局（9工具✅): 列、选项卡、扩展器、容器、侧边栏、弹出窗口、对话框、空、表单
状态元素 （10个工具✅): 进度条、旋转器、状态容器、吐司、成功/错误/信息/警告消息、气球、雪
媒体元素 （5工具✅): 图像、音频、视频、徽标、链接按钮
聊天元素 （3工具✅): 聊天消息、聊天输入、流媒体输出

应用逻辑（已实施25个工具✅)

导航（5工具✅): s.navigation（），页面链接，页面切换，查询参数
状态管理 （5工具✅): 会话状态init/get/set/clear，状态模式
执行流程 （5工具✅): 片段、重新运行、停止、表单提交、执行模式
认证（5工具✅): st.login（）、st.logout（）、s.user、身份验证模式、OIDC配置
数据连接 （5工具✅): SQL、雪花、自定义连接、连接配置、模式

安装

先决条件

Python 3.10或更高版本
Claude Code或其他MCP客户端

从源代码安装

使用紫外线（推荐-快速和现代）：

# Clone the repository
cd mcp_streamlit

# Install UV if you haven't already
curl -LsSf https://astral.sh/uv/install.sh | sh

# Install the package with all dependencies
uv sync --all-extras

# Or use the automated setup script
./setup.sh

使用pip（传统）：

# Clone the repository
cd mcp_streamlit

# Install the package
pip install -e ".[dev]"

为什么是UV？

UV是一个现代Python包管理器，它是：

⚡ 快10-100倍 比pip
🔒 更可靠 基于锁文件的分辨率
💾 磁盘效率高 具有全局缓存
🎯 更善于解决 复杂的依赖关系

了解更多：

配置

克劳德代码

使用紫外线（推荐）：

{
  "mcpServers": {
    "streamlit": {
      "command": "uv",
      "args": ["run", "python", "-m", "streamlit_mcp.server"],
      "env": {}
    }
  }
}

直接使用Python（如果不使用UV）：

{
  "mcpServers": {
    "streamlit": {
      "command": "python",
      "args": ["-m", "streamlit_mcp.server"],
      "env": {}
    }
  }
}

对于其他MCP客户端

服务器使用stdio进行通信。

使用紫外线：

uv run python -m streamlit_mcp.server

直接使用Python：

python -m streamlit_mcp.server

用法

🔄 推荐工作流程：从绘图到生产

新功能：全编排（最简单的方法！）

使用编排工具完成端到端工作流：

Ask Claude: "Use orchestrate_app_from_drawing with this description:

Multi-page sales dashboard app with 3 pages:
1. Home - Overview dashboard with KPIs and trend charts
2. Data Explorer - Upload and filter sales data
3. Settings - Configuration and user preferences
"

编排者将：

✅ 解释你的图纸/描述
✅ 自动检测单页与多页应用程序
✅ 创建完整的应用程序计划（适用于多页）
✅ 创建个人页面计划
✅ 为每个页面生成代码
✅ 根据计划验证所有内容

备选方案：分步工作流程

要获得更多控制，请单独使用工具：

第一步：解读图纸

interpret_page_drawing(
  drawing_description="Dashboard with sidebar, 4 metrics, 2 charts, data table"
)

第二步：审查计划 （在./palans/中自动创建）

full_plan.md -总体架构（仅限多页）
page_*.md -个人页面计划

步骤3：为每个页面生成代码

plan_streamlit_page(
  description="Home dashboard page",
  page_type="dashboard"
)

步骤4：验证实施

validate_implementation(
  code=your_page_code,
  page_plan_file="./plans/page_home.md",
  page_type="dashboard"
)

1.页面规划（经典方法）

使用AI驱动的页面规划器开始：

Ask Claude: "Plan a dashboard page with metrics, charts, and data filtering"

规划师将：

分析您的需求
推荐最佳组件
建议布局结构
生成完整、可运行的代码

2.逐个组件构建

根据需要添加单个组件：

Ask Claude: "Add a title saying 'Sales Dashboard'"
→ Generates: st.title("Sales Dashboard")

Ask Claude: "Add a slider from 0 to 100"
→ Generates: st.slider("Label", min_value=0, max_value=100)

Ask Claude: "Add a Plotly chart for the data"
→ Generates: st.plotly_chart(data, use_container_width=True)

3.示例工作流

创建数据仪表板

1. "Plan a dashboard page with data upload, metrics, and charts"
2. "Add file uploader for CSV files"
3. "Add 4 metric cards in columns"
4. "Add a line chart and bar chart side by side"
5. "Add a data table at the bottom"

构建聊天界面

1. "Plan a chat page with message history"
2. "Add chat message display"
3. "Add chat input widget"
4. "Add session state for message history"

创建多页应用程序

1. "Plan a multi-page app structure"
2. "Add navigation with pages for Home, Data, Settings"
3. "Add page configuration for wide layout"

可用工具

🔄 工作流程和计划工具（新增！）

编排

orchestrate_app_from_drawing - 从绘图到验证实施的完整端到端工作流程

- 自动检测单页与多页应用程序 - 创建完整应用计划+个人页面计划 - 为每个页面生成代码 - 验证一切

规划

create_app_plan -为多页面应用程序创建全面的完整应用程序计划
create_page_plan -为各个页面制定详细的计划
interpret_page_drawing -使用智能布线将草图/线框转换为代码
plan_streamlit_page -AI驱动的页面设计器（原创规划师）

验证

validate_implementation -根据计划和最佳实践验证代码

- 组件验证 - 最佳实践检查 - 计划对齐验证 - 评分反馈（0-100）

文本元素

add_title -添加标题（st.title）
add_header -添加标题（st.head）
add_subheader -添加子标题（st.subhead）
add_markdown -添加标记文本（st.markdown）
add_text -添加纯文本（st.text）
add_caption -添加标题文本（st.caption）
add_code -显示带有语法高亮显示的代码（st.code）
add_latex -显示LaTeX方程（st.LaTeX）
add_divider -添加水平分隔符（st.divider）
add_html -显示原始HTML（st.HTML）
add_badge -添加徽章（st.badge）

输入部件组

add_button -添加按钮（st.button）
add_checkbox -添加复选框（st.checkbox）
add_toggle -添加切换开关（st.toggle）
add_radio -添加单选按钮（st.radio）
add_selectbox -添加下拉菜单（st.select框）
add_multiselect -添加多选（st.multiselect）
add_slider -添加滑块（st.slider）
add_select_slider -添加选择滑块（st.select_slider）
add_text_input -添加文本输入（st.text_input）
add_text_area -添加文本区域（st.text_area）
add_number_input -添加数字输入（st.number_input）
add_date_input -添加日期选择器（st.date_input）
add_time_input -添加时间选择器（st.time_input）
add_file_uploader -添加文件上传程序（st.file_uploader）
add_camera_input -添加摄像头输入（st.camera_input）
add_color_picker -添加颜色选择器（st.color_picker）

页面规划

plan_streamlit_page - AI驱动的页面设计器

- 分析需求 - 推荐组件 - 建议布局 - 生成完整代码 - 提供替代方案

建筑

项目结构

streamlit_mcp/
├── server.py                   # Main MCP server
├── tools/
│   ├── display/               # Display & interaction tools
│   │   ├── text.py           # Text elements
│   │   ├── widgets.py        # Input widgets
│   │   ├── data.py           # Data display
│   │   ├── charts.py         # Charts & visualizations
│   │   ├── media.py          # Media elements
│   │   ├── layout.py         # Layouts & containers
│   │   ├── chat.py           # Chat elements
│   │   └── status.py         # Status elements
│   ├── logic/                 # Application logic tools
│   │   ├── auth.py           # Authentication
│   │   ├── navigation.py     # Navigation & pages
│   │   ├── execution.py      # Execution flow
│   │   ├── state.py          # State management
│   │   ├── connections.py    # Data connections
│   │   └── components.py     # Custom components
│   ├── config/                # Configuration tools
│   │   ├── page_config.py
│   │   └── theme.py
│   ├── planner.py            # Page planner (KEY TOOL)
│   └── runtime.py            # Server management
├── templates/                 # Template resources
├── resources/                 # MCP resources
└── utils/                     # Utilities
    ├── codegen.py            # Code generation
    └── schemas.py            # JSON schemas

代码生成

服务器使用复杂的代码生成系统，该系统：

自动管理导入
处理适当的压痕
验证参数
在需要时生成示例数据
遵循Streamlit的最佳实践

工具组织

工具按照Streamlit的官方API结构组织：

显示与交互 -页面元素（文本、数据、图表、小部件、媒体、布局、聊天、状态）
应用逻辑 -身份验证、导航、执行、状态、连接、组件
配置 -页面配置、主题、选项
开发者工具 -测试，CLI

示例

示例1：简单仪表板

import streamlit as st
import pandas as pd
import numpy as np

st.set_page_config(
    page_title="Dashboard",
    page_icon="📊",
    layout="wide"
)

st.title("📊 Dashboard")

# Metrics
col1, col2, col3, col4 = st.columns(4)
with col1:
    st.metric("Total Sales", "$45.2K", "+12%")
with col2:
    st.metric("Customers", "1,234", "+5%")
with col3:
    st.metric("Orders", "567", "-2%")
with col4:
    st.metric("Revenue", "$89.4K", "+8%")

# Charts
data = pd.DataFrame(np.random.randn(20, 3), columns=['A', 'B', 'C'])
st.line_chart(data)

示例2：带上传功能的数据浏览器

import streamlit as st
import pandas as pd

st.title("🔍 Data Explorer")

uploaded_file = st.file_uploader("Upload CSV", type=['csv'])

if uploaded_file:
    df = pd.read_csv(uploaded_file)

    st.metric("Rows", len(df))
    st.metric("Columns", len(df.columns))

    st.subheader("Data Preview")
    st.dataframe(df)

    st.subheader("Summary Statistics")
    st.dataframe(df.describe())

示例3：聊天界面

import streamlit as st

st.title("💬 Chat")

if "messages" not in st.session_state:
    st.session_state.messages = []

for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])

if prompt := st.chat_input("Your message"):
    st.session_state.messages.append({"role": "user", "content": prompt})
    with st.chat_message("user"):
        st.markdown(prompt)

    # Generate response
    response = f"Echo: {prompt}"
    with st.chat_message("assistant"):
        st.markdown(response)
    st.session_state.messages.append({"role": "assistant", "content": response})

发展

运行测试

运行所有测试：

pytest tests/

运行单个测试文件：

# Comprehensive server and tool tests
python tests/test_server.py

# Security vulnerability verification tests
python tests/test_security_fixes.py

# Drawing interpreter tests
python tests/test_drawing_tool.py

添加新工具

在适当的模块中创建工具功能
将工具定义添加到TOOLS列表
在server.py中注册
更新文档

代码风格

关注PEP 8
使用类型提示
添加文档字符串
跑 black 和 ruff 用于格式化

路线图

第一阶段✅ 完成

✅ 核心服务器基础设施
✅ 文本元素（11个工具）
✅ 输入小部件（10个工具）
✅ 页面规划器（关键工具）
✅ 代码生成实用程序
✅ 资源管理（11种工具）

第2阶段✅ 完成

✅ 图表和可视化（12个工具）
✅ 布局和容器（9个工具）
✅ 数据显示（6个工具）

第三期✅ 完成

✅ 状态元素（10个工具）
✅ 媒体元素（5个工具）

阶段4✅ 完成

✅ 聊天元素（3个工具）
✅ 导航（5个工具）
✅ 状态管理（5个工具）
✅ 执行流程（5个工具）

阶段5✅ 完成（100%里程碑！）

✅ 身份验证（5个工具）：st.login（）、st.logout（）、s.user、patterns、OIDC配置
✅ 数据连接（5个工具）：SQL、Snowflake、自定义连接、配置、模式

🎉 全部103个核心工具都已实现！100%完成！

第6阶段（未来增强）

⏳ 运行时管理（3个工具）
⏳ 附加模板
⏳ 测试工具
⏳ CLI命令

故障排除

服务器无法启动

问题: ModuleNotFoundError: No module named 'mcp'

溶液（含紫外线）：

# Install dependencies
uv sync --all-extras

# Verify installation
uv run python -c "from streamlit_mcp.server import run; print('✅ Server ready!')"

解决方案（带pip）：

# Install dependencies
pip install -e ".[dev]"

# Verify installation
python -c "from streamlit_mcp.server import run; print('✅ Server ready!')"

问题: ImportError 或其他Python错误

解决方案:

检查Python版本： python --version （需要3.10+）
使用紫外线： uv sync --all-extras
使用pip：尝试重新安装： pip install -e ".[dev]" --force-reinstall
检查您的环境中是否存在冲突的包

Claude代码集成问题

问题：Claude Code看不到MCP服务器

解决方案:

检查配置文件位置：

- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json - Linux： ~/.config/Claude/claude_desktop_config.json - 窗户： %APPDATA%\Claude\claude_desktop_config.json

验证JSON语法（使用JSON验证器）

确保配置中的命令路径正确：

使用紫外线：

   {
     "mcpServers": {
       "streamlit": {
         "command": "uv",
         "args": ["run", "python", "-m", "streamlit_mcp.server"],
         "env": {}
       }
     }
   }

使用Python：

   {
     "mcpServers": {
       "streamlit": {
         "command": "python",  // or full path: "/usr/bin/python3"
         "args": ["-m", "streamlit_mcp.server"],
         "env": {}
       }
     }
   }

完全重新启动Claude代码

检查克劳德代码日志/控制台是否有错误消息

问题：服务器启动，但命令不起作用

解决方案:

验证服务器是否已列出：询问Claude“列出MCP服务器”
尝试一个简单的命令：“使用streamlit MCP添加标题”
检查其他MCP服务器是否能够隔离问题

生成的代码问题

问题：生成的代码有语法错误

解决方案:

使用验证器：“使用流光灯MCP验证器检查此代码”
复制错误消息并让Claude修复它
检查是否缺少导入或缩进不正确

问题：Streamlit引发弃用警告

解决方案:

检查您的Streamlit版本： uv run pip show streamlit 或 pip show streamlit
必要时更新（UV）： uv sync --upgrade 或（pip）： pip install --upgrade streamlit
某些功能要求Streamlit≥1.40.0

问题：代码运行但不符合预期

解决方案:

根据计划进行验证：使用 validate_implementation 工具
仔细检查生成的代码
尝试用更具体的描述重新生成

编排者/规划师问题

问题：检测到多页应用程序为单页（反之亦然）

解决方案:

在描述中明确：“3页多页应用程序：…”
使用关键字：“页面”、“导航”、“多页”
使用workflow_mode参数： workflow_mode="multi" 或 "single"

问题：生成的计划缺少详细信息

解决方案:

提供更详细的描述
提及具体组件：“4个指标”、“折线图”、“数据表”
指定页面类型：“仪表板”、“data_explorer”、“聊天”

问题：验证分数低

解决方案:

检查验证输出中的建议
确保所需组件存在
遵循Streamlit的最佳实践（缓存、页面配置等）
使用适当的页面类型进行验证

常见错误

错误: FileNotFoundError 加载模板或资源时

解决方案:

确保您在项目目录中
检查一下 streamlit_mcp/resources/ 和 streamlit_mcp/templates/ 存在
重新安装软件包： uv sync 或 pip install -e .

错误：测试失败

解决方案:

# Run tests with verbose output
pytest tests/ -v

# Run specific test file
pytest tests/test_server.py -v

# Check for import issues
python -c "import streamlit_mcp"

错误：权限被拒绝错误

解决方案:

检查文件权限
在Unix/Mac上： chmod +x script.sh
使用UV：尝试 uv sync --user （如果支持）
使用pip：试试 pip install --user -e ".[dev]"

性能问题

问题：编排器速度较慢

解决方案:

集 validate_plans=False 为了更快的执行
集 generate_code=False 如果你只需要计划
将大型应用程序分解为更小的块

问题：大型应用程序需要太长时间

解决方案:

使用 create_page_plan 用于单个页面，而不是完整编排
单独生成页面
缓存中间结果

获取更多帮助

如果问题仍然存在：

检查日志：在控制台输出中查找错误消息
运行诊断: python tests/test_server.py
验证环境: pip list | grep -E "(mcp|streamlit)"
复习示例：检查 examples/ 工作代码目录
报告问题：使用以下命令创建GitHub问题：

- 错误信息 - 重现步骤 - Python 版本 - 环境详细信息

快速诊断

运行此诊断脚本：

使用紫外线：

# Check UV installation
uv --version

# Check Python version
python --version

# Check package installation
uv run python -c "import streamlit_mcp; print('✅ Package imported')"

# Check MCP installation
uv run python -c "import mcp; print('✅ MCP installed')"

# Run server import test
uv run python -c "from streamlit_mcp.server import run; print('✅ Server can run')"

# Run basic tests
uv run pytest tests/test_server.py::test_imports -v

使用pip：

# Check Python version
python --version

# Check package installation
python -c "import streamlit_mcp; print('✅ Package imported')"

# Check MCP installation
python -c "import mcp; print('✅ MCP installed')"

# Run server import test
python -c "from streamlit_mcp.server import run; print('✅ Server can run')"

# Run basic tests
pytest tests/test_server.py::test_imports -v

贡献

欢迎投稿！重点领域：

实施剩余工具
添加模板
改进代码生成
编写测试
文档

资源

许可证

MIT许可证-有关详细信息，请参阅许可证文件

支持

对于问题、疑问或贡献：

GitHub问题：\[创建问题\]
文档：请参阅README.md
示例：请参阅示例/目录

______________________________________________________________________

内置❤️ 面向Streamlit和AI社区

MCP streamlit

快速接入

详细介绍

流线型MCP服务器

特性

🎯 关键能力

🔄 新工作流工具

1.编排工具(orchestrate_app_from_drawing)

2.图纸翻译(interpret_page_drawing)

3.验证工具(validate_implementation)

📊 组件覆盖范围

显示与交互（已实施66个工具✅)

应用逻辑（已实施25个工具✅)

安装

先决条件

从源代码安装

为什么是UV？

配置

克劳德代码

对于其他MCP客户端

用法

🔄 推荐工作流程：从绘图到生产

新功能：全编排（最简单的方法！）

备选方案：分步工作流程

1.页面规划（经典方法）

2.逐个组件构建

3.示例工作流

创建数据仪表板

构建聊天界面

创建多页应用程序

可用工具

🔄 工作流程和计划工具（新增！）

编排

规划

验证

文本元素

输入部件组

页面规划

建筑

项目结构

代码生成

工具组织

示例

示例1：简单仪表板

示例2：带上传功能的数据浏览器

示例3：聊天界面

发展

运行测试

添加新工具

代码风格

路线图

第一阶段✅ 完成

第2阶段✅ 完成

第三期✅ 完成

阶段4✅ 完成

阶段5✅ 完成（100%里程碑！）

第6阶段（未来增强）

故障排除

服务器无法启动

Claude代码集成问题

生成的代码问题

编排者/规划师问题

常见错误

性能问题

获取更多帮助

快速诊断

贡献

资源

许可证

支持

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

1.编排工具(`orchestrate_app_from_drawing`)

2.图纸翻译(`interpret_page_drawing`)

3.验证工具(`validate_implementation`)