⚡️7 easy AI-product integrations (to keep up with the times 👴🏻👨‍🔧)
Tags: webdev, programming, ai, productivity
Published: 2023-11-14 13:51:01

## TL;DR
A list of the best easy-to-build AI product integrations. 

These can give your project magical powers, so don't forget to show them support 🌟

Now let's head down AI-road 👨‍🌾


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cat30m677e7c0vv8bpn.gif)


---

## 1. [CopilotPortal](https://github.com/RecursivelyAI/CopilotKit): Embed an Actionable LLM Chatbot Into Your app. 




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x31tl645tfa3sw5lwwzv.jpg)

A context-aware LLM chatbot inside your application that answers questions and takes actions. 

Get a working chatBot with a few lines of code, then customize and embed as deeply as you need to. 

```ts
import "@copilotkit/react-ui/styles.css";
import { CopilotProvider } from "@copilotkit/react-core";
import { CopilotSidebarUIProvider } from "@copilotkit/react-ui";

export default function App(): JSX.Element {
  return (
  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat">
      <CopilotSidebarUIProvider>

        <YourContent />

      </CopilotSidebarUIProvider>
    </CopilotProvider>
  );
}
```

{% cta https://github.com/RecursivelyAI/CopilotKit %} Star CopilotPortal on GitHub⭐️ {% endcta %}



---


## 2. [LinguiJS](https://github.com/lingui/js-lingui) - Automatic & Simple Internationalization

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80f1yb9etnzf3z4pk7t3.png)


Simple and powerful open-source Internationalization library. 

Easy to integrate framework for creating multilingual react applications. 



```ts
import { Trans } from "@lingui/macro"

function App() {
  return (
   <Trans id="msg.docs" /* id is optional */>
     Read the <a href="https://lingui.dev">documentation</a>
     for more info.
   </Trans>
  )
}
```

{% cta https://github.com/lingui/js-lingui %} Star LinguiJS on GitHub⭐️ {% endcta %}


---

## 3. Pezzo.ai - Observability, Cost & Prompt Engineering Platform



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxvbgi5zkghkb0t64npw.jpeg)

Centralized platform for managing your OpenAI calls. 

Optimize your prompts & token use. Keep track of your AI use.

Free & easy to integrate. 

```ts 
const prompt = await pezzo.getPrompt("AnalyzeSentiment");
const response = await openai.chat.completions.create(prompt);
```
{% cta https://github.com/pezzolabs/pezzo %} Star Pezzo ⭐️ {% endcta %}

---

## 4. CopilotTextarea - AI-powered Writing in React Apps


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uye8z6aac1015iiqd3lk.png)

A drop-in replacement for any react `<textarea>` with the features of Github CopilotX. 

Autocompletes, insertions, edits.

Can be fed any context in real time or by the developer ahead of time.


```ts
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";


// Provide context...
useMakeCopilotReadable(...)

// in your component...
<CopilotProvider>
    <CopilotTextarea/>
</CopilotProvider>`
```

{% cta https://github.com/RecursivelyAI/CopilotKit %} Star CopilotTextarea ⭐️ {% endcta %}

---

## 5. LangChain - Pull together AI into chains. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s87kvm5jt5wmsv702r1.png)

Easy-to-use API and library for adding LLMs into apps.

Link together different AI components and models. 

Easily embed context and semantic data for powerful integrations.

{% cta https://github.com/langchain-ai/langchain %} Star LangChain ⭐️ {% endcta %}

---

## 6. SwirlSearch - AI powered search. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/extnr9oxhubs6m9x817a.png)

LLM-powered search, summaries and output. 

Searches multiple content sources simultaneously into integrated output. 

Powerful for tailored in-app integrations of various data sources.

{% cta https://github.com/swirlai/swirl-search
 %} Star SwirlSearch ⭐️ {% endcta %}

---


## 7. ReactAgent - experimental LLM agent for generating react components from user stories 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2gbb71oqobdeuh1pgnp.jpg)

Experimental tool that uses GPT-4 to turn user stories into working React components. 

Feed it local designs to achieve a consistent output & design language. 

{% cta https://github.com/eylonmiz/react-agent %} Star ReactAgent ⭐️ {% endcta %}

---

Thanks Everyone!