npm - create-kai - Versions diffs - 0.1.0 - Mend

create-kai 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (176) hide show

package/dist/templates/tanstack-start/tsconfig.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node"],
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/dist/templates/tanstack-start/vite.config.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+import viteReact from '@vitejs/plugin-react';
+// https://tanstack.com/start/latest — TanStack Start is a full-stack React
+// framework: every route is server-rendered, then hydrated on the client.
+//
+// `@kitn.ai/ui` is built with SolidJS but ships framework-agnostic custom
+// elements. `@kitn.ai/ui/react` provides typed React wrappers that register the
+// elements **client-only** (inside a layout effect) and assign array/object
+// props as live DOM *properties*. SSR emits the bare `<kai-*>` tags; the client
+// hydrates, registers and populates them — no work needed on the server.
+//
+// This is the standard TanStack Start config: the Start plugin first, then
+// React's. The kit needs no special handling — leaving `@kitn.ai/ui` external to
+// the SSR build (the Vite default) is correct, because the per-element
+// registration imports only run in the browser, so the server just renders the
+// bare tags.
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    // TanStack Start's plugin MUST come before React's.
+    tanstackStart(),
+    viteReact(),
+  ],
+});

package/dist/templates/vanilla/_gitignore ADDED Viewed

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.env
+.env.local
+*.log
+.DS_Store

package/dist/templates/vanilla/index.html ADDED Viewed

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@kitn.ai/ui vanilla example</title>
+    <style>
+      * { box-sizing: border-box; margin: 0; padding: 0; }
+      html, body, #app { height: 100%; }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/dist/templates/vanilla/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "@kitn.ai/ui-example-vanilla",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@kitn.ai/ui": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/dist/templates/vanilla/src/chat-data.ts ADDED Viewed

