8 open-source tools to build your next AI SaaS app šŸ”„ šŸš€

Nevo David - Oct 25 - - Dev Community

I have been working with many companies, and believe me when I tell you there is a huge demand for AI-powered solutions. All the big fishes in tech, from Google to Meta, are heavily investing in AI models.

This is the best time to build an AI-powered app to capitalize on the growing demand, but finding the right tools for it can be challenging.

I have compiled eight open-source tools to help you develop your AI-powered SaaS app easily.

Family Guy Peter dancing

1. ComposiošŸ‘‘: All-in-one tooling solution for your AI agents

I have built my own AI-powered SaaS app, and trust me when I say this: adding multiple integrations with AI agents to automate workflows is much more challenging than it sounds.

Composio is the only solution in this space. It has over 90 tools and integrations across industry verticals, from CRM, HRM, and social media to Dev and Productivity.

You can connect these tools with AI models and let them automate workflows, such as Reviewing PRs and handling customer queries on Discord.

Composio tools Catalog

It handles complex user authentication and authorization, such as OAuth, JWT, and API Key, on behalf of your users so you can spend time on other essential things.

You can quickly start with Composio by installing it usingĀ pip.

pip install composio-core
Enter fullscreen mode Exit fullscreen mode

Add a GitHub integration.

composio add github
Enter fullscreen mode Exit fullscreen mode

Composio handles user authentication and authorization on your behalf.

Here is how you can use the GitHub integration to start a repository.

from openai import OpenAI
from composio_openai import ComposioToolSet, App

openai_client = OpenAI(api_key="******OPENAIKEY******")

# Initialise the Composio Tool Set
composio_toolset = ComposioToolSet(api_key="**\\*\\***COMPOSIO_API_KEY**\\*\\***")

## Step 4
# Get GitHub tools that are pre-configured
actions = composio_toolset.get_actions(actions=[Action.GITHUB_ACTIVITY_STAR_REPO_FOR_AUTHENTICATED_USER])

## Step 5
my_task = "Star a repo ComposioHQ/composio on GitHub"

# Create a chat completion request to decide on the action
response = openai_client.chat.completions.create(
model="gpt-4-turbo",
tools=actions, # Passing actions we fetched earlier.
messages=[
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": my_task}
  ]
)
Enter fullscreen mode Exit fullscreen mode

Run this Python script to execute the given instruction using the agent.

For more about Composio, visit their documentation.

Composio GIF

Star the Composio repository ā­

2. Vercel AI SDK: Toolkit for quickly building AI apps

If you are a Typescript developer looking for a unified solution for building AI apps, this is the one for you.

Vercel AI SDK is a unified Typescript toolkit designed to help developers build AI-powered solutions using React, Vue, Svelte, NextJS, and Node JS.

It mainly has two components,

  • AI SDK Core: A unified API for generating structured objects, texts, and tool calls with LLMs.
  • AI SDK UI: A set of framework-agnostic hooks for quickly building chat and generative user interface.

To get started, install the library.

npm install ai
Enter fullscreen mode Exit fullscreen mode

Install the model provider of your choice.

npm install @ai-sdk/openai
Enter fullscreen mode Exit fullscreen mode

Call OpenAI API.

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai'; // Ensure OPENAI_API_KEY environment variable is set

async function main() {
  const { text } = await generateText({
    model: openai('gpt-4-turbo'),
    system: 'You are a friendly assistant!',
    prompt: 'Why is the sky blue?',
  });

  console.log(text);
}

main();
Enter fullscreen mode Exit fullscreen mode

Call Anthropic API

import { generateText } from "ai"
import { anthropic } from "@ai-sdk/anthropic"
const { text } = await generateText({
model: anthropic("claude-3-opus-20240229"),
prompt: "What is love?"
})
Enter fullscreen mode Exit fullscreen mode

Check out the documentation for more.

Vefcel AI SDK GIF

Star the AI SDK repository ā­

3. Julep: Managed backend for AI apps

Developing AI apps can quickly become convoluted if not appropriately handled. Julep provides a comprehensive solution for developers to build AI agents with long-term memory and manage multi-step processes.

Julep enables the creation of multi-step tasks incorporating decision-making, loops, parallel processing, and integration with numerous external tools and APIs.

While many AI applications are limited to simple, linear chains of prompts and API calls with minimal branching, Julep is built to handle more complex scenarios.

Julep is available both in Python and Javascript.

Quickly get started with Julep.

npm install @julep/sdk
Enter fullscreen mode Exit fullscreen mode

Create an agent with Julep.

import { Julep } from "@julep/sdk";
import yaml from "js-yaml";

const client = new Julep({ apiKey: "your_julep_api_key",environment:ā€œdevā€ });

async function createAgent() {
  const agent = await client.agents.create({
    name: "Storytelling Agent",
    model: "gpt-4",
    about:
      "You are a creative storytelling agent that can craft engaging stories and generate comic panels based on ideas.",
  });

  // šŸ› ļø Add an image generation tool (DALLĀ·E) to the agent
  await client.agents.tools.create(agent.id, {
    name: "image_generator",
    description: "Use this tool to generate images based on descriptions.",
    integration: {
      provider: "dalle",
      method: "generate_image",
      setup: {
        api_key: "your_openai_api_key",
      },
    },
  });

  return agent;
}
Enter fullscreen mode Exit fullscreen mode

