Get Started with FlutterFlow

​

What is FlutterFlow?

• Build for Scale: Collaborate efficiently to create robust apps that grow with your needs
• Iterate Fast: Rapidly test, refine, and deploy your app, accelerating your development cycle
• Fully Integrate: Access databases, APIs, and custom widgets all in one place
• Deploy Cross-Platform: Launch on iOS, Android, web, and desktop from a single codebase

​

Prerequisites

• Cerebras API Key - Get a free API key here. This key provides access to Cerebras’s ultra-fast inference models.
• FlutterFlow Account - Visit FlutterFlow and create an account or log in to your existing account.
• Basic FlutterFlow Knowledge - Familiarity with the FlutterFlow Builder interface and basic app development concepts will be helpful.

​

Configure FlutterFlow with Cerebras

1

Store your Cerebras API Key securely

First, you’ll securely store your Cerebras API key in FlutterFlow as an App State Variable. This ensures your API key is protected and persisted across app sessions.

1. Open your FlutterFlow project in the Builder
2. Navigate to the App Values tab in the left sidebar
3. Click Add Field to create a new app state variable
4. Configure the variable:
   • Field Name: cerebrasApiKey
   • Type: String
   • Persisted: Enable this option (so the API key is remembered even when you close the app)
   • Secure Persisted Fields: Enable this option for additional security
5. Enter your Cerebras API key in the Default Value field

Enabling “Secure Persisted Fields” ensures your API key is encrypted and stored securely on the device. For production apps, consider implementing server-side API calls to keep your API key completely secure.

2

Create an API call to Cerebras

Now you’ll create a custom API call that connects to Cerebras’s inference endpoint. This call will handle all communication with Cerebras models using the OpenAI-compatible API format.

1. Navigate to the API Calls tab in the left sidebar
2. Click Add API Call to create a new API call
3. Configure the basic settings:
   • API Call Name: CerebrasCompletion
   • Method Type: POST
   • API URL: https://api.cerebras.ai/v1/chat/completions

Next, add the following variables to make your API call dynamic:

• token (String): Your Cerebras API key from App State
• model (String): The Cerebras model to use (e.g., llama-3.3-70b)
• userMessage (String): The text input from your user
• systemPrompt (String, Optional): System instructions for the model

These variables allow you to reuse this API call throughout your app with different inputs and models. You can add more variables later for advanced features like temperature control or max tokens.

3

Configure the API call headers

Headers authenticate your request and enable integration tracking. You’ll add two important headers that are required for proper authentication and monitoring.In the Headers section of your API call, add:

1. Authorization Header:
   • Key: Authorization
   • Value: Bearer [token] The [token] references the variable you defined in the previous step and authenticates your request with Cerebras.
   
2. Integration Tracking Header:
   • Key: X-Cerebras-3rd-Party-Integration
   • Value: FlutterFlow This header helps Cerebras track integration usage and provide better support for FlutterFlow users.

Make sure to include both headers exactly as shown. The Authorization header is required for authentication, and the integration tracking header helps us improve the FlutterFlow experience.

4

Define the request body

The request body contains the actual data sent to Cerebras. You’ll structure it as JSON to match the OpenAI-compatible API format that Cerebras supports.In the Body section:

1. Select JSON as the body type
2. Add the following JSON structure:

Report incorrect code

Copy

Ask AI

{
  "model": "[model]",
  "messages": [
    {
      "role": "system",
      "content": "[systemPrompt]"
    },
    {
      "role": "user",
      "content": "[userMessage]"
    }
  ],
  "stream": false
}

The variables in square brackets (e.g., [model], [userMessage]) will be automatically replaced with the values you pass when calling this API. The stream parameter is set to false for simpler response handling in FlutterFlow.

You can drag and drop variables from the Variables panel into the JSON body, or type them manually using square brackets. For streaming responses, set "stream": true and handle the response accordingly.

5

Configure the response parsing

FlutterFlow needs to know how to extract the AI’s response from Cerebras’s API response. You’ll define a JSON path that navigates to the specific field containing the generated text.

1. In the Response & Test section, click Add Response
2. Create a JSON path to extract the message content:
   • Field Name: responseText
   • JSON Path: $.choices[0].message.content
   • Type: String

This tells FlutterFlow to extract the AI’s response text from the nested JSON structure returned by Cerebras. The path navigates to the first choice, then to the message object, and finally to the content field.

You can test your API call directly in FlutterFlow by providing sample values for your variables and clicking the Test API Call button. This helps verify your configuration before integrating it into your app.

6

Use the API call in your app

Now you can use your Cerebras API call anywhere in your FlutterFlow app. Here’s a common pattern for building a chat interface:

1. Create a page with a text input field for user messages
2. Add a button that triggers the API call
3. Configure the button’s action:
   • Action: Backend Call → CerebrasCompletion
   • Set variables:
     • token: Reference your cerebrasApiKey from App State
     • model: llama-3.3-70b (or any other Cerebras model)
     • userMessage: Reference your text input field
     • systemPrompt: “You are a helpful assistant.”
4. Add a text widget to display the response
5. Bind the text widget to the responseText field from your API call response

For a better user experience, consider adding a loading indicator while the API call is in progress and error handling for failed requests. You can also store conversation history in App State to build multi-turn conversations.

​

Available Cerebras Models

​

Testing Your Integration

​

Frequently Asked Questions

​

Advanced Configuration

​

Adding Temperature and Max Tokens Controls

1. Add new variables to your API call:
   • temperature (Double): Controls randomness (0.0 to 2.0, default 1.0)
   • maxTokens (Integer): Maximum response length
2. Update your request body:

{
  "model": "[model]",
  "messages": [
    {
      "role": "system",
      "content": "[systemPrompt]"
    },
    {
      "role": "user",
      "content": "[userMessage]"
    }
  ],
  "temperature": [temperature],
  "max_tokens": [maxTokens],
  "stream": false
}

​

Troubleshooting

​

Next Steps

​

Additional Learning Resources

• Cerebras API Reference - Complete API documentation with all available parameters
• OpenAI Compatibility Guide - Learn about OpenAI API compatibility
• FlutterFlow API Integration Guide - Deep dive into API calls in FlutterFlow
• FlutterFlow Templates - Browse pre-built templates to accelerate development
• Prompting Guide - Learn how to write effective prompts for better results