@@ -0,0 +1,106 @@
+// Self-contained sample data + the kit's shared mock responder, no backend.
+import type { MessagePart } from '@kitn.ai/ui';
+import { createMockResponder } from '@kitn.ai/ui/state';
+export interface Conversation {
+  id: string;
+  title: string;
+  scope: { type: 'document' | 'collection' };
+  messageCount: number;
+  lastMessageAt: string;
+  updatedAt: string;
+}
+export interface Msg {
+  id: string;
+  role: 'user' | 'assistant';
+  parts: MessagePart[];
+}
+export function newId(): string {
+  return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+    ? crypto.randomUUID()
+    : 'id-' + Math.random().toString(36).slice(2);
+}
+const iso = (daysAgo = 0) => new Date(Date.now() - daysAgo * 86_400_000).toISOString();
+export const CONVERSATIONS: Conversation[] = [
+  { id: 'c1', title: 'Getting started', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(0), updatedAt: iso(0) },
+  { id: 'c2', title: 'Composing your own chat', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(0), updatedAt: iso(0) },
+  { id: 'c3', title: 'Theming + dark mode', scope: { type: 'collection' }, messageCount: 2, lastMessageAt: iso(1), updatedAt: iso(1) },
+];
+export const THREADS: Record<string, Msg[]> = {
+  c1: [
+    { id: 'c1u', role: 'user', parts: [{ type: 'text', text: 'What is @kitn.ai/ui?' }] },
+    { id: 'c1a', role: 'assistant', parts: [{ type: 'text', text: '**@kitn.ai/ui** is a set of framework-agnostic web components for AI chat UIs: message threads, streaming, markdown, tool panels, and more. This demo composes its `<kai-conversations>`, `<kai-thread>`, and `<kai-prompt-input>` elements by hand.' }] },
+  ],
+  c2: [
+    { id: 'c2u', role: 'user', parts: [{ type: 'text', text: 'How do I build my own chat instead of dropping in `<kai-chat>`?' }] },
+    { id: 'c2a', role: 'assistant', parts: [{ type: 'text', text: "Feed your `messages` to a `<kai-thread>`, put a `<kai-prompt-input>` below, and wire `kai-submit` to append + stream. That's exactly what this example does. Read `main.ts`." }] },
+  ],
+  c3: [
+    { id: 'c3u', role: 'user', parts: [{ type: 'text', text: 'How does dark mode work?' }] },
+    { id: 'c3a', role: 'assistant', parts: [{ type: 'text', text: "Each element takes a `theme` prop (`light` / `dark` / `auto`). Drive it from app state. Toggle it with the button top-right. The kit's `--color-*` tokens flip under a `.dark` class for your own surrounding chrome." }] },
+  ],
+};
+export const SUGGESTIONS = ['What is @kitn.ai/ui?', 'How do I install it?', 'Show me some markdown'];
+// Rich entity triggers for the prompt input: typing `/` opens the skills menu,
+// `@` opens the agents menu. Each selection inserts an atomic pill. Set on
+// <kai-prompt-input> as the `triggers` JS property (a TriggerDef[]).
+export const TRIGGERS = [
+  {
+    char: '/',
+    kind: 'skill',
+    items: [
+      { id: 'summarize', label: 'Summarize', description: 'Summarize the thread', promptText: 'Summarize the thread.' },
+      { id: 'translate', label: 'Translate', description: 'Translate to English', promptText: 'Translate to English.' },
+      { id: 'rewrite', label: 'Rewrite', description: 'Rewrite for clarity', promptText: 'Rewrite this for clarity.' },
+    ],
+  },
+  {
+    char: '@',
+    kind: 'agent',
+    items: [
+      { id: 'researcher', label: 'Researcher', description: 'Deep web research', group: 'Agents' },
+      { id: 'coder', label: 'Coder', description: 'Writes and edits code', group: 'Agents' },
+      { id: 'designer', label: 'Designer', description: 'UI and visual design', group: 'Agents' },
+    ],
+  },
+];
+// The replies the mock cycles through, one per turn. Markdown-rich on purpose:
+// the thread renders markdown, code blocks and blockquotes, so the canned
+// replies exercise that instead of only proving text arrives.
+//
+// The first one says it is a mock in words. That is the WEAKEST of the
+// responder's tells and the only one a real model could imitate, which is
+// exactly why it is not the only one — the rest are on the wire, below.
+const MOCK_REPLIES = [
+  "This reply streams token-by-token from the kit's own mock responder. No API key, no backend, no provider was contacted. Replace `mockResponse(text)` with a real model call (Anthropic, OpenAI, your own endpoint) to ship a real app.",
+  "Install it:\n\n```bash\nnpm install @kitn.ai/ui\n```\n\nThen register the elements + load the tokens:\n\n```ts\nimport '@kitn.ai/ui/elements';\nimport '@kitn.ai/ui/theme.tokens.css';\n```\n\nNow drop `<kai-thread>` and `<kai-prompt-input>` into your template.",
+  "I render **bold**, *italic*, `inline code`, lists, and code blocks:\n\n```ts\nconst stream = store.streamAssistant();\nawait readOpenAIStream(mockResponse(text), stream);\nstream.done();\n```\n\n> Blockquotes too.",
+  "This chat is **composed by hand**: `<kai-conversations>` for the sidebar, a `<kai-thread>` for the messages, and `<kai-prompt-input>` at the bottom, all wired with plain reactive state. Swap `mockResponse(text)` for your own model call and you're shipping.",
+];
+/**
+ * The kit's own mock responder, shared with the `kai` MCP scaffolder and
+ * `create-kai` so there is ONE implementation of this and not seven.
+ *
+ * It yields canned SSE frames in the OpenAI chat-completions shape, which
+ * `readOpenAIStream` parses exactly as it parses a real provider's. So this
+ * no-backend preview runs the kit's REAL streaming path — the SSE reader, the
+ * part folding, all of it — rather than a hand-rolled loop that merely
+ * resembles it. Going live then changes one expression, not the handler.
+ *
+ * It also cannot be mistaken for a real turn: the stream opens with a
+ * `: kai-mock` SSE comment, every frame carries a `_kai_mock` field, `model`
+ * reports as `kai-mock` (no provider serves that, so an echoed mock frame is
+ * rejected upstream rather than quietly believed), and usage is all zeros.
+ *
+ * MODULE scope, not per-send: the responder owns the cursor into the replies
+ * above, so rebuilding it each turn would answer with the first one forever.
+ */
+export const mockResponse = createMockResponder({ replies: MOCK_REPLIES });

package/dist/templates/vanilla/src/index.css ADDED Viewed

