DEV Community: victor forissier

🔥 8 React components with LLMs 🤖

victor forissier — Wed, 10 Jan 2024 15:59:52 +0000

We’re 3 devs who started an open-source library of React components with integrated LLM calls. It would mean the world if you gave us a star on GitHub!

Use directly in React client-side code
Just wrap a provider & calls work through our API (also open-source.)

Probably half of those 8 components are useless. But tell us on our Discord or in the comments! We'll improve those you like, and make those you want.

⚠️ To test the components in your app, first create a Polyfire project and wrap your app with the <PolyfireProvider /> passing your project ID as a prop → Here is how to set it up.

1. <TextSummary />

Displays a summary of a long text you pass in as a prop. It also caches the summary on our API after generation so you only pay LLM cost once.

Code

<TextSummary 
    prompt="Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'
        So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
        There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge." 
    stream={false} 
/>

Result

2. <AutoCompleteTextArea />

Turns a regular Textarea element into a Copilot-like with autocomplete.

Code

<AutoCompleteTextArea />

Result

3. <AutoCompleteInput />

Like but extends an Input instead of a Textarea.

Code

<AutoCompleteInput />

Result

4. <TextTranslated />

Translates, caches and displays the text you pass in, in the language of your choice.

Code

<TextTranslated 
    text="Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'
        So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
        There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge."
    language="french" 
/>

Result

5. <ImageGenerated />

Generates, caches and displays an AI generated image based on your prompt.

Code

<ImageGenerated prompt={"funny smiley with beautiful teeth"} model={dall-e-3} />

Result

6. <TextGenerated />

Generates, caches and displays an LLM answer based on the prompt passed as a prop.

Code

<TextGenerated prompt={"Make a funny pun"} stream={false} />

Result

7. <Chat />

Set of components that reproduce a basic ChatGPT interface, you can customize it to make your chatbot or app.

Code

<Chat.Sidebar>
  <Chat.SidebarHeader />
  <Chat.NewChatButton />
  <Chat.ChatList />
  <Chat.SidebarButtonGroup>
    <Chat.LogoutButton onClick={() => auth.logout()} />
  </Chat.SidebarButtonGroup>
</Chat.Sidebar>
<Chat.View>
  <Chat.History
    HistoryItemComponent={Chat.RoundedChatListItem}
    HistoryLoadingComponent={Chat.RoundedHistoryLoadingComponent}
    HistoryEmptyComponent={Chat.HistoryEmptyComponent}
  />
  <Chat.ScrollToBottomButton
    disabled={chat.isAtBottom}
    onClick={utils.onScrollToBottom}
  />
  <Chat.Prompt>
    <Chat.Input autoFocus />
    <Chat.SendButton />
  </Chat.Prompt>
</Chat.View>

Result

8. <Login />

To use all the previous components, you need to connect to Polyfire Auth in someway (otherwise our API can’t distinguish expensive bots). If you have already auth setup, you can authenticate you Auth Token. But otherwise, you can log users in with Polyfire Auth using the usePolyfire() hook, but this component does it all for you.

Code

<Login
  termsOfService="https://example.com/tos"
  privacyPolicy="https://example.com/privacy"
>
  /*
        What to display when the user is logged in.
    */
</Login>

Result

Let's connect on X? :)
I'm here

Have you seen other cool AI React components?

Let me know about them in the comments :)

AI-Tests Quest

victor forissier — Tue, 01 Aug 2023 16:29:58 +0000

I tried writing the outline of this article with ChatGPT. I asked it to be casual, but it went crazy into this fantasy mode. It was quite funny so I kept it mostly intact. xD.
– Victor (the writer)

Welcome, fellow engineers, to the magical land of ai-tests, a powerful tool conjured up by our friend Lancelot, designed to create test boilerplate code from your files. Though it may not create the perfect dragon-slaying sword every time, it does pretty well and can certainly save you from wrestling with the beast of initial test creation. If you'd like to get a feel for its magic, head on over to the repository here.

Fetching Your PolyFact Token