Check out their documentation for more on creating tasks, executing them, and chatting with agents.

JulepAI GIF

Star the Julep repository ā­

4. CopilotKit: Add AI copilot to any web app

If you want a solution to conveniently add AI capabilities, text generation, and agentic automation, your search ends here.

It provides multiple components, such as an In-app AI Chatbot, Copilot text area, and Generative UI.

Get started with CopilotKit by installing it via npm.

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
npm install openai
Enter fullscreen mode Exit fullscreen mode

Set OpenAI Key.

OPENAI_API_KEY=your_api_key_here
Enter fullscreen mode Exit fullscreen mode

Set up the endpoint by creating a new route to handle the /api/copilotkit endpoint.

#route.ts

import {
  CopilotRuntime,
  OpenAIAdapter,
  copilotRuntimeNextJSAppRouterEndpoint,
} from '@copilotkit/runtime';
import OpenAI from 'openai';
import { NextRequest } from 'next/server';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const serviceAdapter = new OpenAIAdapter({ openai });
const runtime = new CopilotRuntime();

export const POST = async (req: NextRequest) => {
  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
    runtime,
    serviceAdapter,
    endpoint: '/api/copilotkit',
  });

  return handleRequest(req);
};
Enter fullscreen mode Exit fullscreen mode

Configure the Copilot Provider

#layout.tsx

import { CopilotKit } from "@copilotkit/react-core"; 

export default function RootLayout({children}) {
  return (
    {/* Make sure to use the URL you configured in the previous step */}
    <CopilotKit runtimeUrl="/api/copilotkit">
      {children}
    </CopilotKit> 
  );
}
Enter fullscreen mode Exit fullscreen mode

Connect Copilot UI.

#layout.tsx

import "@copilotkit/react-ui/styles.css";
import { CopilotPopup } from "@copilotkit/react-ui";

export function YourApp() {
  return (
    <>
      <YourMainContent />
      <CopilotPopup
        instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
        labels={{
          title: "Popup Assistant",
          initial: "Need any help?",
        }}
      />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

With this, you have successfully added a pop-up within your web app.

For more, refer to the official documentation.

CopilotKit GIF

Star the CopilotKit repository ā­

5. E2b: Runtime for running AI-generated code

If you're building apps that need AI-generated code execution, like an AI analyst, software developer, or generative UI, E2B is the go-to platform.

Under the hood, it uses an isolated virtual machine to sandbox the code execution. You run a separate sandbox in your app for each LLM, user, or AI agent session. For example, if you were building an AI data analysis chatbot, you would start the sandbox for every user session.

Install E2B SDK.

npm i @e2b/code-interpreter dotenv
Enter fullscreen mode Exit fullscreen mode

Write code for starting a sandbox.

import 'dotenv/config'
import { Sandbox } from '@e2b/code-interpreter'

const sbx = await Sandbox.create() // By default the sandbox is alive for 5 minutes
const execution = await sbx.runCode('print("hello world")') // Execute Python inside the sandbox
console.log(execution.logs)

const files = await sbx.files.list('/')
console.log(files)
Enter fullscreen mode Exit fullscreen mode

Start the sandbox.

npx tsx ./index.ts
Enter fullscreen mode Exit fullscreen mode

Check out the documentation for more.

E2B Gif

Star the E2B repository ā­

6. Haystack: The production-ready AI framework

Haystack is a complete platform that meets all your needs for building production-ready RAG pipelines, state-of-the-art AI search systems, and LLM-powered applications.

Haystack offers a modular approach to building pipelines, making it easier for developers to add components like vector stores, re-rankers, and embedding models as and when needed.

Get started by installing it via pip.

pip install haystack-ai
Enter fullscreen mode Exit fullscreen mode

Letā€™s create a simple RAG pipeline.

import os
from haystack import Pipeline, Document
from haystack.utils import Secret
from haystack.document_stores.in_memory import InMemoryDocumentStore
from haystack.components.retrievers.in_memory import InMemoryBM25Retriever
from haystack.components.generators import OpenAIGenerator
from haystack.components.builders.answer_builder import AnswerBuilder
from haystack.components.builders.prompt_builder import PromptBuilder

# Write documents to InMemoryDocumentStore
document_store = InMemoryDocumentStore()
document_store.write_documents([
    Document(content="My name is Jean and I live in Paris."), 
    Document(content="My name is Mark and I live in Berlin."), 
    Document(content="My name is Giorgio and I live in Rome.")
])

# Build a RAG pipeline
prompt_template = """
Given these documents, answer the question.
Documents:
{% for doc in documents %}
    {{ doc.content }}
{% endfor %}
Question: {{question}}
Answer:
"""

retriever = InMemoryBM25Retriever(document_store=document_store)
prompt_builder = PromptBuilder(template=prompt_template)
llm = OpenAIGenerator(api_key=Secret.from_token(api_key))

rag_pipeline = Pipeline()
rag_pipeline.add_component("retriever", retriever)
rag_pipeline.add_component("prompt_builder", prompt_builder)
rag_pipeline.add_component("llm", llm)
rag_pipeline.connect("retriever", "prompt_builder.documents")
rag_pipeline.connect("prompt_builder", "llm")

# Ask a question
question = "Who lives in Paris?"
results = rag_pipeline.run(
    {
        "retriever": {"query": question},
        "prompt_builder": {"question": question},
    }
)

print(results["llm"]["replies"])
Enter fullscreen mode Exit fullscreen mode

The RAG pipelines have various components like Retriever, Prompt builder, LLM, etc,

If you want to know more, check out the documentation.

Haystack GIF

Star the Haystack repository ā­

7. ChromaDB: Database for AI apps

You will inevitably need a vector database if you build AI apps that rely on semantic retrieval. ChromaDB is one of the most used vector databases out there. They support indexing text and images.

They also have a hosted service if you do not want to host it yourself. Chroma runs as a server and provides 1st partyĀ PythonĀ andĀ JavaScript/TypeScriptĀ client SDKs

  1. Install ChromaDB 
yarn install chromadb chromadb-default-embed
Enter fullscreen mode Exit fullscreen mode

Install Chroma via pypi ****to run the backend server efficiently.

Run the Chroma backend:

chroma run --path ./getting-started
Enter fullscreen mode Exit fullscreen mode

Then, create a client that connects to it:

import { ChromaClient } from "chromadb";
const client = new ChromaClient();
Enter fullscreen mode Exit fullscreen mode

Create a collection#

Collections are where you'll store your embeddings, documents, and any additional metadata. You can create a collection with a name:

const collection = await client.createCollection({
  name: "my_collection",
});
Enter fullscreen mode Exit fullscreen mode

Add some text documents to the collection

Chroma will store your text and handle embedding and indexing automatically. You can also customize the embedding model.

await collection.add({
  documents: [
    "This is a document about pineapple",
    "This is a document about oranges",
  ],
  ids: ["id1", "id2"],
});
Enter fullscreen mode Exit fullscreen mode

Query the collection

You can query the collection with a list of query texts, and Chroma will return theĀ nĀ most similar results. It's that easy!

const results = await collection.query({
  queryTexts: "This is a query document about hawaii", // Chroma will embed this for you
  nResults: 2, // how many results to return
});
console.log(results);
Enter fullscreen mode Exit fullscreen mode

Read the documentation for more.

ChromaDB GIF

Star the ChromaDB repository ā­

8. Postiz: AI-powered social media tool

Building a SaaS app requires tremendous time, energy, and money and there is no point in using fancy technology if there are no users.

Postiz solves this; itā€™s an AI-powered tool that helps you reach potential users and clients, generate leads, and help you in your SaaS journey.

Key features include

  • Posting content on multiple social media at the same time.
  • Scheduling your content (time it) so you post it when people are online.
  • Get help from AI to generate content so you can create content faster.
  • If you are lazy, add your social media channels and let somebody else manage them.

Postiz GIF

Star the Postiz repository ā­

Thanks for reading the article.

In the comments below, let me know if other cool AI tools or frameworks have helped you build your application.

P.S.Ā Feel free toĀ follow me on X; I share valuable stuff - promise!

Image
Unblock Tamilrockers and Stream Movies Seamlessly

tamilrockersunblock, tamilrockers
Image
Laserlight power within the treatments for hemorrhoidal pathology: an assessment of books.
Image
Endoscopic endonasal surgery through COVID-19 widespread: Management guideline.
Image
Monokristallina Solceller: Fƶrdelar, Nackdelar och AnvƤndningsomrƄden
Image
Man islet To cellular material tend to be remarkably sensitive in order to preproinsulin in type 1 diabetes.
Image
Checking out Acted as well as Explicit Attitudes associated with Staff's Authentic Business Commitment.
Image
The actual lean meats twist: A case of item lean meats lobe torsion showing following gentle trauma.
Image
Unlock Your Potential with Stellar Escape Proxy

stellarescapeproxy
Image
Bring up to date upon Medicinal Routines, Stability, along with Pharmacokinetics associated with Rhein.
Image
Effect of your lysosomotropic agent chloroquine about mTORC1 activation along with protein activity in man bone muscle.
Image
Spatiotemporal adjustable selection as well as quality of air affect assessment regarding COVID-19 lockdown.
Image
Post-operative Correct Ventricular Disappointment Soon after Heart failure Surgical treatment: A Cohort Review.
Image
Molecular biomarkers added to image-enhanced endoscopic imaging: can they even more improve diagnostic precision?
Image
[The heart-friendly diet].
Image
Micellar electrokinetic chromatography inside the determination of triazoles inside fresh fruit remove.
Image
Updating MOERA Address for AD Connect Synchronized User in 2024

azure, entraid, activedirectory
Image
Need for Viscosity Control pertaining to Recyclable Reinforced Thermoplastic Composites.
Image
TNY255PN
Image
Setting Up a Proxy Server for iPhone Made Easy

proxyserverforiphone, proxyserver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .