AI21 Labs Tutorial: Building a Text Improver App with Next.js

Introduction to AI21 Studio

AI21 Studio is an innovative AI development platform designed to simplify and reduce costs for businesses aiming to build, train, and implement Natural Language Processing (NLP) applications. The studio offers a range of models and APIs that empower developers to create custom NLP solutions tailored to their needs.

Getting Started with AI21 Studio

To begin using AI21 Studio, you'll need to follow a simple process:

1. Create an account on the AI21 Studio website.
2. Sign up for a free trial to gain access to essential features.
3. Once registered, access the Playground feature. This interactive area allows you to explore the platform's various models and capabilities.
4. As you experiment in the Playground, familiarize yourself with the functionalities before diving into advanced projects.

Obtaining an API Key

As you progress, you’ll need an API key, which you can generate on the platform. This key will enable you to make calls to various API endpoints, including the Text Improvements API.

Overview of the Text Improvements API

The Text Improvements API leverages AI21 Labs' state-of-the-art recommendation engine, which drives applications like Wordtune. This API is specially optimized to efficiently generate high-quality text improvements.

To explore this feature, you can test the API through the AI21 Labs Documentation.

Creating Your Next.js Project

To kickstart your project, follow these steps:

npx create-next-app@latest text-improver --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

Setting Up the API Route

Next, save your API key in a .env.local file at the root of your project with the key named API_KEY. Create a new folder api inside the pages directory and add a file named improve.js. This file will handle communication between the frontend and backend.

Your improve.js code will use the fetch method to call the API via a POST request, sending the text for improvement alongside an array identifying the types of enhancements you desire.

Building the Frontend

Next, create a new folder called components and within that, a file named TextImprovementInput.jsx.

• Utilize the useState hook to store default text, text to be improved, and the improvements returned from the API.

Your frontend will feature a controlled element containing an input for text and a button. Clicking the button triggers the API call to fetch improvements.

Implementing the Button Click Handler

After defining your components, add a handleButtonClick function to process the API call whenever the button is clicked.

Displaying Improvements

With the improvements received in an array, you'll need to display these effectively. Use the useEffect hook to manipulate data, creating a new array storing the text and any suggested changes.

Map through the text array in your return statement to render each piece accordingly.

Creating Additional Components

To enhance user interaction:

• Create a Texts.jsx component to display the text alongside an index and integrate a modal to show suggestions.
• Add a callback function to handle text changes based on user selections.
• Develop a Modal.jsx component to present suggested improvements dynamically.

Conclusion

Following these steps will help you successfully build a text improvement application using AI21 Studio. You'll gain hands-on experience with API integration while enhancing your understanding of React and Next.js.

For further development, explore the comprehensive documentation available at AI21 Studio.