Before embarking on your journey, you'll need to obtain a mystical object - the PolyFact token. PolyFact is a magical API witch, with powers and spells unbeknownst to humankind. It is the key to generating AI responses in the ai-tests tool. Like all quests, obtaining this key involves a few steps:

Navigate to the PolyFact Dashboard.
Connect with your GitHub account.
Once you've connected, copy your newly created token.

After securing your token, you'll need to embed it into your environment. We just use a simple export command for this:

export POLYFACT_TOKEN=<your_polyfact_token>

Now you're all set!

Summoning the AI-Tests

Ready to summon the magic? Simply provide your file path to the ai-tests command. Here's how you do it:

$ npx ai-tests <input_file>

And voila! Just like that, you'll have a batch of unit tests in the language corresponding to your input file. Now you're free to modify, add to, or otherwise adjust these tests as you see fit.

A Few Words of Caution

Though it's quite a handy tool, it's important to remember that ai-tests isn't a silver bullet. Like any tool, it's all about using it in the right context and for the right job. The generated tests can range from nearly perfect to needing a bit of refinement, but either way, they're a solid starting point.

Be aware of one limitation: the tool is sensitive to file size. If a file is too large, it'll generate multiple tests and concatenate them. Depending on the language, this may not always produce syntactically valid test files.

How to Lend a Hand

Oh, by the way, if you're interested in contributing or have some fantastic ideas to make this tool even better, Lancelot is always open to suggestions and improvements. Feel free to create a pull request or open an issue on the GitHub repository here. Let's make ai-tests the best it can be together!

And that's it! Enjoy your adventure with ai-tests. Remember, the goal here isn't to create perfect tests every time, but to give you a headstart on your testing journey.

Your friend,
Victor the Witch

Debugging Simplified with console.ai()

victor forissier — Thu, 27 Jul 2023 12:13:48 +0000

Debugging often feels to me like finding a needle in a haystack, which is why we did this new tool, console-ai, and it makes a notable difference. You can explore more about it on the GitHub repository.

console-ai, a Node.js module, redefines console functionality. It leverages OpenAI's language models to transform error logs into an easily comprehensible format, outlining potential causes and solutions. It introduces a new method, console.ai(), as an upgrade to the standard console.log().

How Does console-ai Work?

The essence of console-ai is to expedite and enhance the debugging process, but how does it do that?

By simply replacing your regular console.log() or console.error() calls with console.ai(), this tool offers valuable insights into complex issues, which can dramatically speed up debugging. Moreover, it maintains the integrity of your data by logging the original error message, if you choose. If that sounds intriguing, do check out the project on GitHub.

Getting Started with console-ai

First, import and initialize the module:

import { extendConsole } from "console-ai";


extendConsole();

Now, you can replace your usual console.log() or console.error() calls with console.ai():

try {
  // code that might throw an error
} catch (e) {
  console.ai(e);
}

Beyond Debugging

In addition to enhancing debugging, console-ai offers insights into application behavior, thereby improving overall development efficiency. It translates error messages into a more understandable format, outlines potential causes of an error, suggests possible solutions, and ensures original error messages are logged.

Customize Your Experience

You can customize console.ai by picking which sections of the output to display or decide whether or not to keep the original error.

extendConsole({
    prompt?:  string;
    sections?: ErrorSection[];
    showOriginalError?: boolean;
    showResultWithJsonFormat?: boolean;
});

You can find more details about these customization options in the GitHub repository.

A Peek Behind the Scenes

console-ai was built using the PolyFact SDK, a Node SDK that calls an API to help build AI tools and apps. The PolyFact SDK forms the backbone of Console-ai, enabling it to provide enhanced console functionality.

Wrapping Up

console-ai presents a modest yet powerful solution to improve debugging and development efficiency. It offers an innovative way to translate error logs into a more readable format, providing potential causes and solutions. By leveraging the power of the PolyFact SDK and OpenAI's language models, it delivers a more insightful, customizable debugging experience.

Visit the GitHub repository to check it out and see how console-ai can enhance your development workflow. Happy coding!

For any queries or suggestions, feel free to reach out on Discord.