How integrate chatGPT openAI in flutter
What is chatGPT?
ChatGPT is a chatbot launched by OpenAI in November 2022. It is built on top of OpenAIโs GPT-3 family of large language models, and is fine-tuned with both supervised and reinforcement learning techniques.
in pubspec.yaml
chat_gpt_sdk: ^1.0.2+1 velocity_x: ^3.6.0
main.dart
void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Chat GPT', debugShowCheckedModeBanner: false, theme: ThemeData( useMaterial3: true, primarySwatch: Colors.blue, ), home: ChatScreen(), ); } }
chatscreen.dart
import 'dart:async'; import 'package:chat_gpt_sdk/chat_gpt_sdk.dart'; import 'package:flutter/material.dart'; import 'package:velocity_x/velocity_x.dart'; import 'chat_message.dart'; class ChatScreen extends StatefulWidget { const ChatScreen({Key? key}) : super(key: key); @override State<ChatScreen> createState() => _ChatScreenState(); } class _ChatScreenState extends State<ChatScreen> { final TextEditingController _textEditingController = TextEditingController(); final List<ChatMessage> _messages = []; ChatGPT? chatGPT; StreamSubscription? _subscription; @override void initState() { chatGPT = ChatGPT.instance; super.initState(); } @override void dispose() { _subscription?.cancel(); super.dispose(); } void sendMessage() { /* final String text = _textEditingController.text; if (text.isNotEmpty) { _textEditingController.clear(); final ChatMessage message = ChatMessage(text: text, sender: "Me"); }*/ ChatMessage _message = ChatMessage(text: _textEditingController.text, sender: "User"); setState(() { _messages.insert(0, _message); }); _textEditingController.clear(); final request = CompleteReq( prompt: _message.text, model: kTranslateModelV3, max_tokens: 200); _subscription = chatGPT! .builder("Your-api-Key") .onCompleteStream(request: request) .listen((response) { Vx.log(response!.choices[0].text); ChatMessage botMessage = ChatMessage(text: response.choices[0].text, sender: "bot"); setState(() { _messages.insert(0, botMessage); }); }); } Widget _buildTextComposer() { return Row( children: [ Expanded( child: TextField( onSubmitted: (value) => sendMessage(), controller: _textEditingController, decoration: const InputDecoration.collapsed(hintText: "Send a message"), )), IconButton(onPressed: () => sendMessage(), icon: const Icon(Icons.send)) ], ).px12(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, appBar: AppBar( backgroundColor: Colors.black, title: Text( "Chat GPT OpenAI", style: TextStyle(color: Colors.white), ), ), body: SafeArea( child: Container( padding: EdgeInsets.only(left: 10, right: 10, bottom: 5), child: Column( children: [ Flexible( child: /*Container( height: context.screenHeight, )*/ ListView.builder( reverse: true, padding: Vx.m8, itemCount: _messages.length, itemBuilder: (cnx, index) { return /*Container( height: 100, color: Colors.red, ).p(5)*/ _messages[index]; })), Container( decoration: BoxDecoration(color: context.cardColor), child: _buildTextComposer(), ) ], ), ), ), ); } }
API generation below link
https://beta.openai.com/account/api-keys
chat_message.dart
import 'package:flutter/material.dart'; import 'package:velocity_x/velocity_x.dart'; class ChatMessage extends StatelessWidget { ChatMessage({Key? key, required this.text, required this.sender}) : super(key: key); final String text; final String sender; @override Widget build(BuildContext context) { return Row( children: [ Container( margin: EdgeInsets.only(right: 16), child: CircleAvatar( backgroundColor: Colors.white, child: Text( sender[0], style: TextStyle(color: Colors.black), ), ), ), Expanded( child: Column( children: [ Text( sender, /* style: Theme.of(context).textTheme.subtitle1,*/ style: TextStyle(color: Colors.white), ) .text .subtitle1(context) .make() .box .alignCenter .white .alignCenterLeft .p3 .makeCentered(), Container( margin: EdgeInsets.only(top: 5.0), child: Text( text.trim(), style: TextStyle(color: Colors.white), ), ) ], )) ], ); } }
Github Repository link
https://github.com/riyaspullurofficial/chatGPTapp-flutter
Conclusion
Request any answer by any question clear and exact matched answer provide openAI.
Top comments (1)
suggestion you should add at least a screenshot to have in idea result