Back to Details

bubble

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Bubble Skill

Bubble Skill

Overview

概述

Enables Claude to use Bubble for no-code web application development including managing data, configuring workflows, updating designs, and deploying applications.
让Claude能够使用Bubble进行无代码Web应用开发，包括数据管理、工作流配置、设计更新和应用部署。

Quick Install

快速安装

bash
curl -sSL https://canifi.com/skills/bubble/install.sh | bash
Or manually:
bash
cp -r skills/bubble ~/.canifi/skills/
bash
curl -sSL https://canifi.com/skills/bubble/install.sh | bash
或者手动安装：
bash
cp -r skills/bubble ~/.canifi/skills/

Setup

配置

Configure via canifi-env:
bash
undefined
通过canifi-env进行配置：
bash
undefined

First, ensure canifi-env is installed:

首先，确保已安装canifi-env：

curl -sSL https://canifi.com/install.sh | bash

curl -sSL https://canifi.com/install.sh | bash

canifi-env set BUBBLE_EMAIL "your-email@example.com" canifi-env set BUBBLE_PASSWORD "your-password"
undefined
canifi-env set BUBBLE_EMAIL "your-email@example.com" canifi-env set BUBBLE_PASSWORD "your-password"
undefined

Privacy & Authentication

隐私与认证

Your credentials, your choice. Canifi LifeOS respects your privacy.
你的凭证，由你掌控。 Canifi LifeOS尊重你的隐私。

Option 1: Manual Browser Login (Recommended)

选项1：手动浏览器登录（推荐）

If you prefer not to share credentials with Claude Code:
  1. Complete the Browser Automation Setup using CDP mode
  2. Login to the service manually in the Playwright-controlled Chrome window
  3. Claude will use your authenticated session without ever seeing your password
如果你不想与Claude Code共享凭证：
  1. 使用CDP模式完成浏览器自动化设置
  2. 在Playwright控制的Chrome窗口中手动登录该服务
  3. Claude将使用你的已认证会话，全程不会获取你的密码

Option 2: Environment Variables

选项2：环境变量

If you're comfortable sharing credentials, you can store them locally:
bash
canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"
Note: Credentials stored in canifi-env are only accessible locally on your machine and are never transmitted.
如果你愿意共享凭证，可以将其存储在本地：
bash
canifi-env set SERVICE_EMAIL "your-email"
canifi-env set SERVICE_PASSWORD "your-password"
注意：存储在canifi-env中的凭证仅能在你的本地机器上访问，绝不会被传输。

Capabilities

功能

  • Edit application pages and elements
  • Manage database records
  • Configure workflows and logic
  • View application logs and analytics
  • Deploy to development and production
  • Manage user data and settings
  • 编辑应用页面和元素
  • 管理数据库记录
  • 配置工作流和逻辑
  • 查看应用日志和分析数据
  • 部署到开发和生产环境
  • 管理用户数据和设置

Usage Examples

使用示例

Example 1: Update Database

示例1：更新数据库

User: "Add a new user role to my Bubble app database"
Claude: I'll add the new role.
1. Opening Bubble via Playwright MCP
2. Navigating to your app's data tab
3. Opening the User data type
4. Adding new field for role
5. Saving database changes
用户："为我的Bubble应用数据库添加一个新的用户角色"
Claude：我将添加这个新角色。
1. 通过Playwright MCP打开Bubble
2. 导航到你的应用的数据标签页
3. 打开用户数据类型
4. 添加角色新字段
5. 保存数据库更改

Example 2: Deploy to Production

示例2：部署到生产环境

User: "Deploy my app changes to live"
Claude: I'll deploy your application.
1. Opening your Bubble app
2. Clicking deployment menu
3. Selecting deploy to live
4. Confirming deployment
5. Verifying live app is updated
用户："将我的应用更改部署到线上环境"
Claude：我将部署你的应用。
1. 打开你的Bubble应用
2. 点击部署菜单
3. 选择部署到线上
4. 确认部署
5. 验证线上应用已更新

Example 3: Check App Logs

示例3：查看应用日志

User: "Show me recent error logs from my app"
Claude: I'll retrieve error logs.
1. Opening your Bubble app
2. Navigating to logs section
3. Filtering for errors
4. Listing recent issues
5. Summarizing error patterns
用户："展示我应用的近期错误日志"
Claude：我将获取错误日志。
1. 打开你的Bubble应用
2. 导航到日志区域
3. 筛选错误信息
4. 列出近期问题
5. 总结错误模式

Authentication Flow

认证流程

  1. Navigate to bubble.io via Playwright MCP
  2. Click "Log in" and enter email
  3. Enter password
  4. Handle SSO if configured
  5. Complete 2FA if required (via iMessage)
  1. 通过Playwright MCP导航到bubble.io
  2. 点击"登录"并输入邮箱
  3. 输入密码
  4. 如果配置了SSO则处理单点登录
  5. 如果需要则完成双因素认证（通过iMessage）

Error Handling

错误处理

  • Login Failed: Retry up to 3 times, notify via iMessage
  • Session Expired: Re-authenticate automatically
  • Rate Limited: Implement exponential backoff
  • 2FA Required: Send iMessage notification
  • Deploy Failed: Check for workflow errors
  • Database Error: Verify data type constraints
  • 登录失败：最多重试3次，通过iMessage通知
  • 会话过期：自动重新认证
  • 速率限制：实现指数退避策略
  • 需要双因素认证：发送iMessage通知
  • 部署失败：检查工作流错误
  • 数据库错误：验证数据类型约束

Self-Improvement Instructions

自我改进说明

When Bubble updates:
  1. Document new element types
  2. Update workflow action patterns
  3. Track database feature changes
  4. Log plugin integration updates
当Bubble更新时：
  1. 记录新的元素类型
  2. 更新工作流操作模式
  3. 跟踪数据库功能变化
  4. 记录插件集成更新

Notes

注意事项

  • Bubble is powerful but has learning curve
  • Performance depends on app optimization
  • Plugins extend functionality
  • Separate dev and live environments
  • API connector for external services
  • Bubble功能强大，但有一定学习曲线
  • 性能取决于应用优化程度
  • 插件可扩展功能
  • 开发环境与线上环境分离
  • API连接器用于对接外部服务