Zulip

Log in to your Zulip organization and open the Settings page. On Zulip Cloud, click your avatar in the top right corner, then select 'Personal settings'. On the left sidebar, click 'Bots'. Click 'Add a new bot'. In the dialog, choose Bot type 'Generic bot' (suitable for sending messages). Give it a name like 'FlutterFlow Bot' and an email address (e.g., `flutterflow-bot@your-org.zulipchat.com` — Zulip may auto-generate the email). Click 'Create bot'. After creation, the bot appears in your bot list. Click the kebab menu (three dots) next to the bot and select 'Edit'. You'll see the bot's email address and its API key. Copy both values — you will need them in the next step. The API key is a long random string (not a Bearer token format like Slack's `xoxb-` prefix). Also note down your organization's base URL at the top of the browser — this is `https://your-org.zulipchat.com` for Zulip Cloud, or your custom domain for self-hosted. Keep these credentials out of FlutterFlow until you deploy the Cloud Function.

The Zulip bot API key must not live in FlutterFlow because it gives send access to your Zulip organization and will ship in the compiled app binary. Deploy a Firebase Cloud Function that holds the API key in its environment variables and formats the HTTP Basic auth header and the form-encoded body. In your Firebase project, set up Cloud Functions (Blaze plan required for outbound HTTP). In your `index.js` file, create an HTTPS function. The function reads `ZULIP_BOT_EMAIL` and `ZULIP_API_KEY` from `process.env` (set them as environment variables in the Firebase Console under the function's settings, or with `firebase functions:config:set`). It also reads the `zulip_base_url`, `stream`, `topic`, and `content` from the incoming POST body. The function builds the Basic auth header by base64-encoding `email:apikey` and sends a `POST` to `{zulip_base_url}/api/v1/messages` with `Content-Type: application/x-www-form-urlencoded`. The body must be URL-encoded form data with four fields: `type=stream`, `to=<stream>`, `topic=<topic>`, `content=<content>`. This form-encoded requirement is critical — Zulip's messages endpoint does NOT accept JSON and will return a 400 or silent failure if you send JSON. Deploy the function and copy its HTTPS URL.

1// functions/index.js (Firebase Cloud Function — Node.js 18)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5exports.sendZulipMessage = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  res.set('Access-Control-Allow-Headers', 'Content-Type');
8  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
9
10  const { zulip_base_url, stream, topic, content } = req.body;
11  if (!stream || !topic || !content) {
12    res.status(400).json({ result: 'error', msg: 'Missing stream, topic, or content' });
13    return;
14  }
15
16  const email = process.env.ZULIP_BOT_EMAIL;   // set in Firebase env vars
17  const apiKey = process.env.ZULIP_API_KEY;     // set in Firebase env vars
18  const baseUrl = zulip_base_url || process.env.ZULIP_BASE_URL; // org URL
19
20  // HTTP Basic auth = base64(email:apikey)
21  const authHeader = 'Basic ' + Buffer.from(`${email}:${apiKey}`).toString('base64');
22
23  // Zulip messages endpoint REQUIRES application/x-www-form-urlencoded, NOT JSON
24  const body = new URLSearchParams({
25    type: 'stream',
26    to: stream,
27    topic: topic,
28    content: content
29  });
30
31  const response = await fetch(`${baseUrl}/api/v1/messages`, {
32    method: 'POST',
33    headers: {
34      'Authorization': authHeader,
35      'Content-Type': 'application/x-www-form-urlencoded'
36    },
37    body: body.toString()
38  });
39
40  const data = await response.json();
41  res.status(200).json(data); // Zulip returns { result: 'success', id: ... } or { result: 'error', msg: ... }
42});