@@ -0,0 +1,111 @@
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+/* Full-height workspace shell. Colors come from the kit's --color-* tokens, which
+   flip to dark under the `.dark` class we toggle on `.app`. <kai-resizable> fills
+   this box (its `:host` is `height:100%`) and owns the sidebar | main split, the
+   panel widths, and the draggable divider. */
+.app {
+  height: 100dvh;
+  background: var(--color-background);
+  color: var(--color-foreground);
+}
+/* The sidebar is its own surface: `--color-muted` sits a step off `--color-background`
+   in both themes (near-white grey in light, a shade lighter than the base in dark). That
+   #f4f4f5-on-white step is subtle, so a 1px right border marks the at-rest sidebar | main
+   division: <kai-resizable>'s `line` handle is transparent at rest and only tints on
+   hover/drag, so the boundary has to come from the panel itself. The border uses
+   `var(--color-border)`, which now tracks the shell's light/dark tokens because the parent
+   <ResizableItem theme={theme}> forwards the theme (a light hairline in light mode, dark in
+   dark). `box-sizing: border-box` keeps the 1px inside the 280px item so it doesn't shift
+   the content width. Collapse is handled by the parent <ResizableItem collapsed> (the panel
+   + its divider drop out), so the old `.sidebar.collapsed` rule is gone. */
+.sidebar {
+  background: var(--color-muted);
+  border-right: 1px solid var(--color-border);
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+.sidebar > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.main {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+}
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+.bar-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.brand {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-muted-foreground);
+}
+/* <kai-thread> scrolls internally and centers its own fixed-width column, so the
+   host just needs to fill the remaining height of the main flex column. */
+.thread {
+  flex: 1;
+  min-height: 0;
+}
+/* No top divider above the input — the composer floats against the thread. Extra
+   bottom padding lifts the input + hint off the viewport edge. */
+.composer {
+  padding: 0.75rem 1rem 1.5rem;
+}
+/* Match the composer to the centered message column above it. */
+.composer > * {
+  display: block;
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+/* Muted, centered helper line under the input pointing out the / and @ triggers. */
+.composer-hint {
+  margin: 0.5rem auto 0;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--color-muted-foreground);
+}
+.composer-hint kbd {
+  font-family: inherit;
+  font-size: 0.6875rem;
+  padding: 0.05rem 0.3rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-muted);
+  color: var(--color-foreground);
+}

package/dist/templates/vanilla/src/main.ts ADDED Viewed

@@ -0,0 +1,53 @@
+import '@kitn.ai/ui/elements'; // registers the kai-* custom elements (async)
+import '@kitn.ai/ui/theme.tokens.css'; // plain --color-* tokens for the shell
+import './index.css';
+import { readOpenAIStream } from '@kitn.ai/ui/wire';
+import { createStore } from './state';
+import { createView } from './view';
+import { mockResponse, newId } from './chat-data';
+const root = document.getElementById('app');
+if (!root) throw new Error('Root element #app not found');
+// The kai-* elements register ASYNCHRONOUSLY (gotcha 1: the upgrade race). Array/
+// object properties set on an element BEFORE it upgrades are lost, and raw
+// web-component consumers have no upgrade-race guard (unlike the React wrappers).
+// So we wait until every tag we use is defined before building the view — every
+// element createView() creates is then already upgraded and our property sets land.
+const TAGS = ['kai-resizable', 'kai-resizable-item', 'kai-conversations', 'kai-thread', 'kai-prompt-input', 'kai-button'];
+async function boot(host: HTMLElement): Promise<void> {
+  await Promise.all(TAGS.map((tag) => customElements.whenDefined(tag)));
+  const store = createStore();
+  // Append the user turn, then stream the (mock) assistant reply.
+  async function send(raw: string): Promise<void> {
+    const text = raw.trim();
+    if (!text) return;
+    store.append({ id: newId(), role: 'user', parts: [{ type: 'text', text }] });
+    const stream = store.streamAssistant();
+    // NO BACKEND AND NO PROVIDER. mockResponse() yields canned SSE frames that go
+    // through the SAME reader a real model's response would, so this preview
+    // exercises the real path. To go live, only this one expression changes —
+    // `mockResponse(text)` becomes a POST to your route, with
+    // toOpenAIMessages(store.state.messages) as the body. The line below stays.
+    await readOpenAIStream(mockResponse(text), stream);
+    stream.done();
+  }
+  const view = createView(host, {
+    onConversationSelect: (id) => store.selectConversation(id),
+    onNewChat: () => store.newChat(),
+    onToggleSidebar: () => store.toggleCollapsed(),
+    onShowSidebar: () => store.setCollapsed(false),
+    onToggleTheme: () => store.toggleTheme(),
+    onSubmit: (value) => void send(value),
+    onSuggestion: (value) => void send(value),
+  });
+  store.subscribe(() => view.render(store.state));
+  view.render(store.state);
+}
+void boot(root);

