Build ChatGPT mobile app using Flutter and OpenAI | Easily Integrate ChatGPT with Flutter and OpenAI

Vijay R
Published in
4 min readJun 19, 2023


In this article we will discuss about how to integrate chatGPT with Flutter using OpenAI APIs

🎥 Video Tutorial

⚒️ Dependencies

🔭 Implementation

In order to use any of the OpenAI services, they have provided the developers with access to their APIs. Therefore by creating an account in OpenAI, we will be able to access most of their public APIs including chat models, speech-to-text, image prcessing etc.

In this article we will try to use one such API called the /completions API which will help us build the ChatGPT locally in our flutter app.

→ #1 Create an account in OpenAI

In order to use any of the APIs from OpenAI, we will require the secret keys for authorization during API calls. So in order to get those keys we need to create an account in OpenAI.

hence let’s head over to and create an account by signing up.

→ #2 Generate Secret Keys

After creating an account, we need to generate secret keys. We can find the option to generate secret keys in the profile section of our OpenAI account.

→ #3 BuildUp the UI components

Our app’s UI will be looking more likely as shown below 👇. We have a simple appbar and a body containing the canvas for the displaying the data from the AI model and a textformfield placed at the bottom center.

backgroundColor: const Color(0xff343541),
appBar: AppBar(
title: const Text(
'Flutter and ChatGPT',
style: TextStyle(color: Colors.white),
backgroundColor: const Color(0xff343541),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
PromptBldr(responseTxt: responseTxt),
promptController: promptController, btnFun: completionFun),

Here inside the TextFormFieldBldr we will pass the btnFun as completionFun which will make the real http call to the openai API, and the function is as follows.

  completionFun() async {
setState(() => responseTxt = 'Loading...');

final response = await
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ${dotenv.env['token']}'
body: jsonEncode(
"model": "text-davinci-003",
"prompt": promptController.text,
"max_tokens": 250,
"temperature": 0,
"top_p": 1,

setState(() {
_responseModel = ResponseModel.fromJson(response.body);
responseTxt = _responseModel.choices[0]['text'];

This is the API endpoint which we need to call in order to build a chatGPT model.

We need to pass the secret key and content type inside the headers. The body data includes the AI model type such as text-davinci-003, text-davinci-002 etc. The prompt parameter in the body data is the actual query which we would ask to the AI model. We can also play around with other parameter types to get fine tuned response back from the AI model.

Finally, the response which we get from the AI model is then serialized to get the desired value (which is the choices attribute). A sample response format is shown below.

Therefore whenever we press the button in the textformfield, we will make the post API request /completions with the prompt as the data what the user has typed in the textformfield. The AI model is then able to respond us back with the relevant data based on the prompt query as a json.

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉

Check out all my Flutter related blogs here.,👇



Vijay R

Hai👋 I’m a flutter developer experienced in designing and developing stunning mobile apps. Reach out for freelance projects: