Skip to content

Commit

Permalink
Updated documentation to reflect changes in QvikChat v2
Browse files Browse the repository at this point in the history
  • Loading branch information
pranav-kural committed Aug 2, 2024
1 parent 4ef2494 commit 241e7f6
Show file tree
Hide file tree
Showing 8 changed files with 270 additions and 112 deletions.
80 changes: 80 additions & 0 deletions components/badges.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import Image from "next/image";
import Link from "next/link";

export const Badges = () => {
return (
<div className="flex flex-row gap-3 my-3">
<Link
href="https://github.com/oconva/qvikchat/actions/workflows/build.yml"
className="no-style-link"
title="Pre-deploy Workflow"
>
<Image
src="https://github.com/oconva/qvikchat/actions/workflows/build.yml/badge.svg"
alt="Pre-deploy Workflow"
priority={false}
width={200}
height={50}
/>
</Link>

<Link
href="https://github.com/oconva/qvikchat/actions/workflows/codeql.yml"
className="no-style-link"
title="CodeQL Scan"
>
<Image
src="https://github.com/oconva/qvikchat/actions/workflows/codeql.yml/badge.svg?branch=main"
alt="CodeQL Scan"
priority={false}
width={120}
height={50}
/>
</Link>

<Link
href="https://github.com/oconva/qvikchat/actions/workflows/dependency-review.yml"
className="no-style-link"
title="Dependency review"
>
<Image
src="https://github.com/oconva/qvikchat/actions/workflows/dependency-review.yml/badge.svg"
alt="Dependency review"
priority={false}
width={190}
height={50}
/>
</Link>

<Link
href="https://github.com/oconva/qvikchat/actions/workflows/publish-npm.yml"
className="no-style-link"
title="Publish package to NPM"
>
<Image
src="https://github.com/oconva/qvikchat/actions/workflows/publish-npm.yml/badge.svg?event=release"
alt="Publish package to NPM"
priority={false}
width={210}
height={50}
/>
</Link>

<Link
href="https://www.npmjs.com/package/@oconva/qvikchat"
className="no-style-link"
title="NPM version"
>
<Image
src="https://badge.fury.io/js/@oconva%2Fqvikchat.svg"
alt="NPM version"
priority={false}
width={130}
height={50}
/>
</Link>
</div>
);
};

export default Badges;
18 changes: 17 additions & 1 deletion next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,20 @@ const withNextra = require("nextra")({
themeConfig: "./theme.config.tsx",
});

