AI Chatbot using
API Calling
Done by:
Nowfal .S
Navinash
D.B.
Prasanna
Venkatesh K.
AI Chatbot using API Calling
Aim:
To develop an AI Chatbot Mobile Application Using Flutter and Grok API.
Tools and Technologies used:
Component Technology/Tool
Frontend Framework Flutter SDK (Version 3.0)
Programming Language Java or Kotlin
AI Integration Grok API
IDE Android Studio Arctic Fox
(v2020.3.1 Patch 4)
JDK Java Development Kit 17
Local Storage SharedPreferences (Flutter Plugin)
Testing Platforms Android Emulator or Physical Android
Phone
Procedure:
Step 1. Install Flutter & Dart Plugins in Android Studio
Go to Plugins from the sidebar.
Open Marketplace, search for Flutter, and click Install.
When prompted, also install the Dart plugin.
Restart Android Studio after installation.
Step 2. Create a New Flutter Project
Click New Flutter Project → Select Flutter Application → Click Next.
Set the project name as chatbot_app.
Select your Flutter SDK path (e.g., C:\src\flutter).
Click Next, then Finish.
Step 3. Grok API Integration
Visit https://console.Grok.com/keys.
Obtained API key from Grok for GPT model access
Sent structured POST requests to Grok's endpoint using Dart's `http` package
Parsed JSON responses and updated chat in real-time
Step 4. User Interface Structure
Set up `pubspec.yaml` and `build.gradle` with required dependencies (http, shared_preferences,
etc.)
Defined the app structure with `main.dart` as the entry point
Created a `ChatScreen` widget to display the conversation UI
Designed custom message bubbles for user and AI messages
Implemented a collapsible navigation drawer to view old chat sessions
Step 5. Chat History Management
Implemented local storage using SharedPreferences
Stored chat sessions grouped by date and time
Provided functionality to start new sessions and retrieve previous ones
Step 6. App Icon Setup
Save your app icon as icon.png in the directory of:
chatbot_app/
└── assets/
└── icon.png
Run in terminal:
flutter pub get
flutter pub run flutter_launcher_icons:main
Step 7. Build Commands
After editing pubspec.yaml or build.gradle, run:
flutter clean
flutter pub get
To run the app:
flutter run
(or click the play button in Android Studio)
To build APK for release:
flutter build apk –release
Code:
app/lib/main.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:intl/intl.dart';
void main() {
runApp(MyApp());
}
class ChatSession {
String title;
DateTime createdAt;
List<String> messages;
ChatSession({required this.title, required this.createdAt, required this.messages});
Map<String, dynamic> toJson() => {
'title': title,
'createdAt': createdAt.toIso8601String(),
'messages': messages,
};
static ChatSession fromJson(Map<String, dynamic> json) => ChatSession(
title: json['title'],
createdAt: DateTime.parse(json['createdAt']),
messages: List<String>.from(json['messages']),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AI Chatbot',
theme: ThemeData(primarySwatch: Colors.blue),
debugShowCheckedModeBanner: false,
home: ChatScreen(),
);
}
}
class ChatScreen extends StatefulWidget {
@override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final TextEditingController _controller = TextEditingController();
List<ChatSession> sessions = [];
int currentSessionIndex = 0;
bool isThinking = false;
late GlobalKey<ScaffoldState> _scaffoldKey;
@override
void initState() {
super.initState();
_scaffoldKey = GlobalKey<ScaffoldState>();
loadSessions();
}
Future<void> loadSessions() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
final List<String>? savedSessions = prefs.getStringList('chat_sessions');
if (savedSessions != null) {
setState(() {
sessions = savedSessions.map((e) => ChatSession.fromJson(jsonDecode(e))).toList();
});
}
if (sessions.isEmpty) {
newChat();
}
}
Future<void> saveSessions() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
final List<String> sessionStrings = sessions.map((e) => jsonEncode(e.toJson())).toList();
await prefs.setStringList('chat_sessions', sessionStrings);
}
void newChat() {
setState(() {
final session = ChatSession(
title: 'Chat ${DateFormat('dd/MM/yyyy HH:mm').format(DateTime.now())}',
createdAt: DateTime.now(),
messages: [],
);
sessions.add(session);
currentSessionIndex = sessions.length - 1;
});
saveSessions();
}
Future<String> getGrokResponse(String message) async {
final apiKey = "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";
final url = Uri.parse("https://api.Grok.com/openai/v1/chat/completions");
final response = await http.post(
url,
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer $apiKey",
},
body: json.encode({
"model": "llama3-8b-8192",
"messages": [
{"role": "system", "content": "You are a helpful assistant."},
{"role": "user", "content": message}
],
"temperature": 0.7
}),
);
if (response.statusCode == 200) {
final data = json.decode(response.body);
return data["choices"][0]["message"]["content"];
} else {
return "Error: ${response.statusCode} - ${response.body}";
}
}
void sendMessage() async {
final text = _controller.text.trim();
if (text.isEmpty) return;
setState(() {
sessions[currentSessionIndex].messages.add("You: $text");
sessions[currentSessionIndex].messages.add("Bot: thinking...");
_controller.clear();
isThinking = true;
});
await saveSessions();
final response = await getGrokResponse(text);
setState(() {
sessions[currentSessionIndex].messages.removeLast();
sessions[currentSessionIndex].messages.add("Bot: $response");
isThinking = false;
});
await saveSessions();
}
@override
Widget build(BuildContext context) {
final currentMessages = sessions.isNotEmpty ? sessions[currentSessionIndex].messages : [];
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('AI Chatbot'),
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () => _scaffoldKey.currentState?.openDrawer(),
),
),
drawer: Drawer(
child: SafeArea(
child: Column(
children: [
ListTile(
title: Text('New Chat', style: TextStyle(fontWeight: FontWeight.bold)),
leading: Icon(Icons.add),
onTap: () {
newChat();
Navigator.pop(context);
},
),
Divider(),
Expanded(
child: ListView.builder(
itemCount: sessions.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(
sessions[index].title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
tileColor: index == currentSessionIndex ? Colors.blue[100] : null,
onTap: () {
setState(() {
currentSessionIndex = index;
});
Navigator.pop(context);
},
trailing: IconButton(
icon: Icon(Icons.delete, color: Colors.red),
onPressed: () {
setState(() {
sessions.removeAt(index);
if (sessions.isEmpty) {
newChat();
} else if (currentSessionIndex >= sessions.length) {
currentSessionIndex = sessions.length - 1;
}
});
saveSessions();
},
),
);
},
),
),
],
),
),
),
body: Row(
children: [
Expanded(
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: currentMessages.length,
itemBuilder: (context, index) {
String message = currentMessages[index];
bool isUser = message.startsWith("You:");
bool isBot = message.startsWith("Bot:");
return ListTile(
title: RichText(
text: TextSpan(
children: [
TextSpan(
text: isUser
? "You:"
: isBot
? "Bot:"
: "",
style: TextStyle(
fontWeight: FontWeight.bold,
color: isUser
? Colors.blue
: isBot
? Colors.green
: Colors.black,
),
),
TextSpan(
text: message.contains(":")
? message.substring(message.indexOf(":") + 1)
: message,
style: TextStyle(color: Colors.black),
),
],
),
),
);
},
),
),
Divider(height: 1.0),
Container(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
onSubmitted: (_) => sendMessage(),
decoration: InputDecoration(hintText: "Type your message..."),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: sendMessage,
),
],
),
),
],
),
),
],
),
);
}
}
app/pubspec.yaml
name: chatbot_app
description: chatbot app by API calling
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.17.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
http: ^0.13.4
shared_preferences: ^2.0.15
intl: ^0.17.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter_launcher_icons: ^0.11.0 # compatible version
flutter_icons:
android: true
ios: true
image_path: "assets/icon.png"
flutter:
uses-material-design: true
assets:
- assets/icon.png
app/android/app/build.gradle
name: chatbot_app
description: chatbot app by API calling
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.17.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
http: ^0.13.4
shared_preferences: ^2.0.15
intl: ^0.17.0
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter_launcher_icons: ^0.11.0 # compatible version
flutter_icons:
android: true
ios: true
image_path: "assets/icon.png"
flutter:
uses-material-design: true
assets:
- assets/icon.png
Output Screenshot:
Result:
Thus, the program to develop an AI Chatbot Mobile Application using Flutter and Grok API was
executed successfully and the output was verified.
