Building an AI-Powered Medical Chatbot with Flutter, Mistral API, Supabase, and TTS

voice based AI APP

Introduction

With the rapid advancements in AI, chatbots are playing an increasingly crucial role in different industries, including healthcare. In this blog, we will develop an AI-powered medical chatbot using Flutter, Mistral API, Supabase, and Flutter TTS. The chatbot will be capable of understanding and responding to medical queries, supporting markdown formatting, storing chat history, and offering text-to-speech (TTS) functionality.

Project Overview

Objective

The goal of this project is to develop a Flutter-based AI chatbot that acts as a medical specialist across multiple domains. It should be able to:

• Respond to medical queries across various fields such as emergency medicine, neurology, endocrinology, and more.

• Save chat history using Supabase for future reference.

• Provide responses in markdown format for better readability.

• Enable voice output using Flutter TTS for accessibility.

• Support light and dark mode for an enhanced user experience.

Technology Stack

Component	Technology
Framework	Flutter
AI API	Mistral API
Database & Auth	Supabase
Voice Output	Flutter TTS
UI Features	Markdown support, Light & Dark mode

Step-by-Step Implementation

1. Setting Up Flutter and Required Dependencies

First, ensure you have Flutter installed and create a new Flutter project:

flutter create ai_chatbot
cd ai_chatbot

Next, add the necessary dependencies in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^2.0.0
  flutter_tts: ^3.6.3
  http: ^0.13.4
  flutter_markdown: ^0.6.9

Run:

flutter pub get

2. Integrating Supabase for Authentication and Chat Storage

Initialize Supabase

In main.dart, initialize Supabase:

void main() async {
  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );
  runApp(MyApp());
}

Create a Supabase Table

Log in to your Supabase dashboard, navigate to the SQL editor, and execute the following query to create the chat storage table:

CREATE TABLE public.chats (
  id SERIAL PRIMARY KEY,
  user_message TEXT NOT NULL,
  bot_message TEXT NOT NULL,
  created_at TIMESTAMP DEFAULT now()
);

Enable Row-Level Security (RLS) and allow insert and select permissions for authenticated users.

3. Implementing Mistral AI API for AI Responses

Create a function to send user messages to the Mistral API and fetch AI responses:

Future<void> sendMessage(String userMessage) async {
  final response = await http.post(
    Uri.parse('https://api.mistral.ai/v1/chat/completions'),
    headers: {
      'Authorization': 'Bearer YOUR_MISTRAL_API_KEY',
      'Content-Type': 'application/json',
    },
    body: jsonEncode({
      "messages": [
        {"role": "system", "content": "You are a doctor specializing in various medical fields. Provide expert responses."},
        {"role": "user", "content": userMessage}
      ],
      "model": "mistral-small-latest"
    }),
  );

  if (response.statusCode == 200) {
    final responseData = jsonDecode(response.body);
    String botMessage = responseData['choices'][0]['message']['content'];

    // Save message to Supabase
    await Supabase.instance.client.from('chats').insert({
      'user_message': userMessage,
      'bot_message': botMessage,
    });
  }
}

4. Implementing UI with Light & Dark Mode

Modify the MaterialApp to support light and dark modes:

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: ChatScreen(toggleTheme: () {
        setState(() {
          isDarkMode = !isDarkMode;
        });
      }),
    );
  }
}

5. Enabling Markdown Formatting for AI Responses

To display formatted AI responses, use flutter_markdown:

child: MarkdownBody(
  data: botMessage,
  selectable: true,
),

This will allow responses to include bullet points, bold text, and other markdown features.

6. Implementing Text-to-Speech (TTS) for Voice Output

Use Flutter TTS to speak AI responses aloud:

FlutterTts flutterTts = FlutterTts();
flutterTts.speak(botMessage);

This enhances accessibility by allowing users to listen to AI responses.

7. Adding a Sidebar for Chat History

Modify the Drawer widget to list saved chats:

Drawer(
  child: ListView(
    children: [
      DrawerHeader(
        decoration: BoxDecoration(color: Colors.blue),
        child: Text("Chat History", style: TextStyle(color: Colors.white)),
      ),
      ...chatHistory.map((chat) => ListTile(
            title: Text(chat['user_message']),
            subtitle: Text(chat['bot_message']),
          )),
    ],
  ),
)

This will allow users to access their previous conversations.

Conclusion

We successfully built a powerful AI chatbot using Flutter that integrates:

✅ AI-powered responses via Mistral API

✅ Secure chat storage with Supabase

✅ Markdown formatting for better readability

✅ Voice output for accessibility

✅ Light & Dark Mode support

By combining Flutter, AI, and database management, we created an intelligent chatbot that can assist users with medical queries in real time. 🚀

Let me know if you have any questions or suggestions in the comments! 😊