AI in Mobile Apps: Integrating Chat and Image Generation in Flutter

Artificial Intelligence features are rapidly becoming mainstream in mobile applications. While our core product isn't an "AI app," we've begun incorporating AI-driven enhancements to delight users and expedite development. Here's a practical look at how we added chatbot and image generation functionalities to our Flutter app using available AI tools and APIs.

Chatbot Support

We added an in-app chat assistant to help users with common tasks (think FAQ bot). Instead of building chat logic manually, we integrated a lightweight LLM-based backend:

1. User Interaction: In the Flutter UI, the user sends a message ("How do I reset my password?"). The app displays this as a chat bubble.
2. Backend Processing: The message is sent over HTTPS to our Rust backend (via a /assistant/query endpoint). The Rust service forwards the query to an AI service (we use a hosted LLM like GPT-4o via HTTP).
3. Formatting: We constructed a prompt that includes context (user's account status, app version, etc.) and the question, e.g., "Answer as a polite assistant."
4. AI Response: The AI returns a textual answer ("To reset your password, click ..."). Our Rust service may add quick links or format it slightly before returning it to the app.
5. Display: The Flutter UI shows the AI's reply in a nice bubble with a timestamp. We added a small "🤖" icon for fun.

Because the heavy lifting occurs server-side, the user sees near-instant responses. We paid attention to privacy: we anonymize queries (no user PII), and we rate-limit to control usage costs. We also allow users to opt out of the chat feature.

Image Generation

Another use-case we experimented with was AI-generated images. The app has a "Create My Avatar" feature. Instead of drawing assets by hand, we allow users to describe their ideal avatar, e.g. "Cartoon fox wearing glasses, purple background." The workflow:

• The Flutter app presents a text field for the prompt.
• When submitted, it calls our Rust backend at /image/generate.
• The backend uses an image-generation model API (like Stable Diffusion via REST) and passes the prompt.
• When the model finishes, we download the PNG and upload it to our static server, returning the image URL to the app.
• The Flutter app then displays this image in an Image.network widget, caching it.

We show a progress indicator while waiting (which now benefits from the improved semantics per Post 7!). The result: within ~15 seconds, users get a unique, AI-drawn avatar. Performance is limited by the remote model, but users love the creativity.

Prompt Engineering

Behind the scenes, our team treats AI prompts as a first-class part of the codebase. We created a small DSL of prompt templates, stored in a Dart file and passed to the backend. For example:

const aiPrompts = {
  'greet': 'You are a helpful assistant. Greet the user warmly.',
  'troubleshoot': 'User reports an issue: {issue}. Provide step-by-step debugging advice.'
};

In the backend, we replace placeholders ({issue}) with actual user data. We also chain with some rules (like length limits) to prevent out-of-control answers. This structured approach (sometimes called "prompt engineering") ensures consistent results.

AI-Dev Tools

Interestingly, we also used AI on the developer side. We hooked our Flutter project into an AI coding agent using the new Dart MCP server. For example, when styling our chat UI, we told the agent "Add rounded corners to chat bubbles" and it inserted the relevant code (BoxDecoration(borderRadius: BorderRadius.circular(12))) and hot-reloaded the running app instantly. This "Agentic Hot Reload" means we can leverage AI to refactor UI live without manual coding.

We also use AI to auto-generate parts of our release notes (as mentioned in Post 12). A prompt like "Summarize these commits into user-friendly notes" saved us hours writing changelogs.

Considerations

Using AI introduces challenges: we must filter or moderate content (e.g. no NSFW output), and manage API costs (the queries cost cents each). We mitigated this by caching common answers and fallbacks. We also added an override in the UI: if the AI goes awry, users can request human support or report the answer.

From a user trust perspective, we clearly label responses as "Powered by AI" in the UI. Transparency and optionality are key.

Conclusion

Integrating AI features in a Flutter app is quite feasible today. The Flutter team's recent announcements (GenUI, Genkit) suggest this will get even easier in the future. For now, we see it as a complement: automating repetitive tasks (release notes, quick fixes) and adding fun user features (chatbot, avatar generation) that keep our app competitive. If your app has a creative or FAQ component, consider trying out an AI API - Flutter's network and async capabilities make it straightforward.

Just remember the UX: show loading states, handle errors gracefully, and give users control. With careful design, AI can make your app feel smarter and more modern with surprisingly little code.