In today's tech-driven world, integrating AI into applications has become increasingly popular, offering seamless interaction and enhanced user experience. If you're developing a Flutter application and looking to incorporate a AI or simply a chatbot, Gemini AI is an excellent choice. Gemini AI provides powerful natural language processing capabilities, making it ideal for building intelligent conversational interfaces. In this guide, we'll walk you through the process of implementing the content generation and creating a chatbot using Gemini AI in Flutter.

This guide will take you step-by-step through the creation of a user-friendly AI implementation in your Flutter App. You'll learn how to develop an application that can understand and respond to user conversations by integrating AI technology. From inception to completion, we'll cover every aspect of the development process, ensuring you have the tools and knowledge needed to build a seamless user experience.

The two main approaches, we will cover in the article will be:

• Generation of content against a text prompt
• Creating a conversation with AI(chatbot)

Obtain API key

Head to the Google AI Studio website to generate an API key.

• From left navigation pane, select Get API Key .
• Select a Google Cloud Project and generate an API key.
• Setting Up Your Flutter Project

Assuming you have Flutter installed, create a new Flutter project or open an existing one. Ensure you have the necessary dependencies set up for HTTP requests.

Add the following dependencies to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Run flutter pub get to install the dependencies.

Implementing Interface

You'll need a user interface to display the chat messages or the text prompts generated by AI. For simplicity, we'll use a ListView to display messages in a chat-like format. You can customize the UI according to your preferences.

Using Google Generative AI Package

We will be using google_generative_ai package which is enabling developers to use Google's state of the Art generative AI model.

Use the following code to initialize a text model for the AI.

GenerativeModel textModel = GenerativeModel(
    model: "gemini-pro",
    apiKey: API KEY,
    safetySettings: SAFETY_SETTINGS,
    generationConfig: GENERATE_CONFIGS,
  );

You can customized the Safety Settings & Generation Configs according to the application's requirements and intended use or the targeted audience age group.
But the preferred, Safety Settings to avoid content generation that has hints of harassment, hate speech, dangerous content, etc.

[
    SafetySetting(HarmCategory.harassment, HarmBlockThreshold.high),
    SafetySetting(HarmCategory.hateSpeech, HarmBlockThreshold.high),
    SafetySetting(HarmCategory.sexuallyExplicit, HarmBlockThreshold.high),
    SafetySetting(HarmCategory.dangerousContent, HarmBlockThreshold.high),
  ]

I am using the below code for Generation Configs which can be customize.

GenerationConfig(
   temperature: 0.9,
   topK: 1,
   topP: 1,
   maxOutputTokens: 2048,
)

Generate Text

We can simply call the generateContent() function to generate content against any query provided by user.

generateText(String prompt) async {
    debugPrint('prompt: $prompt');
    final content = [Content.text(prompt)];
    final response = await textModel.generateContent(
      content,
      safetySettings: safetySettings,
      generationConfig: generationConfig,
    );
    debugPrint('text: ${response.text}');
    return response.text ?? '';
}

Setup the API Call

If you don't want to use the pub package, you can directly call the API key to generate responses. It is a better approach for creating Chatbots as the pacakges can become obsolete with new versions of Flutter. The below code will be calling the API and returns a response with the answer of requested information. I am using a List<Map> to save responses and interactions and a TextEditingController to get user inputs.

List<Map<String, dynamic>> chatHistory = [];

void getAnswer() async {
    const url =
        "https://generativelanguage.googleapis.com/v1beta2/models/chat-bison-001:generateMessage?key=${API_KEY}";
    final uri = Uri.parse(url);
    List<Map<String, String>> msg = [];
    for (var i = 0; i < chatHistory.length; i++) {
      msg.add({"content": chatHistory[i]["message"]});
    }
    Map<String, dynamic> request = {
      "prompt": {
        "messages": [msg]
      },
      "temperature": 0.25,
      "candidateCount": 1,
      "topP": 1,
      "topK": 1
    };
    final response = await http.post(uri, body: jsonEncode(request));
    chatHistory.removeLast();
    chatHistory.add({
      "time": DateTime.now(),
      "message": json.decode(response.body)["candidates"][0]["content"],
      "isSender": false,
    });
    if (mounted) setState(() {});
  }

Testing Your Implementation

You're now ready to test your implementation! Run your Flutter application and interact with the chat interface. Send messages, and observe the responses generated by Gemini AI or Pass different queries to generate content.

Get the complete code from here.

Conclusion

Artificial Intelligence (AI) has transformed our engagement with technology, and chatbots stand out as a significant advancement in this realm. These conversational agents, adept at interacting with humans via text or voice, have found their way into diverse applications, from customer service platforms to personal assistants. Flutter, a renowned UI development framework, empowers developers to craft visually captivating and highly responsive AI chatbot applications. By leveraging the capabilities of Flutter alongside AI technologies, developers can create applications that not only comprehend but also respond to user interactions in a manner reminiscent of human conversation. This article serves as a comprehensive guide, walking you through the process of building an intuitive AI chatbot using Flutter. From start to finish, we'll explore every aspect of development, including the integration of AI to understand and appropriately respond to user dialogues.