Build ChatGPT mobile app using Flutter and OpenAI | Easily Integrate ChatGPT with Flutter and OpenAI
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 https://openai.com/ 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.
Scaffold(
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),
TextFormFieldBldr(
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 http.post(
Uri.parse('https://api.openai.com/v1/completions'),
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'];
debugPrint(responseTxt);
});
}
}This is the API endpoint which we need to call in order to build a chatGPT model. https://api.openai.com/v1/completions
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:👉 https://www.youtube.com/watch?v=KppkPbmwsLI
Check out all my Flutter related blogs here.,👇
Other articles you may like.,
🔵Setting up your Flutter app for publishing in Play Store.
🔴Confetti Animation in Flutter
🟡 Change App Launcher Icon in Flutter
🔴 AnimatedContainer Widget in Flutter
Most popular
Flutter Tutorials
If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇
If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩
Thanks.,
