agentic-stack-js-web-components

v1.2.13

Published

4 months ago

Reusable web components for building agentic apps

Downloads

0High
0Medium
0Low

devagenticstackjs!

web-components custom-elements mediapipe ai on the edge agentic stack js

Agentic Stack JS Web Components

This is a set of web components for building agentic apps. More on the way. The first version includes a simple chatbot.

I am inspired by AI on the edge specifically by the MediaPipe Solutions Project by Google. I figure I can simplify the setup of MediaPipe on the web with web components. If you want to work with small models in the browser. This is the package for you! More components on the way. For now try out the chatbot and text embedding components.

Prerequisite

read up on Google on the Edge

https://ai.google.dev/edge

https://ai.google.dev/edge/mediapipe/solutions/guide

https://ai.google.dev/edge/mediapipe/solutions/setup_web

https://developers.googleblog.com/en/mediapipe-on-the-web/

download the Gemma model

https://www.kaggle.com/models/google/gemma-2/tfLite/gemma2-2b-it-gpu-int8

store this somewhere you can source it on your computer or and server.

Getting started

NPM install

npm i agentic-stack-js-web-components

Add script module to html index

<script 
    type="module" 
    src="../node_modules/agentic-stack-js-web-components/dist/agenticstack.js">
</script>

Chatbot Example

<asjs-chatbot 
        model-asset-path="/assets/mediapipemodels/gemma2-2b-it-gpu-int8.bin"
        max-tokens="8192"
        random-seed="1"
        top-k="1"
        temperature="1.0">
</asjs-chatbot>

Text Embedding Example

<asjs-embedding
        show-ui
        quantize="true"
        model-asset-path="/assets/mediapipemodels/universal_sentence_encoder.tflite">
</asjs-embedding>

Text Classification Example

<html>
<body>
<asjs-text-classification
    show-ui
    asjs-event="your-custom-event-name-model-ready"
    model-asset-path="/assets/mediapipe-tasks/text_classifier/bert_text_classifier.tflite"
    display-names-local="en"
    max-results="5"
    categoryAllowList=""
    categoryDenyList=""
    score-threshold=""
    >
</asjs-text-classification>

<script>
    document.addEventListener('your-custom-event-name-model-ready', (e) => {
        /// you can add an event listener to handle the init state of the text model. When the text model is done loading.  This event will get called.

        // Also, if you don't need the UI, you can use this event handler to execute the textClassify function. 
    }, true);

</script>
</body>
</html>

Vector Search Example

the web component asjs-embedding will be imported. set the model-assest-path to the embedding model.
download the embedding model: https://ai.google.dev/edge/mediapipe/solutions/text/text_embedder/index#models

⚠️ Notes

Document must include text property.
vector field is automatically created.
To update an entry, provide an id.
query() and insert() should only be called after the model is ready.

<html>
<body>
    <asjs-vector-search
        show-ui
        form="mustang-form"
        model-asset-path="/path/to/universal_sentence_encoder.tflite"></asjs-vector-search>
</body>
</html>

// from your JS file
const comp = document.querySelector('asjs-vector-search');

comp.addEventListener('embedding-ready', async () => {
  // the text property is required and vector is a reserved property.
  await comp.insert({ text: 'Sample doc' });
  let results = await comp.query('Sample');
  // this returns the document id
  console.log(results);
});

Estimates generated by chatgpt

| Documents (N) | Embedding Time (ms) | Cosine Similarity Time (ms) | Sorting Time (ms) | Total Estimated Latency (ms) | | ------------- | ------------------- | --------------------------- | ----------------- | -------------------------------- | | 100 | ~10 | ~10 | ~1 | ~21 ms | | 500 | ~10 | ~50 | ~5 | ~65 ms | | 1,000 | ~10 | ~100 | ~10 | ~120 ms | | 5,000 | ~10 | ~500 | ~50 | ~560 ms | | 10,000 | ~10 | ~1,000 | ~100 | ~1,110 ms | | 50,000 | ~10 | ~5,000 | ~500 | ~5,510 ms | | 100,000 | ~10 | ~10,000 | ~1,000 | ~11,010 ms (≈11 sec) |

