Implement a comprehensive artifacts system that allows users to create, edit, and manage persistent documents alongside conversations, inspired by Claude's artifacts feature. Key Features: - AI model integration with system prompts teaching artifact usage - Inline preview cards in chat messages with collapsible previews - On-demand side panel overlay (replaces split view) - Preview/Code toggle for rendered markdown vs raw content - Artifacts sidebar for managing multiple artifacts per thread - Monaco editor integration for code artifacts - Autosave with debounced writes and conflict detection - Diff preview system for proposed updates - Keyboard shortcuts and quick switcher - Export/import functionality Backend (Rust): - New artifacts module in src-tauri/src/core/artifacts/ - 12 Tauri commands for CRUD, proposals, and export/import - Atomic file writes with SHA256 hashing - Sharded history storage with pruning policy - Path traversal validation and UTF-8 enforcement Frontend (TypeScript/React): - ArtifactSidePanel: Claude-style overlay panel from right - InlineArtifactCard: Preview cards embedded in chat - ArtifactsSidebar: Floating list for artifact switching - Enhanced ArtifactActionMessage: Parses AI metadata from content - useArtifacts: Zustand store with autosave and conflict resolution Types: - Extended ThreadMessage.metadata with ArtifactAction - ProposedContentRef supports inline and temp storage - MIME-like content_type values for extensibility Platform: - Fixed platform detection to check window.__TAURI__ - Web service stubs for browser mode compatibility - Updated assistant system prompts in both extension and web-app This implements the complete workflow studied from Claude: 1. AI only creates artifacts when explicitly requested 2. Inline cards appear in chat with preview buttons 3. Side panel opens on demand, not automatic split 4. Users can toggle Preview/Code views and edit content 5. Autosave and version management prevent data loss
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!