module.exports = withNextra();
module.exports = withNextra({
images: {
dangerouslyAllowSVG: true,
contentDispositionType: "attachment",
contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
remotePatterns: [
{
protocol: "https",
hostname: "github.com",
},
{
protocol: "https",
hostname: "badge.fury.io",
},
],
},
});
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"lucide-react": "^0.399.0",
"next": "^13.0.6",
"next": "^14.2.5",
"nextra": "latest",
"nextra-theme-docs": "latest",
"react": "^18.2.0",
Expand Down
1 change: 1 addition & 0 deletions pages/_meta.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"index": "Introduction",
"getting-started": "Getting Started",
"core": "Core",
"chat-endpoints": "Chat Endpoints",
"chat-agent": {
"display": "hidden"
Expand Down
72 changes: 72 additions & 0 deletions pages/core.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
# Core

QvikChat allows you to conveniently build and deploy chat services. These chat services can be accessed through server endpoints that are defined using the QvikChat framework.

The typical workflow would look something like this:

1. **Define Endpoint Configurations:** Each chat service listens for incoming queries at a specific server endpoint. First step is to write the configurations for this chat endpoint. Through these configurations you can easily enable or disable features like chat history, cache, authentication, and RAG. You can also define the LLM model to be used for processing queries, besides other configurations.
2. **Configure and Run Server:** Once you have defined the chat endpoint configurations, you can use the `configureAndRunServer` method to start the server, passing a list of all endpoint configurations as an argument. Optionally, you can also provide configurations for the server (e.g. port number, cors, etc.), and the configurations for the Firebase Genkit (e.g. plugins you want to enable).

## Define Endpoint Configurations

To configure a chat endpoint, we need to provide an object with the configurations for the endpoint. These configurations include the endpoint name, the configurations for chat history, cache, RAG, and more. You can use the `ChatEndpointConfig` type provided by QvikChat to define these configurations.

Below is an example of how you can define the configurations for a chat endpoint that supports chat history, response caching, and Retrieval Augmented Generation (RAG). For more information and to see the full code, check the tutorial on building [Production-ready chatbot on your data in under 10 minutes using QvikChat](https://www.pkural.ca/blog/posts/qvikchat-rag-chatbot).

```typescript
import { ChatEndpointConfig } from "@oconva/qvikchat";
import { InMemoryChatHistoryStore } from "@oconva/qvikchat/history";
import { InMemoryCacheStore } from "@oconva/qvikchat/cache";

// Products chat endpoint configurations
const productsChatEndpointConfig: ChatEndpointConfig = {
endpoint: "products-chat",
enableChatHistory: true,
chatHistoryStore: new InMemoryChatHistoryStore(),
enableCache: true,
cacheStore: new InMemoryCacheStore({
cacheQueryAfterThreshold: 2, // cache response after same query is made 2 times
}),
enableRAG: true,
topic: "Adidas Products",
retrieverConfig: {
dataType: "csv",
filePath: "src/data/knowledge-bases/adidas-products-test-data.csv",
generateEmbeddings: true,
retrievalOptions: {
k: 15,
},
},
};
```

## Configure and Run Server

Once you have defined the chat endpoint configurations, you can use the `configureAndRunServer` method to start the server, passing a list of all endpoint configurations as an argument. Optionally, you can also provide configurations for the server (e.g. port number, cors, etc.), and the configurations for the Firebase Genkit (e.g. plugins you want to enable).

```typescript
import { configureAndRunServer } from "@oconva/qvikchat";

// Configure and run server
configureAndRunServer({
endpointConfigs: [ ... ], // List of all endpoint configurations
serverConfig: {
port: 3444
... // Other configurations for the server
},
genkitConfig: genkitConfig: {
plugins: [
... // setup genkit plugins
],
... // other configurations for Firebase Genkit
},
});
```

Under the hood, the `configureAndRunServer` method will create the chat endpoint using the provided configurations and then run the server.

It performs the following three steps in sequential order:

1. **Setup Genkit:** Setup Firebase Genkit, either by using the default configurations or by using the configurations provided through the `genkitConfig` parameter. You can use this parameter to enable additional Genkit plugins or to add a different LLM model.
2. **Define Chat Endpoints:** Define the chat endpoints using the configurations provided in the `endpointConfigs` parameter.
3. **Run the Server:** Once Firebase Genkit is setup and the chat endpoints are defined, start an Express.js server to serve the endpoints. Use the default configurations for the server (e.g., for port number, cors, and other options) unless specific configurations provided for the server through the `serverConfig` parameter.
32 changes: 14 additions & 18 deletions pages/getting-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,26 +43,23 @@ Alternatively, you can copy the `.env.tmp` file or rename it to `.env` and fill

To use QvikChat, the typical workflow would look something like this:

1. **Setup Genkit:** Before you can deploy your chat endpoints, you need to setup Firebase Genkit, either by using the default configurations or by providing your configurations, these may include additional Genkit plugins you may want to enable (e.g. to add support for a new language model). When starting, we recommend using the default configurations.
2. **Define Chat Endpoints:** You can define your chat endpoints using the `defineChatEndpoint` method. This method allows you to easily enable or disable features like chat history, cache, authentication, and RAG. All you have to do is provide the appropriate configurations as the argument.
3. **Run the Server:** Once you have Genkit setup and the chat endpoints defined, all that's left to be done is to start the server. You can use the `runServer` method to start an Expressjs server. You can optionally configure the port number, cors, and other options for the server by providing the configurations in an object.
1. **Define Endpoint Configurations:** Each chat service listens for incoming queries at a specific server endpoint. First step is to write the configurations for this chat endpoint. Through these configurations you can easily enable or disable features like chat history, cache, authentication, and RAG. You can also define the LLM model to be used for processing queries, besides other configurations.
2. **Configure and Run Server:** Once you have defined the chat endpoint configurations, you can use the `configureAndRunServer` method to start the server, passing a list of all endpoint configurations as an argument. Optionally, you can also provide configurations for the server (e.g. port number, cors, etc.), and the configurations for the Firebase Genkit (e.g. plugins you want to enable).

The below code shows a simple example of defining an open-ended chat endpoint in QvikChat. An open-ended chat endpoint basically allows queries related to any topic, i.e., it doesn't place any restrictions on what context the queries should be related to.

```typescript copy filename="index.ts"
import { runServer, setupGenkit } from "@oconva/qvikchat/genkit";
import { defineChatEndpoint } from "@oconva/qvikchat/endpoints";
import { configureAndRunServer, ChatEndpointConfig } from "@oconva/qvikchat";

// Setup Genkit
setupGenkit();

// Open-ended chat
defineChatEndpoint({
// Configurations for an open-ended chat endpoint
const endpointConfig: ChatEndpointConfig = {
endpoint: "chat",
});
};

// Run server
runServer();
// Configure and run the server
configureAndRunServer({
endpointConfigs: [endpointConfig],
});
```

Running the above code will run a [Express](https://expressjs.com) server with your defined chat endpoint accessible through it.
Expand Down Expand Up @@ -108,9 +105,8 @@ OPENAI_API_KEY=

To use QvikChat, the typical workflow would look something like this:

1. **Setup Genkit:** Before you can deploy your chat endpoints, you need to setup Firebase Genkit, either by using the default configurations or by providing your configurations, these may include additional Genkit plugins you may want to enable (e.g. to add support for a new language model). When starting, we recommend using the default configurations.
2. **Define Chat Endpoints:** You can define your chat endpoints using the `defineChatEndpoint` method. This method allows you to easily enable or disable features like chat history, cache, authentication, and RAG. All you have to do is provide the appropriate configurations as the argument.
3. **Run the Server:** Once you have Genkit setup and the chat endpoints defined, all that's left to be done is to start the server. You can use the `runServer` method to start an Expressjs server. You can optionally configure the port number, cors, and other options for the server by providing the configurations in an object.
1. **Define Endpoint Configurations:** Each chat service listens for incoming queries at a specific server endpoint. First step is to write the configurations for this chat endpoint. Through these configurations you can easily enable or disable features like chat history, cache, authentication, and RAG. You can also define the LLM model to be used for processing queries, besides other configurations.
2. **Configure and Run Server:** Once you have defined the chat endpoint configurations, you can use the `configureAndRunServer` method to start the server, passing a list of all endpoint configurations as an argument. Optionally, you can also provide configurations for the server (e.g. port number, cors, etc.), and the configurations for the Firebase Genkit (e.g. plugins you want to enable).

### Running the Project

Expand Down Expand Up @@ -200,6 +196,6 @@ curl -X POST "http://127.0.0.1:3400/chat" -H "Content-Type: application/json" -

Each chat service is defined by defining a chat endpoint. The chat endpoint that you define, is the code that gets called when a new request is received at that endpoint. You can define multiple chat services, each with its own endpoint. Each chat endpoint can have various attributes like input data schema, LLM model to be used for processing queries, authentication policy, etc., and you can define these properties and the code that gets executed within an endpoint when defining a chat endpoint.

QvikChat provides you with an easy way to define these chat endpoints _qvikly_ using the **`defineChatEndpoint`** function. This is the real superpower of QvikChat. You can define a chat endpoint with support for chat history, authentication and response caching in just a few lines of code.
QvikChat provides you with an extremely easy, flexible, and dynamic way to create server chat endpoints by simply using configurations. This is the real superpower of QvikChat. You can define a chat endpoint with support for chat history, authentication and response caching in just a few lines of code. You can even store these configurations remotely and load them dynamically at runtime.

To learn more about different chat endpoints that you can define, check the [Chat Endpoints](/chat-endpoints) section.
You can also use the `defineChatEndpoint` method to manually define a chat endpoint. Under the hood, this is the method that gets called when you provide the list of endpoint configurations to the `configureAndRunServer` method. To learn more about `defineChatEndpoint` method and the different chat endpoints that you can define, check the [Chat Endpoints](/chat-endpoints) section.
5 changes: 3 additions & 2 deletions pages/index.mdx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { ChevronRight } from "lucide-react";
import { SponsorBtn } from "../components/sponsor-btn";
import { Button } from "../components/ui/button";
import { Notice } from "../components/notice";
import Img from "../components/img";
import { ChevronRight } from "lucide-react";
import Badges from "../components/badges";
import Link from "next/link";

<div className="text-3xl font-bold mt-5">QvikChat</div>
Expand All @@ -14,7 +15,7 @@ import Link from "next/link";
Built on top of Firebase Genkit + LangChain. Power of both, simplicity of one.
</div>

Develop a self-hosted production-ready AI-powered chat app or service at a rapic pace with this powerful [Firebase Genkit](https://github.com/firebase/genkit) and [LangChain](https://js.langchain.com/v0.2/docs/introduction/) based framework.
Develop a self-hosted production-ready AI-powered chat app or service at a rapid pace with this powerful [Firebase Genkit](https://github.com/firebase/genkit) and [LangChain](https://js.langchain.com/v0.2/docs/introduction/) based framework.

**QvikChat** is a framework that provides you with a solid foundation to build powerful AI-powered chat service endpoints quickly and efficiently. It includes support for **multiple types of conversations (open-ended, close-ended)**, **chat history**, **response caching**, **authentication**, and **information retrieval using Retrieval Augmented Generation (RAG).**

Expand Down
Loading

0 comments on commit 241e7f6

Please sign in to comment.