Docs are here : https://medium.com/@agenticstackjs/asjs-vector-search-web-component-02978afb7ea4

Run your server

Since I use web standards this should work with any backend server you have setup. Take a look at the index.html for some code samples. agenticstack.js assumes mediapipe is served from the url path /@mediapipe/

Documentation & Code examples

visit the website --> medium blog https://agenticstackjs.com/

Contact the developer:

[email protected]

Release Notes:

v1.0.7 - Jul 14 25

asjs-embedding component : this is a new component based on the @mediapipe/tasks-text module. This includes class methods to create text embeddings and a consineSimilarity calculation. If the attribute show-ui="true" you can use the consine Sim form.
asjs-chabot is now a module export. This will allow you to extends the chatbot class for custom develpment. The same is true for the text embedding component.

import { ASJSChatbot } from '<path to asjs chatbot js file>'
class YourChatbot extends ASJSChatbot {
   constructor(){
       super();
   }
}
window.customElements.define('your-chatbot', YourChatbot);

v1.0.8 - Jul 16 25

asjs-chatbot bug fix. The model config form will be disabled until the model is ready or done responding.
asjs-chatbot bug fix. the renderMsg method will now set innerText instead of innerHTML. For more advaced features like markdown etc. Create your own web component by extending the ASJSChatbot class and override the renderMsg function. Take a look our website for an example.
asjs-chatbot cleanup. I removed the modelAssetBuffer condition. ModelAssetPath is the best option. It works great when i used a huggingface model resolve url path.

v1.0.9 - Jul 23 25

asjs-embedding bug fix. This class was missing the export keyword. Now you can import this as a module.
asjs-text-classification web component. This is a new web component to classify text nodes. Which is an abstraction of this: https://ai.google.dev/edge/mediapipe/solutions/text/text_classifier/web_js
asjs-event attribute / property. set this value on the component and add an eventListener in your App's Scope class. When the text model is ready. The component will dispatch the event.
asjs-text-classification. I added form internals to this comp. the form value will return a JSON string. Set the show-ui attribute to false or don't set it at all. Include the form, id and name attributes to utilize it as a form element. Now you can use the FormData Api to get the calculation as a form value.
const your_form_data = new FormData(yourFormElem);
Notice. I changed the license to Apache-2.0 this will align with the Mediapipe dependencies.

v1.1.10 - Aug 14 25

asjs-embedding bug fix. console log, spelling clean up and added useCapture to the asjs eventListener.
agenticstack.js base class. I added some common getters and setters to the class.
minor increase to one because of the vector seach web component. introducing asjs-vector-search. Docs are here : https://medium.com/@agenticstackjs/asjs-vector-search-web-component-02978afb7ea4
asjs-vector-search. the query function is a brute force search algo in the indexdb cursor. Which is not ideal for large dataset greater then a

v1.2.11 - Aug 17 25

the Minor change is for a the ASJSChatHistory class. This will allow for multi-turn conversation with in the ASJSChatbot.
I added a ask method to the ASJSChatbot. This is a simple Q and A with no history, but does allow for a context prompt. This will return a promise as a answer.

chatbot.ask(question, context).then( (answer) => {
   // do somthing with the answer
});

I added the prompt structure to the chat history class: https://ai.google.dev/gemma/docs/core/prompt-structure this is required for multi-turn conversation.
the Patch increase if for some clean up and bug fixes in the ASJSChatbot. The displayResponse will update the innerText to allow for some minor styles.

v1.2.12 - Aug 17 25

added the import of the chat history class. Now it is in the bundle.

v1.2.13 - Aug 20 25

asjs general clean up removed logs and added missing semicolons.
asjs-chatbot bug fixes for attribute changes "random-seed", "top-k" and "temperature"
asjs-chatbot improved the display partial results function.
asjs-chatbot imporved the threadID function.
asjs-chathistory added auto-trim to remove the oldest thread id from the chat history.