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
@janhq/core
This module includes functions for communicating with core APIs, registering app extensions, and exporting type definitions.
Usage
Import the package
// Web / extension runtime
import * as core from '@janhq/core'
Build an Extension
-
Download an extension template, for example, https://github.com/janhq/extension-template.
-
Update the source code:
-
Open
index.tsin your code editor. -
Rename the extension class from
SampleExtensionto your preferred extension name. -
Import modules from the core package.
import * as core from '@janhq/core' -
In the
onLoad()method, add your code:// Example of listening to app events and providing customized inference logic: import * as core from '@janhq/core' export default class MyExtension extends BaseExtension { // On extension load onLoad() { core.events.on(MessageEvent.OnMessageSent, (data) => MyExtension.inference(data, this)) } // Customized inference logic private static inference(incomingMessage: MessageRequestData) { // Prepare customized message content const content: ThreadContent = { type: ContentType.Text, text: { value: "I'm Jan Assistant!", annotations: [], }, } // Modify message and send out const outGoingMessage: ThreadMessage = { ...incomingMessage, content, } } }
-
-
Build the extension:
- Navigate to the extension directory.
- Install dependencies.
yarn install - Compile the source code. The following command keeps running in the terminal and rebuilds the extension when you modify the source code.
yarn build - Select the generated .tgz from Jan > Settings > Extension > Manual Installation.