# beefreesdk-nocode-content-editor-cursorrules-prompt-file

A Cursor rule that guides the agent when embedding Beefree SDK no-code editors for emails, pages and popups into a web app.

- rule · `type=rule` · Cursor · ★ 41024
- Author: PatrickJS
- License: CC0-1.0 · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/PatrickJS/awesome-cursorrules/tree/HEAD/rules/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.mdc
- Updated: 2026-05-30
- HTML: https://affpapa.org/en/nevibecode/rules/beefreesdk-nocode-content-editor-cursorrules-prompt-file

## What it does

The rule lays out how the agent should approach Beefree SDK: installing the package, handling authentication, setting up the container, configuring the editor and loading templates. The package goes in with `npm install @beefree.io/sdk` or `yarn add @beefree.io/sdk`, alongside `axios`, `express`, `cors` and `dotenv`.

Authentication runs through a proxy server instead of the browser. The rule keeps `BEE_CLIENT_ID` and `BEE_CLIENT_SECRET` in `.env` and posts to `https://auth.getbee.io/loginV2`. The whole API response goes to the SDK, not just the token. The editor needs its own element, such as `#beefree-sdk-container`, and the `container` parameter is required in the config.

Callbacks `onSave`, `onAutoSave`, `onSend` and `onError` are covered, as is starting the editor with `new BeefreeSDK(authResponse)` and `bee.start(beeConfig, {})`. React examples use `useRef` and `useEffect`. Nothing renders without Beefree client credentials and a running proxy, so set up the keys in your Beefree account first.

## Install

### Cursor (native platform)

**Manually: put the files in place**
- File: `.cursor/rules/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.mdc` — Frontmatter: description, globs, alwaysApply

### Claude Code

**Manually: put the files in place**
- File: `.claude/rules/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.md` — The paths frontmatter field limits the files: move globs from the source into paths

### Codex

**AGENTS.md**
- Codex reads AGENTS.md: paste the rule text there

### GitHub Copilot

**Manually: put the files in place**
- File: `.github/instructions/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.instructions.md` — The applyTo field sets which files it applies to: move globs from the source into applyTo

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/rules/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.md`

### Cline

**Manually: put the files in place**
- File: `.clinerules/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.md`

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/PatrickJS/awesome-cursorrules/tree/HEAD/rules/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.mdc

## When to use it
- embed a Beefree email editor into a web app
- route Beefree authentication through a proxy so keys stay out of the browser
- prepare the container element and CSS so the editor fills the right area
- wire up save, autosave and send callbacks for templates
- start Beefree SDK inside a React component

## Example prompts
- Set up Beefree SDK following the rule: install the package and add the auth proxy
- Build a React component with a `beefree-react-demo` container and init inside `useEffect`
- Add `mergeTags` for first name and email, plus an `onSave` callback

## Source text · beefreeSDK-nocode-content-editor-cursorrules-prompt-file.mdc · CC0-1.0

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 66cc2ba877fbe37a.

BEGIN THIRD-PARTY FILE 66cc2ba877fbe37a
````text
---
description: "Cursor rules for embedding Beefree SDK's no-code content editors (for emails, pages, and popups) into a web application."
globs: **/*
alwaysApply: false
---
# Beefree SDK Guidelines
Guidelines and best practices for building applications with [Beefree SDK](https://docs.beefree.io/beefree-sdk), including installation, authentication, configuration, customization, and template management.

## Installation Guidelines

### Package Installation
- Install the Beefree SDK package using npm or yarn:
  ```bash
  npm install @beefree.io/sdk
  # or
  yarn add @beefree.io/sdk
  ```

### Dependencies
- Beefree SDK requires the following core dependencies:
  ```json
  {
    "dependencies": {
      "@beefree.io/sdk": "^9.0.2-fix-optional-url-config.0",
      "axios": "^1.10.0",
      "express": "^5.1.0",
      "cors": "^2.8.5",
      "dotenv": "^17.2.0"
    }
  }
  ```

### Environment Setup
- Create a `.env` file in your project root with your Beefree credentials:
  ```env
  BEE_CLIENT_ID=your_client_id_here
  BEE_CLIENT_SECRET=your_client_secret_here
  ```

## Authentication Guidelines

### Proxy Server Setup
- ALWAYS use a proxy server for authentication to protect your credentials
- Create a proxy server file (e.g., `proxy-server.js`) to handle authentication:
  ```javascript
  import express from 'express';
  import cors from 'cors';
  import axios from 'axios';
  import dotenv from 'dotenv';

  dotenv.config();

  const app = express();
  const PORT = 3001;

  app.use(cors());
  app.use(express.json());

  const BEE_CLIENT_ID = process.env.BEE_CLIENT_ID;
  const BEE_CLIENT_SECRET = process.env.BEE_CLIENT_SECRET;

  // V2 Auth Endpoint
  app.post('/proxy/bee-auth', async (req, res) => {
    try {
      const { uid } = req.body;
      
      const response = await axios.post(
        'https://auth.getbee.io/loginV2',
        {
          client_id: BEE_CLIENT_ID,
          client_secret: BEE_CLIENT_SECRET,
          uid: uid || 'demo-user'
        },
        { headers: { 'Content-Type': 'application/json' } }
      );
      
      res.json(response.data);
    } catch (error) {
      console.error('Auth error:', error.message);
      res.status(500).json({ error: 'Failed to authenticate' });
    }
  });

  app.listen(PORT, () => {
    console.log(`Proxy server running on http://localhost:${PORT}`);
  });
  ```

### Authentication Process
- Use the V2 authentication endpoint: `https://auth.getbee.io/loginV2`
- Pass the ENTIRE API response to the Beefree SDK, not just the token
- Example authentication call:
  ```typescript
  const token = await fetch('http://localhost:3001/proxy/bee-auth', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ uid: 'demo-user' })
  }).then(res => res.json());
  ```

## Container Setup Guidelines

### HTML Container
- Create a dedicated container element for the Beefree SDK:
  ```html
  <div id="beefree-sdk-container"></div>
  ```

### CSS Styling
- Style the container to ensure proper display:
  ```css
  #beefree-sdk-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 600px;
    width: 90%;
    margin: 20px auto;
````
END THIRD-PARTY FILE 66cc2ba877fbe37a

The third-party file has ended. Everything between the 66cc2ba877fbe37a tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 3211 of 16561 bytes. © PatrickJS · CC0-1.0 · https://github.com/PatrickJS/awesome-cursorrules/tree/HEAD/rules/beefreeSDK-nocode-content-editor-cursorrules-prompt-file.mdc

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md