package/dist/templates/vanilla/src/state.ts ADDED Viewed

@@ -0,0 +1,119 @@
+import type { ChatMessage } from '@kitn.ai/ui';
+import {
+  appendMessage,
+  createAssistantStream,
+  onStreamSettled,
+  type SetMessages,
+  type AssistantStream,
+} from '@kitn.ai/ui/state';
+import { CONVERSATIONS, THREADS, newId, type Conversation } from './chat-data';
+export type Theme = 'light' | 'dark';
+/**
+ * The whole app's state in one plain object. `view.ts` reads it in `render()` and
+ * syncs it onto the `kai-*` element properties; the ops below mutate it and then
+ * `notify()` so a single subscriber (the render) re-runs. No framework, no proxies.
+ */
+export interface AppState {
+  messages: ChatMessage[];
+  conversations: Conversation[];
+  activeId: string;
+  theme: Theme;
+  collapsed: boolean;
+  loading: boolean;
+}
+export interface Store {
+  readonly state: AppState;
+  /** Register a listener; it fires after every state change. */
+  subscribe(fn: () => void): void;
+  append(msg: ChatMessage): void;
+  /** Start streaming an assistant turn (flips `loading`, clears it on settle). */
+  streamAssistant(init?: Partial<ChatMessage>): AssistantStream;
+  selectConversation(id: string): void;
+  newChat(): void;
+  toggleTheme(): void;
+  toggleCollapsed(): void;
+  setCollapsed(value: boolean): void;
+}
+/**
+ * Owns the message array + conversation stash + UI flags, built on the kit's
+ * framework-neutral state core (`@kitn.ai/ui/state`) the React `useKaiChat` hook
+ * and the Vue `useChat` composable also use. Every message op assigns a BRAND-NEW
+ * array reference (`state.messages = updater(prev)`); that fresh reference is
+ * exactly what re-renders `<kai-thread>` when the render re-sets its `messages`
+ * property. Swap `mockResponse(text)` (in main.ts) for a real `fetch` to ship.
+ */
+export function createStore(): Store {
+  const state: AppState = {
+    messages: [...(THREADS[CONVERSATIONS[0].id] ?? [])],
+    conversations: [...CONVERSATIONS],
+    activeId: CONVERSATIONS[0].id,
+    theme: 'dark',
+    collapsed: false,
+    loading: false,
+  };
+  const listeners = new Set<() => void>();
+  const notify = () => listeners.forEach((fn) => fn());
+  // The one contract the state core drives: a functional-updater setter (React
+  // setState shape) that assigns a fresh array each call, then notifies.
+  const set: SetMessages = (updater) => {
+    state.messages = updater(state.messages);
+    notify();
+  };
+  const setMessages = (next: ChatMessage[]) => {
+    state.messages = [...next];
+    notify();
+  };
+  return {
+    state,
+    subscribe(fn) {
+      listeners.add(fn);
+    },
+    append(msg) {
+      set((prev) => appendMessage(prev, msg));
+    },
+    streamAssistant(init) {
+      state.loading = true;
+      notify();
+      return onStreamSettled(createAssistantStream(set, init), () => {
+        state.loading = false;
+        notify();
+      });
+    },
+    selectConversation(id) {
+      THREADS[state.activeId] = state.messages; // stash the open thread
+      state.activeId = id;
+      setMessages(THREADS[id] ?? []); // load the picked one (notifies)
+    },
+    newChat() {
+      const id = newId();
+      THREADS[state.activeId] = state.messages;
+      THREADS[id] = [];
+      const now = new Date().toISOString();
+      state.conversations = [
+        { id, title: 'New conversation', scope: { type: 'collection' }, messageCount: 0, lastMessageAt: now, updatedAt: now },
+        ...state.conversations,
+      ];
+      state.activeId = id;
+      setMessages([]); // notifies
+    },
+    toggleTheme() {
+      state.theme = state.theme === 'light' ? 'dark' : 'light';
+      notify();
+    },
+    toggleCollapsed() {
+      state.collapsed = !state.collapsed;
+      notify();
+    },
+    setCollapsed(value) {
+      state.collapsed = value;
+      notify();
+    },
+  };
+}