* chore: initial new FE setup * chore: update namespace text-left-panel foreground variable * chore: enable dynamic mainview color * chore: remove greetings new chat * chore: fix chat input style * chore: simplify hook useAppearance * chore: enable internationalization * chore: prepare vn locale * chore: keyboardshortcut layout * chore: update keyboard shortcut exclude pathname * chore: update state active setting route * chore: fix update theme by system * chore: handle dynamic primary color * chore: fix left panel navigation active state and styled item privacy analytic * chore: reorder general setting being a first * chore: add function reset appearance * chore: update scrollbar * chore: update delete thread with dialog confirmation * chore: update state dialog inside dropdown menu * chore: wip thread detail or chat page * chore: wip model dropdown * chore: prepare model dropdown select * chore: update model providers setting * chore: show provider on model dropdown based isActive toogle * chore: update layout model provider * chore: update state active on storage * chore: update gap of item dropdown model * chore: update select model base on id * chore: update edit model capabilities * chore: add dialog to add model * chore: update sheet for model setting * chore: add sheet setting each model * chore: make dynamic syntax highlight * chore: fix menu setting appearance theme * chore: markdown render support emoji * chore: markdown support latex * chore: change codeblock default theme * chore: update ui codeblock * chore: custom render link taget new window * chore: fix copy button codeblock * chore: update accent and desctructive color * chore: setup user chat message * chore: prepare some page settings * chore: simple list extension and prepare mcp, local api, and hardware * chore: mcp-serve * chore: MCP server UI * chore: update local api server config * chore: adjust chat input * chore: update local api server log * chore: prepare hub page * chore: remove help page * chore: update mock * chore: prepare http proxy setting UI * chore: adjust local api server and title every action * fix: chore FE package (#4962) * fix: update command which referred to non-existent web app * fix: added commented out macos platform for now * fix: remove the platform name as macos * fix: remove unnecessary line for platform name in HeaderPage component * fix: update dev script to specify port 3000 for Vite * feat: model providers and chat completion * enhancement: threads performance * fix: thread content update * chore: clean up threads * fix: performance issue with streaming and state loop * fix: streaming * fix: react markdow * feat: extension manager * chore: add nodePolyfills include path * chore: improve performance avoid unhandle rejection * chore: update pre margin bottom * chore: swith thread should be deafult scroll to bottom * chore: wip scroll to bottom * chore: add model loader * chore: add platform utils * feat: threads functionality * chore: setup toaster * chore: persist threads deletion * fix: create thread with new message * chore: create new thread should change route path * chore: navigate after delet dialog thread * chore: thread favorites and orders * chore: dismiss deleting modal on delete * chore: remove undefined properties * chore: remove deprecated run step * chore: fix delete thread * chore: create empty thread content on started streaming * chore: correct messages store key * chore: stuck at generating state * chore: preapre chat toolbar * chore: introduce in-memory app state * chore: update extensions migration logic * chore: remove redundant extensions migration gate * chore: message toolbar user and assistant * chore: add logo gemini * feat: remote providers with model capabilities * chore: maintain provider settings * chore: move speed token into chat input * chore: temp harcoded model loader * chore: make chat text selectable and truncate model list * chore: update shortcut UI * Feat/implement threads (#4977) * chore: add fuse.js library for enhanced search functionality * feat: implement thread filtering with Fuse.js for improved search capabilities * fix: update the fuseOptions * feat: add search functionality to LeftPanel and refactor thread retrieval logic * refactor: optimize thread filtering and improve search functionality in LeftPanel * fix: more edits * refactor: remove duplicate import of useAppState in StreamingContent component * chore: update navigate after delete all thread * chore: pass prop speedToken from new chat input * chore: persist provider general settings * chore: styling search left panel * chore: cleanup margin * chore: update size icon * chore: improve chat input * chore: imprve list markdown * chore: animate border * feat: local model provider work * chore: persist manually added model * chore: prepare download management ui and show version on general setting * chore: improve pre tag * chore: remove buton install extension and improve light theme download * chore: add missing hardware information handler * chore: cleanup small ui * chore: update default provider settings * fix: missing fs commands * chore: correct provider models * chore: prepare delete model * chore: handle thinking block * chore: fix conditional message toolbar * chore: pophover download select none * enhancement: add prune mode * chore: model settings * chore: bump engine version tauri * chore: update style thinking * chore: add indicator and toogle mcp server * chore: wip hub * chore: update model settings * chore: mvp hub * chore: add function rename title * chore: update function delete message * chore: update rename title * chore: update model settings * chore: persist MCP configs * refactor: clean up utils * chore: add tools to completion request * chore: clean up * chore: ignore assets --------- Co-authored-by: Ivan Leo <ivanleomk@gmail.com> Co-authored-by: Louis <louis@jan.ai>
Create a Jan Extension using Typescript
Use this template to bootstrap the creation of a TypeScript Jan extension. 🚀
Create Your Own Extension
To create your own extension, you can use this repository as a template! Just follow the below instructions:
- Click the Use this template button at the top of the repository
- Select Create a new repository
- Select an owner and name for your new repository
- Click Create repository
- Clone your new repository
Initial Setup
After you've cloned the repository to your local machine or codespace, you'll need to perform some initial setup steps before you can develop your extension.
Note
You'll need to have a reasonably modern version of Node.js handy. If you are using a version manager like
nodenvornvm, you can runnodenv installin the root of your repository to install the version specified inpackage.json. Otherwise, 20.x or later should work!
-
🛠️ Install the dependencies
npm install -
🏗️ Package the TypeScript for distribution
npm run bundle -
✅ Check your artifact
There will be a tgz file in your extension directory now
Update the Extension Metadata
The package.json file defines metadata about your extension, such as
extension name, main entry, description and version.
When you copy this repository, update package.json with the name, description for your extension.
Update the Extension Code
The src/ directory is the heart of your extension! This contains the
source code that will be run when your extension functions are invoked. You can replace the
contents of this directory with your own code.
There are a few things to keep in mind when writing your extension code:
-
Most Jan Extension functions are processed asynchronously. In
index.ts, you will see that the extension function will return aPromise<any>.import { events, MessageEvent, MessageRequest } from '@janhq/core' function onStart(): Promise<any> { return events.on(MessageEvent.OnMessageSent, (data: MessageRequest) => this.inference(data) ) }For more information about the Jan Extension Core module, see the documentation.
So, what are you waiting for? Go ahead and start customizing your extension!