ChatGPT Tutorial for Flutter: Getting Started

The technology space is all about AI and what it can do today. Part of this is due to OpenAI’s ChatGPT, a chat app powered by their Generative Pre-Trained model. It enables you to create documents, answer questions about a topic, or even write code.

In this tutorial, you’ll get started with ChatGPT by using it to create a simple trivia app called Wizz. Use the OpenAI API as a business logic provider in your app instead of using custom backend services. In the process, you will learn the following:

  • The basis of what ChatGPT is.
  • Understand the capabilities of the GPT language model.
  • To use the language model using best practices.
  • To integrate ChatGPT-like features into your Flutter apps.
  • How to deal with unexpected responses from the model.

It’s time to dive into the exciting world of AI!

dash

Download the starter project by clicking on the Download Materials button above or below this tutorial. Then, open the starter project in VS Code. You can also use Android Studio, but you will need to adapt the instructions below if necessary.

You must use the latest version of Flutter 3.10.1 or higher. Make sure to get the latest dependencies for the project by running flutter pub get from your Terminal or directly from the VS Code prompt.

Looking at the code, you can see that the starter project already provides some UI for the trivia app. Here’s a quick look at the code structure:

  • prompt.dart: This file contains three prompts to send to the model.
  • data.dart: A layer to interact with OpenAI’s API.
  • domain.dart: Defines various Wizz business logic models, including Queries and Notifications.
  • pages: All screens are under this folder.
  • widgets: Contains many UI features.

Building and running the project. You should see a screen asking for the player’s name, as shown below.

Wizz app: start screen

NOTES: If you see the error Error (Xcode): Sandbox is not synchronized with Podfile.lock. Run ‘pod install’ or update your CocoaPods installation. – use the following terminal command to fix it cd ios && pod install && cd ..

Write your name in the input and press Let’s Wizz Up to start a new game.

Game Screen with Placeholder

The trivia game is incomplete because the game screen is just a placeholder. You will add the core features for Wizz throughout the tutorial.

Understanding ChatGPT Capabilities

One of the most popular AI-powered apps is ChatGPT. In simple terms, ChatGPT is an AI system developed and trained by OpenAI to understand and generate human language.

The last three letters of the name stand for Generative Pre-Trained Transformers. GPT refers to a broader family of language models based on a specific architecture. These models are trained on a large amount of data to generate human-like content, such as text, images or even music.

GPT-based models often help you build applications that allow you to:

  • Write documents.
  • Answer the questions.
  • Analyze the text.
  • Create an interactive chatbot.
  • Translation in different languages.
  • Generate code.
  • Resolve bugs in a block of code.
  • And many more.

ChatGPT is a specific implementation of a GPT model. It is built on OpenAI to have chat-based conversations. When integrating it into your app, it’s important to understand the difference between ChatGPT and its underlying GPT model.

The main difference between ChatGPT and GPT lies in their intended use cases and design considerations. OpenAI designed ChatGPT to communicate with users. GPT models rely on prompts to generate responses. These prompts set the tone and provide context for the resulting text. In contrast, ChatGPT is optimized for dialogues for a repetitive conversation.

Basically, you can think of ChatGPT as an app and GPT as the brain behind the app.

OpenAI has launched an API so that developers can add GPT-based features to apps or even create new apps based on the model’s features. This, in turn, helps them retrain their model and improve the quality of the generated text output.

Now that you know these basic concepts about AI and language models, it’s time to add GPT-based features to Wizz, a trivia game that only wizards (pun intended) can beat. !

Get an OpenAI API Key

To add AI to your app, you use OpenAI’s API. For this, you need an account. You can create a new one or use your own.

NOTES: If you already have an account and want to use this tutorial, remember that your credit may have expired. In that case, you will need a new account or to add billing information and upgrade to a paid account.

To create a new account, open your web browser and navigate to https://platform.openai.com/overview. Use the Sign up button in the upper right corner or use within if you have an account.

You will need the following information to create an account:

  • Email
  • Password
  • First name
  • surname
  • Date of birth
  • Working phone number – you will need this to verify your information

After you create your account, continue and log in. You will see something like this:

OpenAI home page after authentication

Now, click on your profile, again located in the upper right corner of the screen. This should display a pop-up menu as follows:

Profile popup menu

Then, choose See API keys. Next, press Create a new secret key. You can choose a name for the key (this is optional) and click Generate secret key. This will create your secret key.

OpenAI Platform: Modal with API secrets

Make sure to copy the key somewhere safe ever you will never see it again. You will need to add this key to the project later.

Great job, you’ve created an account and have access to OpenAI’s API platform. This is one small step for your app but one giant leap for your development skills.

Learn Best Practices for GPT Models

Now that you’ve taken the first step toward implementing AI in your apps, it’s time to discuss best practices when interacting with GPT models via the API or the ChatGPT app.

Although GPT models do a good job of trying to understand what you mean, it may not always work as expected because it can’t read your mind (yet!).

This is where best practices regarding prompting come in. This will help you get better results from the language model.

Here are some strategies that can improve your results when using GPT models. Each of them also has examples that you can play with OpenAI Playground:

You will ask questions for the game and give hints to the players.

When asking questions, you can add humor to the question in the form of a fun fact.

When giving fun facts, you should add puns to make it fun.

These scenarios are a good example of when to make it easier to model by breaking it down step by step. For example, when creating trivia questions, you may want the model to follow certain steps. Here’s the guide you’ll use to prompt the model for the new trivia questions:

To solve this, do the following:
– First, you randomly choose one of the following topics: history, art, entertainment, sports, science, or geography.
– Then, you create a question based on the chosen topic.

To solve this, do the following:
– First, you analyze the question and determine the correct answer.
– Then, you make a hint that makes it easier to answer. Make sure the hint is not too obvious.

Do not decide on the hint until you have answered the question yourself.

  • Use persona to provide context: Sometimes, the answer you get may not be what you want in terms of domain or technical depth. In those cases, it might be a good idea to provide a persona definition to help you get the answer you’re looking for. For example, here’s the persona you’ll use to make sure the model knows what style of responses you expect:

    You are the know-it-all and funny host of a trivia game called Wizz.

  • Provide step-by-step instructions to complete a task: Some tasks may be complex enough that the model may struggle to understand them.

    Your task is to create a new trivia question for the player.

  • Give examples of the output: If you want the model to copy a particular style or follow a specific format when responding. Then it’s a good idea to give examples. You can give an example of the voice and tone of the answer or even a JSON template to follow. For example, when interacting with the model via the API, you usually want to end your prompts with a JSON instance of the response expected, like below:

    Your output should just be JSON without formatting, and follow this template:
    { “action”: “player_hint”, “hint”: ““}

  • Give GPTs time to think of their own solution: Sometimes, you get better results if you teach the model to reason first before giving an answer. This is a common scenario when validating answers from a problem statement provided by other users. A good use case for Wizz is when asking for hints, you first want the model to understand the question before giving a hint so you can avoid obvious hints.

    Your task is to give a hint to the player without giving the answer.

You are the know-it-all and funny host of a trivia game called Wizz.

Your task is to create a new trivia question for the player.

Your output should just be JSON without formatting, and follow this template:
{ “action”: “player_hint”, “hint”: ““}

Your task is to give a hint to the player without giving the answer.

These are some tactics you can use to improve your results, but many tactics can be used for different scenarios. Head to OpenAI best practices documentation for more information. You can use OpenAI Playground to test your prompts and play with the model. This is a great way to test your prompts before integrating them into your app code.

Leave a comment