Building AI-Augmented Apps With React-Admin

Recent advances in AI have made it possible to automate many tasks that were previously manual. If you build B2B and admin apps, you can leverage these advances to improve the user experience and productivity. In this article, we'll see how a new react-admin package called ra-ai, lets you add AI superpowers to a React app.

Autocompletion For Data Entry

The concept of autocompletion has been around for a long time in the context of search engines. Large Language Models (LLMs) like GPT-3 extend this concept and lets us predict the next word or sentence based on any context. This is what powers the autocomplete feature in Gmail, for instance. This is more a prediction than a completion, but the idea is the same.

What if you could add such predictive behavior to every text input? That's the idea behind the <PredictiveTextInput> component in React-admin.

Use the <PredictiveTextInput> just like other regular form inputs in a react-admin form:

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { PredictiveTextInput } from '@react-admin/ra-ai';

const PersonEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="firstName" />
            <TextInput source="lastName" />
            <TextInput source="company" />
            <PredictiveTextInput source="email" />
            <PredictiveTextInput source="website" />
            <PredictiveTextInput source="bio" multiline />
        </SimpleForm>
    </Edit>
);

With <PredictiveTextInput>, users can say goodbye to repetitive typing, spelling errors, and unnecessary delays in their workflow. Forms become smart, and users can focus on what matters.

Text Edition Brushes

We often use web apps to transform text, like when we edit a paragraph to make it more readable, or when we write a summary of a long text. LLMs can do that for us: they are good at transforming existing text based on instructions. What if we could trigger such transformations in the web apps we use just by selecting text and pressing a button? It would be like a brush in a painting app, which changes the color of the selected area.

The <SmartRichTextInput> component is a WYSIWYG editor that offers such AI-powered text brushes.

<SmartRichTextInput> adds 4 buttons on the right side of the toolbar:

• <AutoCorrectButton>: Correct the misspelled words and grammar errors
• <RephraseButton>: Rephrase the selection
• <SummarizeButton>: Summarize the selection
• <ContinueButton>: Generate more content based on the current text

To use it, just replace <RichTextInput> with <SmartRichTextInput> in a react-admin form.

import { Edit, SimpleForm, TextInput } from 'react-admin';
import { SmartRichTextInput } from '@react-admin/ra-ai';

export const PostEdit = () => (
    <Edit>
        <SimpleForm>
            <TextInput source="title" />
            <SmartRichTextInput source="body" />
        </SimpleForm>
    </Edit>
);

React-admin makes it easy to add more custom buttons based on a prompt you define. For instance, you could add a button to translate the selected text to another language, generate a list of keywords from the selected text, or highlight the most important sentences.

Imagine the productivity boost for your users if they could do all that without leaving the app!

Perspectives and Limitations

Accuracy

The accuracy of the predictions depends on the quality of the AI backend. The current OpenAI adapter is based on GPT-3, which is a very good LLM. But it's not perfect, and it can hallucinate or make mistakes. In practice, predictions and transformations are mostly accurate, but you should always review them before saving them.

Productivity

These components are designed to improve the productivity of your users, not to replace them. The changes suggested by the AI backend always need to be reviewed by the user before being saved. We've seen productivity boosts of up to 30% in our tests, but your mileage may vary.

Configurable

Although the basic usage of these components is straightforward, they are highly configurable. You can change the temperature (the randomness) of the predictions, the size of the predictions, the expected locale, and even the prompt used to generate the predictions. Check the <PredictiveTextInput> and <SmartRichTextInput> documentation for more details.

Backend Agnostic

These features require access to an AI API. ra-ai currently ships with an OpenAI integration, but the code is backend-agnostic, so you can swap Open AI with another provider (Anthropic Claude, Google Bard, etc.) or even your own AI backend.

Security

The AI API needs to access the data to learn from it. This means that the data needs to be sent to the AI API. This is a security concern, especially if the data is sensitive. To address this concern, ra-ai lets you configure a list of fields that should not be sent to the AI API. For instance, you can exclude the password field from the AI API calls.

Also, the current OpenAI adapter forces you to add your OpenAI token to the JavaScript bundle. This is a serious security flaw for public websites, as anyone can steal your token and use it to generate content on your behalf. For such apps, you should use a proxy server to call the OpenAI API and keep the token on the server.

Cost

AI APIs are not free. And these new components may make a lot of calls to the API (even though they are optimized to minimize the number of calls). In our experience, a B2B app including these components, used every day, should cost a few dollars per user. When you deploy these new features, you should monitor the number of calls to the AI API, and add a spending limit to your account to avoid surprises.

Conclusion

<PredictiveTextInput> and <SmartRichTextInput> are part of ra-ai, a react-admin Enterprise Edition package. This package is available today to all react-admin Enterprise Edition customers at no extra cost.

The AI revolution is here, and it's time to leverage it to build better apps. React-admin makes it easy to add AI superpowers to your apps, and ra-ai is a good starting point. Give it a try, and let us know what you think!

We have many more AI-powered components in the pipeline, so stay tuned!