Open your FlutterFlow project. In the left navigation panel, click API Calls. Click the + Add button and choose Create API Group. Name it 'Zulip Proxy'. In the Base URL field, enter your Firebase Cloud Function's base HTTPS URL — for example `https://us-central1-your-project.cloudfunctions.net`. No authentication headers are needed at the API Group level because the Cloud Function handles Zulip auth internally. Click Save. Inside the Zulip Proxy group, click + Add → Create API Call. Name it 'Send Message'. Set the Method to POST and the Endpoint to `/sendZulipMessage`. Go to the Body tab and set the Body Type to JSON (you are talking to your Cloud Function here with JSON, not directly to Zulip). Add body fields: `stream` mapped to a Variable, `topic` mapped to a Variable, `content` mapped to a Variable, and optionally `zulip_base_url` mapped to a Variable (for multi-org support). In the Variables tab, create three or four String variables: `stream`, `topic`, `content`, and optionally `zulip_base_url`. Go to the Response & Test tab. In Test Values, enter a real stream name (e.g., `general`), a topic (e.g., `FlutterFlow Test`), and a content string. Run the test. You should see a `{ "result": "success", "id": 12345 }` response. If you see `{ "result": "error", "msg": "Stream 'general' does not exist" }`, verify the stream name — Zulip stream names are case-sensitive.

1// API Call configuration reference
2{
3  "method": "POST",
4  "base_url": "https://us-central1-your-project.cloudfunctions.net",
5  "endpoint": "/sendZulipMessage",
6  "body_type": "JSON",
7  "body": {
8    "stream": "{{ stream }}",
9    "topic": "{{ topic }}",
10    "content": "{{ content }}",
11    "zulip_base_url": "{{ zulip_base_url }}"
12  },
13  "variables": [
14    { "name": "stream", "type": "String" },
15    { "name": "topic", "type": "String" },
16    { "name": "content", "type": "String" },
17    { "name": "zulip_base_url", "type": "String" }
18  ]
19}

Go to the screen in FlutterFlow where users will compose and send a Zulip message. Create a layout with at least a Text Field for the message content and a Button labeled 'Post to Stream'. You may also add a Text Field or Dropdown for stream name and a Text Field for the topic, or hardcode those values in the action if they never change. Click the Button widget and open the Actions panel. Click + Add Action → Integrations → API Call. Select the 'Zulip Proxy' group and the 'Send Message' call. In the variable bindings: set `stream` to your stream Text Field's value or a hardcoded string; set `topic` to your topic Text Field's value or a hardcoded string; set `content` to the message Text Field's value; if using multi-org, set `zulip_base_url` from an App State variable. After the API Call action, go to the Response & Test tab and click Generate JSON Paths. You'll see `$.result` (String) and `$.id` (Integer). In the Action Flow, add a Conditional Action checking `$.result == 'success'`. If true, show a SnackBar saying 'Message posted!', clear the Text Field, and optionally navigate away. If false, read `$.msg` and display it in an error widget. Unlike Slack, Zulip correctly uses non-200 status codes for auth failures (401) and bad requests (400) — you can also check the HTTP status code from the API Call response in the conditional.

If you want to show Zulip messages inside the FlutterFlow app (not just send them), you can poll the `GET /api/v1/messages` endpoint through a second Cloud Function. Add a new function `getZulipMessages` that accepts a `stream`, `topic`, and optional `num_before`/`num_after` parameters. In the function, build a narrow filter in Zulip's format — `narrow=[{"operator":"stream","operand":"general"},{"operator":"topic","operand":"FlutterFlow Test"}]` — and pass it as a query parameter to `GET /api/v1/messages?anchor=newest&num_before=20&narrow=<encoded>`. The function returns the `messages` array from the response. In FlutterFlow, create a second API Call in the Zulip Proxy group named 'Get Messages', pointing to this function. Set up a Timer widget or a page load trigger to call Get Messages on an interval (e.g., every 30 seconds). Parse the response using the JSON Path `$.messages` and bind the array to a ListView with a Dynamic Widget displaying each message's `sender_full_name` and `content`. Zulip's real-time event queue (the register/poll approach) is too stateful to manage from a FlutterFlow client — polling is the practical solution. If you'd rather skip the custom Cloud Function setup, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

1// Narrow filter example for Cloud Function (URL-encode before sending)
2const narrow = JSON.stringify([
3  { operator: 'stream', operand: stream },
4  { operator: 'topic', operand: topic }
5]);
6const url = `${baseUrl}/api/v1/messages?anchor=newest&num_before=20&num_after=0&narrow=${encodeURIComponent(narrow)}`;
7const response = await fetch(url, {
8  headers: { 'Authorization': authHeader }
9});
10const data = await response.json();
11// Returns: { result: 'success', messages: [...], found_newest: true }