AI Chatbot using API Calling
AI Chatbot using API Calling
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.
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
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.