React Tutorial using Generate
#
Build a Trivia Generator with CohereIf 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.
#
RequirementsFor 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.
#
Tutorial steps- 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
#
Step 1: Create your Node (Express) BackendCreate 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:
Note the 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 index.js
file.

Paste the following code in server/index.js
:
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 package.json
file:
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:
#
Step 2: Prompt Cohere to generate trivia questionsSign 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 Generate
button:

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.
For more details on how to craft great prompts, read our documentation on prompt engineering. If you want greater control over the output, try playing with temperature, top-k, and top-p values.
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 js
tab:

We’ll be able to use this code to call Cohere and return trivia questions.
#
Step 3: Integrating Cohere into your appIn 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.
Visit 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.
#
Step 4: Build your React frontendOpen 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 localhost:3000
.
#
Step 5: Passing an input from React frontend to Node backendOpen the 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 localhost:3001
.
In the App()
function, create a data
and 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 server
:

#
Other things to tryCongratulations! 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!