@sib-swiss/chat-with-context v0.0.16
š¬ 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/chat-with-context.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-contextAnd import in your JS/TS file with:
import "@sib-swiss/chat-with-context"; import "@sib-swiss/chat-with-context/dist/chat-with-context.css";Use the custom element in your HTML/JSX/TSX code:
<chat-with-context chat-endpoint="http://localhost:8000/chat" feedback-endpoint="http://localhost:8000/feedback" api-key="public_apikey_used_by_frontend_to_prevent_abuse_from_robots" examples="Which resources are available at the SIB?,How can I get the HGNC symbol for the protein P68871?,What are the rat orthologs of the human TP53?,Where is expressed the gene ACE2 in human?,Anatomical entities where the INS zebrafish gene is expressed and its gene GO annotations,List the genes in primates orthologous to genes expressed in the fruit fly eye" ></chat-with-context>
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
chat-endpoint="http://localhost:8000/chat"
feedback-endpoint="http://localhost:8000/feedback"
api-key="public_apikey_used_by_frontend_to_prevent_abuse_from_robots"
examples="Which resources are available at the SIB?,How can I get the HGNC symbol for the protein P68871?,What are the rat orthologs of the human TP53?,Where is expressed the gene ACE2 in human?,Anatomical entities where the INS zebrafish gene is expressed and its gene GO annotations,List the genes in primates orthologous to genes expressed in the fruit fly eye"
></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 iStart in dev:
npm run devBuild package:
npm run buildBuild demo website (used by the python API):
npm run build:demoFormat and lint:
npm run fmt
npm run lintPublish new version:
npm version patch