If you’ve ever hosted a trivia night, you know that brainstorming the questions is a laborious creative process. You can’t just look for existing questions — you want original questions that suit your friends’ interests and knowledge levels. If only artificial intelligence was good enough to write fun new questions based on your favourite topics, right?
Look no further than this trivia generator built with Cohere. Give it a shot!
Cohere builds and hosts world class large language models that developers can leverage with a single API call. In this tutorial, we’ll be using Cohere’s Generate endpoint, which outputs human-like writing given a structured input prompt (in this case, a topic), to create the simple trivia question generator above with React.
The primary goal of this tutorial is to guide developers through configuring Cohere's Generate endpoint to achieve their desired output (trivia questions). If you are only interested in following this part of the tutorial, see Step 2.
By the end of this tutorial, you will be able to set up a frontend that takes an input prompt and a backend that gets an output from Cohere for an app that serves this trivia generator.
All the code written for this tutorial can be found from our samples repository, along with other integrations between our LLMs and popular developer tools.
For this tutorial, you will need:
- A code editor of your choice. We recommend VSCode. Download VSCode.
- Node.js installed on your machine. Download Node.js.
- Basic knowledge of Express.
- Basic knowledge of React.
- A Cohere API key. After you create a Cohere account, navigate to “Dashboard” and click
Create API Key, pictured below:
Make sure to copy your API key somewhere safe such as a password manager. You will need to generate a new one if you lose it.
- Create your Node (Express) backend
- Prompt Cohere to generate trivia questions
- Integrating Cohere into your app
- Build your React frontend
- Passing an input from React frontend to Node backend
Create a folder for your project. You can name it
trivia-generator, for example.
Open the folder in your code editor.
Open your terminal and navigate to the directory you just created. Run the following command:
package.json file that was created in the folder -- We’ll need that for later.
For now, create a
server folder. In the
server folder, create an
Paste the following code in
This uses Express to create a web server for us running on port 3001. You'll need to install a few packages for this to work, so run the following in your command line:
To ensure that your server has been set up correctly thus far, add the following script to the
This enables you to run the following command in the terminal, after which you should see your server successfully listening to the specified port 3001:
Sign into your Cohere account and navigate to the playground.
You’ll see a pre-loaded prompt in the window on the playground. To get a sense of how Cohere's Generate endpoint works, try clicking
Generate. Cohere’s large language models read the prompt and decide what the most appropriate next tokens are to return. To learn best practices for prompting the model, read our guide to Prompt Engineering.
We’ll need to prompt the model to give us trivia questions. First, let's describe the task we want the model to perform:
Next, we need to give the models a few examples of outputs we are looking for. Here are some popular trivia questions from Google:
I’ve separated the questions using a
- character, called a stop sequence. The stop sequence character is completely arbitrary, though I'd recommend a character you don't expect to see in your generations because the model will stop generating text after it returns the stop character.
When the model is learning our trivia examples, it will start to generate outputs in the format we’re teaching it with our prompt. This is handy if you want the model to stop generating text after it has outputted a question. To set a stop sequence, go to the
Advanced parameters dropdown. After adding the
- as our parameter, it should look like this:
You can have multiple stop sequences if needed, but it's not necessary for this tutorial. Now, let’s give it a topic and see what our generation looks like. Click the
Pretty interesting question! And if you’re curious, the most widely used mobile phone network (by subscriptions) is China Mobile Communications Corporation.
The more examples you can add, the better the model should perform at this task. We ultimately added 25 trivia questions to teach the model our desired output, but ideally you would scrape more examples to add to your text, or finetune a model with even more questions to specialize it in this task. If you’re not getting satisfactory results with your own prompts in the future, a safe bet is always to add more examples.
When you're happy with the quality of your generations, delete the last generation and the topic. We’re going to have the user input this in the application we build. At this point, click the
Export Code button and copy the code in the
We’ll be able to use this code to call Cohere and return trivia questions.
In a new terminal window, run the following command:
We’re going to define an API endpoint that sends a request to Cohere when called. Copy the following code (loaded with 25 trivia questions) into your
server/index.js file, like so:
To ensure this is working, go to your terminal where your server was running and restart it by clicking Command/Ctrl + C. Type
npm start to run it again.
http://localhost:3001/api in your browser to see your API call successfully hit Cohere’s endpoint:
The next step is to build a React frontend to interface with this API.
Open a new terminal window, change into your project folder (
trivia-generator), and paste the following command:
Change into the new
client directory and run the following command:
Your browser should open on
src/app.js file in your code editor.
Add the following import statement:
Define the root URL where this app should hit the API, in this case at
App() function, create a
prompt state variable. The
data variable will contain the output generated from Cohere’s model, and
prompt will be used to store the user’s input for the topic. The
prompt will be updated to whatever is in the textbox when a user clicks submit on the form, at which time a request is sent to the
/api endpoint we defined to get a response from Cohere.
Add a return statement inside
App() and copy in this basic HTML that adds the aforementioned form box to the page:
Save this, and you should be able to see the changes at
localhost:3000 assuming you didn’t stop your
Congratulations! You've just built a React app with Cohere's Generate endpoint! Building on top of your knowledge, you could rework the prompts to rephrase sentences to be used as a writing assistant, or summarize long articles you find on the web. Check out our guide on how to implement summarization next.
Drop us a comment at community.cohere.ai if you have any questions or comments along the way. Happy writing!