@sib-swiss/chat-with-context

v0.0.9

Published

4 days ago

A web component to easily deploy a chat with context.

Downloads

585

0High
0Medium
0Low

it_support_sib_swiss

vemonet

chat chatbot LLM RAG

💬 Chat with context web component

A web component to easily deploy an interface for a chat with context. It is the frontend for the chat API built at github.com/sib-swiss/sparql-llm. It provides a user-friendly chat interface with additional features to inspect the context used by the LLM to generate the response.

👆️ You can try it for a few SPARQL endpoints of the SIB, such as UniProt and Bgee, at chat.expasy.org

🚀 Use

Import from a CDN:

<script type="module" src="https://unpkg.com/@sib-swiss/chat-with-context"></script>
<link href="https://unpkg.com/@sib-swiss/chat-with-context/dist/style.css" rel="stylesheet" />

Or install with a package manager in your project:

npm install --save @sib-swiss/chat-with-context
# or
pnpm add @sib-swiss/chat-with-context

Use the custom element in your HTML/JSX/TSX code:

<chat-with-context api="http://localhost:8000/"></chat-with-context>

[!WARNING]
It uses TailwindCSS for styling

📝 Basic example

No need for a complex project you can integrate SPARQL editor in any HTML page by importing from a CDN!

Create a index.html file with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SPARQL editor dev</title>
    <meta name="description" content="SPARQL editor demo page" />
    <link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/f/f3/Rdf_logo.svg" />
    <!-- Import the module from a CDN -->
    <script type="module" src="https://unpkg.com/@sib-swiss/chat-with-context"></script>
  </head>

  <body>
    <div>
      <chat-with-context api="http://localhost:8000/"></chat-with-context>
    </div>
  </body>
</html>

Then just open this HTML page in your favorite browser.

You can also start a basic web server with NodeJS or Python:

npx http-server
# or
python -m http.server

🧑‍💻 Development

Install:

npm i

Start in dev:

npm run dev

Build package:

npm run build

Build demo website (used by the python API):

npm run build:demo

Format and lint:

npm run fmt
npm run lint

Publish new version:

npm version patch

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

💬 Chat with context web component

🚀 Use

📝 Basic example

🧑‍💻 Development