agentic-stack-js-web-components

v2.0.0

Published

4 days ago

Reusable web components for building agentic apps

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 on the edge.

(note: web only, not for mobile devices)

Prerequisite

read up on Google on the Edge (Web Only!)

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 4 model

(*note: gemma less then four is not supported)

The gemma 4 prompt structure has changed from gemma 3 and 2. ASJS v2 is a breaking change. learn more about gemma 4 - prompt structure

download at huggingface gemma 4 2B

store this somewhere on your computer where you can source it as a the model-asset-path

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
        id="your-chatbot-id"
        model-asset-path="/your-assets/mediapipemodels/gemma-4-E2B-it-web.task"
        display-partial-results
        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 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.

v1.2.14 - March 19 26

took a break, back at it. again.
asjs general clean up removed logs and added missing semicolons.
added llm file selection in the config form for the chatbot class
added toolbox and base tool class.
added rough draft system tool - web search @web
- the web search tool is just an example of how the dataflow will work.
the toolbox is decoupled from the chatbot. There is a input and output(displayResults) to use when calling tools
other system tools under develpoment: @web, @mem, @graph, @api, @db
- I will focus on these five system tools, with a plan to use the concept of skills to trigger the tools within a task and/or workflows (worker).
updated the website to host the docs. Custom Elements Manifest www.agenticstackjs.com

v1.2.15 - April 2 26

chatbot ui cleanup - context textarea disabled after config submit
updated @mediapipe/tasks-genai v0.10.27 to confirm the chatbot works with gemma 4 E2B && E4B-it.web.task
updated the @web tool to include a user-agent in the header. This is required by wikipedia api
try out the tool by using the @web tag in the prompt input field e.g. "@web Who is the owner of the LA Dodgers"
updated toolbox to show the Toolbox Agent - Output logs (open the toolbox details to see the logs)
updated ASJS api docs www.agenticstackjs.com

v1.2.16 - April 3 26

bug fix in asjs-chatbot (scrollToBottom could not get element by Id)
added the asjs source files to https://agenticstackjs.com/ for the demo option.

v2.0.0 - April 6 26

!!!breaking change!!! - personal decision I updated the chat_history component to support gemma 4 prompt structure.
bug fixes - generate a uuid for chatbot ID if ID not set in attribute.
chathistory component - now supports gemma 4 promt-structure, breaking change from gemma 3 and 2.

  gemma 2 & 3 prompt structure
  <start_turn>user...<end_turn>

  gemma 4 prompt structure
  <|turn>user...<turn|>

tool - web search bug fixes and improvements.
tool - web search will have access to the chatbots model via ask(question, context, system_prompt) method

chatbot - add the boolean attr toolbox to your chatbot element to add the tool example:


<asjs-chatbot 
    toolbox
    display-partial-results
    model-asset-path="/path/to/model" >
</asjs-chatbot>

@web is the tag to call the web search tool
```
  // input field value 

  "@web history of the Los Angeles Dodgers"
```
the web search tool will call wikipedia with asjs-agent in the header.