@smarter.sh/ui-chat 0.3.0 → 0.7.1

package/LICENSE

@@ -660,9 +660,9 @@ if any, to sign a "copyright disclaimer" for the program, if necessary.
 For more information on this, and how to apply and follow the GNU AGPL, see
 <http://www.gnu.org/licenses/>.
 
-EdX Inc. wishes to state, in clarification of the above license terms, that
+Lawrence McDaniel wishes to state, in clarification of the above license terms, that
 any public, independently available web service offered over the network and
-communicating with edX's copyrighted works by any form of inter-service
+communicating with Lawrence McDaniel's copyrighted works by any form of inter-service
 communication, including but not limited to Remote Procedure Call (RPC)
 interfaces, is not a work based on our copyrighted work within the meaning
 of the license. "Corresponding Source" of this work, or works based on this

package/README.md

@@ -1,225 +1,287 @@
-[![NPM](https://a11ybadges.com/badge?logo=npm)](https://www.npmjs.com/package/@smarter.sh/ui-chat)
-[![GitHub](https://a11ybadges.com/badge?logo=github)](https://github.com/smarter-sh/smarter-chat/)
-<a href="https://smarter.sh">
-<img src="https://img.shields.io/badge/Smarter.sh-orange?style=flat&logo=appveyor&logoColor=white" height="32">
-</a>
-
-# SmarterChat React.js component for smarter.sh
-
-This project contains the source code for the interactive chatbot found in the Smarter web console [developer workbench](https://platform.smarter.sh/chatbots/example/). It integrates natively with Smarter Saas and on-premise installations. You can optionally enable the meta data output behavior found in the Smarter sandbox. See [Smarter Technical Overview](./doc/README.md)
-
-This project is also suitable for all front-end cross-platform projects. For example, use this code base to create a react.js run-time for use inside of Wordpress plugins, salesforce.com apps, .net components and Sharepoint add-ins.
-
-![Basic Usage](./doc/img/readme-usage4.png)
-
-## Usage
-
-Generic usage of the published npm package is as follows
+# @smarter.sh/ui-chat
+
+> A drop-in React chat component for [Smarter](https://smarter.sh) LLMClients: streaming tool-call progress, GitHub
+> flavored markdown, syntax-highlighted code, LaTeX math and Mermaid diagrams, out of the box.
+
+[![npm version](https://img.shields.io/npm/v/@smarter.sh/ui-chat?logo=npm)](https://www.npmjs.com/package/@smarter.sh/ui-chat)
+[![npm downloads](https://img.shields.io/npm/dm/@smarter.sh/ui-chat)](https://www.npmjs.com/package/@smarter.sh/ui-chat)
+[![Test Status](https://github.com/smarter-sh/smarter-chat/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/smarter-sh/smarter-chat/actions/workflows/test.yml)
+[![Coverage](https://img.shields.io/codecov/c/github/smarter-sh/smarter-chat/main?label=coverage&logo=codecov)](https://codecov.io/gh/smarter-sh/smarter-chat)
+[![TypeScript](https://img.shields.io/badge/types-included-blue?logo=typescript&logoColor=white)](#typescript)
+[![React 19](https://img.shields.io/badge/react-19-61dafb?logo=react&logoColor=white)](https://react.dev)
+[![License: AGPL-3.0-or-later](https://img.shields.io/npm/l/@smarter.sh/ui-chat)](https://github.com/smarter-sh/smarter-chat/blob/main/LICENSE)
+
+![Smarter Chat](https://cdn.smarter.sh/images/smarter-chat-ui-example.png)
+
+Smarter Chat is the chat UI of the Smarter web console's prompt engineering workbench, published as a React component
+so that any web page can use a Smarter LLMClient as its chat backend: a marketing site, a customer portal, a storefront,
+an intranet, or your own application.
+
+**[Documentation](https://docs.smarter.sh/en/latest/smarter-framework/smarter-chat.html)** ·
+**[Storybook](#development)** · **[Changelog](https://github.com/smarter-sh/smarter-chat/blob/main/CHANGELOG.md)** ·
+**[Issues](https://github.com/smarter-sh/smarter-chat/issues)**
+
+## Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [Requirements on the Smarter side](#requirements-on-the-smarter-side)
+- [Props](#props)
+- [Examples](#examples)
+- [Styling](#styling)
+- [TypeScript](#typescript)
+- [How it works](#how-it-works)
+- [Browser support](#browser-support)
+- [Development](#development)
+- [License](#license)
+
+## Features
+
+- **One component, one prop.** Give it the url of a deployed LLMClient, and it loads the LLMClient's name, welcome
+  message, example prompts and placeholder from Smarter.
+- **Persistent chat sessions.** The conversation survives page reloads, and each LLMClient on a site keeps its own
+  session.
+- **Live progress.** While a prompt runs, the chat shows each LLM request, tool, plugin and MCP server call, streamed
+  as Server-Sent Events.
+- **Rich responses.** GitHub flavored markdown (tables, lists, block quotes, images, links), syntax-highlighted code
+  blocks with a copy button, LaTeX math typeset by [KaTeX](https://katex.org), and
+  [Mermaid](https://mermaid.js.org) diagrams.
+- **Safe by default.** Raw html is displayed as text, links and images are restricted to `http(s)`, relative and raster
+  `data:` urls, and the rendered html and Mermaid's svg are sanitized with
+  [DOMPurify](https://github.com/cure53/DOMPurify).
+- **Lightweight where it counts.** React is a peer dependency, Mermaid is loaded only when a message first has a
+  diagram, and KaTeX's fonts are downloaded only when an equation uses them.
+- **Optional developer Console.** A resizable side panel with the LLMClient's configuration, the session's api calls,
+  tool calls and plugin usage, and a live server log stream, as in the Smarter workbench.
+- **Accessible.** Labeled regions and controls, keyboard-resizable panels, and MathML for screen readers.
+- **Typed.** Written in TypeScript, with type declarations for its props and for the Smarter api's data.
+
+## Installation
 
 ```console
 npm install @smarter.sh/ui-chat
 ```
 
-```jsx
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { SmarterChat } from "@smarter.sh/ui-chat";
-
-const rootElement = document.getElementById("smarter-sh-v1-ui-chat-root");
-const root = ReactDOM.createRoot(rootElement);
-const apiUrl = rootElement.getAttribute("smarter-chatbot-api-url") || "http://localhost:9357/api/v1/chatbots/1/";
-const toggleMetadata = rootElement.getAttribute("smarter-toggle-metadata") === "true";
-const csrfCookieName = rootElement.getAttribute("smarter-csrf-cookie-name") || "csrftoken";
-const sessionCookieName = rootElement.getAttribute("smarter-session-cookie-name") || "session_key";
-const cookieDomain = rootElement.getAttribute("smarter-cookie-domain") || "localhost";
-const authSessionCookieName = rootElement.getAttribute("django-session-cookie-name") || "sessionid";
-const csrftoken = rootElement.getAttribute("django-csrftoken");
-const debugMode = rootElement.getAttribute("smarter-debug-mode") === "true";
-const debugCookieName = "debug";
-
-root.render(
-  <React.StrictMode>
-    <SmarterChat
-      apiUrl={apiUrl}
-      apiKey={apiKey}
-      toggleMetadata={toggleMetadata}
-      csrfCookieName={csrfCookieName}
-      csrftoken={csrftoken}
-      debugCookieName={debugCookieName}
-      debugCookieExpiration={debugCookieExpiration}
-      debugMode={debugMode}
-      sessionCookieName={sessionCookieName}
-      sessionCookieExpiration={sessionCookieExpiration}
-      authSessionCookieName={authSessionCookieName}
-      showConsole={true}
-      cookieDomain={cookieDomain}
-    />
-  </React.StrictMode>,
-);
+```console
+yarn add @smarter.sh/ui-chat
 ```
 
-### Build from source
-
-To build and deploy for use in the Smarter Web Console Prompt Engineer Workbench, do the following.
-This assumes that you have already built your AWS cloud infrastructure using [github.com/smarter-sh/smarter-infrastructure](https://github.com/smarter-sh/smarter-infrastructure) and that a CDN exists at cdn.platform.example.com.
-
 ```console
-export ROOT_DOMAIN=example.com
-export PLATFORM_SUBDOMAIN=platform
-npm install
-make build
-make release
+pnpm add @smarter.sh/ui-chat
 ```
 
-## Integrate to an existing web page
+`react` and `react-dom` 19 are peer dependencies. The package is published as ES and UMD bundles, and is meant to be
+used with a bundler such as Vite, webpack, Rollup or Next.js.
 
-We integrate this react component to the [Smarter developer workbench](https://platform.smarter.sh/) using this small repo, [github.com/smarter-sh/web-integration-example](https://github.com/smarter-sh/web-integration-example). This methodology provides a layer of separation between Django and react.js, which keeps things simple. smarter-workbench substantially consists of the following three files:
+## Quick start
 
-- [main.jsx](https://github.com/smarter-sh/smarter-workbench/blob/main/src/main.jsx): a 40-line react.js mini app for configuring this npm component with a Smarter Api url and any initialization settings we choose to include.
-- [app-loader.js](https://github.com/smarter-sh/smarter-workbench/blob/main/src/public/app-loader.js): a small js script that injects the react.js build assets into your DOM, initiating the React boot-up process.
-- [Makefile](https://github.com/smarter-sh/smarter-workbench/blob/main/Makefile): for automating build and release to AWS Cloudfront, where the react ui-chat app is served.
-
-Meanwhile, Django adds a pair of DOM elements like the following example, where app-loader.js launches itself with an "iffe", (Immediately Invoked Function Expression).
+```tsx
+import { createRoot } from "react-dom/client";
+import { SmarterChat } from "@smarter.sh/ui-chat";
+import "@smarter.sh/ui-chat/dist/ui-chat.css";
+import "katex/dist/katex.min.css"; // math in responses. katex is installed with the package.
 
-```html
-<div
-  id="smarter-sh-v1-ui-chat-root"
-  smarter-chatbot-api-url="https://openai.3141-5926-5359.api.smarter.sh/"
-  smarter-toggle-metadata="False"
-  style="height: 88vh;"
-></div>
-<script async="" src="https://cdn.platform.smarter.sh/ui-chat/app-loader.js"></script>
+createRoot(document.getElementById("chat")!).render(
+  <div style={{ height: 600 }}>
+    <SmarterChat
+      apiUrl="https://stackademy.3141-5926-5359.api.example.com/"
+      apiKey={import.meta.env.VITE_SMARTER_API_KEY} // only if the LLMClient has an api key
+      showConsole={false}
+    />
+  </div>,
+);
 ```
 
-## Developers
+The chat fills the height of its parent element, so give the parent a height.
 
-SmarterChat is created with [React](https://react.dev/) leveraging [@chatscope/chat-ui-kit-react](https://www.npmjs.com/package/@chatscope/chat-ui-kit-react)
+## Requirements on the Smarter side
 
-### Setup
+The component talks directly to the Smarter platform from your visitors' browsers, so three things must be true:
 
-1. Build your component
+1. **The LLMClient is deployed.** `apiUrl` is its url, for example
+   `https://<name>.<account-number>.api.<your-smarter-domain>/`, or its verified custom domain. The chat calls that
+   host only.
+2. **Your page's origin is allowed.** Requests from your page are cross-origin, with credentials. List your origins in
+   the LLMClient's manifest, and apply it:
 
-   ```console
-   npm install -g yalc
-   npm run build
-   yalc publish
+   ```yaml
+   spec:
+     config:
+       allowedOrigins:
+         - https://www.example.com
+         - http://localhost:5173
    ```
 
-2. Create a separate test React app (outside your library folder)
-
-```console
-npx create-react-app smarter-chat-test
-cd smarter-chat-test
+3. **The browser can authenticate, if the LLMClient requires it.** A deployed LLMClient without api keys is public:
+   pass no `apiKey`, and every prompt is charged to the LLMClient's owner. For one with an api key, pass a Smarter api
+   key as `apiKey`, which is sent as `Authorization: Token <apiKey>`. Anyone who can view your page can read it, so use
+   a key dedicated to the page.
+
+The page receives the LLMClient's public configuration (its name, welcome message, example prompts, model and system
+prompt), never, for example, its owner's profile or the session's diagnostic histories.
+
+See [Embedding Smarter Chat](https://docs.smarter.sh/en/latest/smarter-framework/smarter-chat/embedding.html) for
+details, including troubleshooting.
+
+## Props
+
+Only `apiUrl` is required.
+
+| Prop                      | Type             | Default         | Description                                                                                                                                                                                                       |
+| ------------------------- | ---------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `apiUrl`                  | `string`         | (required)      | The LLMClient's api url. The chat appends `config/` to it for its configuration.                                                                                                                                  |
+| `apiKey`                  | `string \| null` | `null`          | A Smarter api key, sent as `Authorization: Token <apiKey>`, for LLMClients that require authentication.                                                                                                           |
+| `showConsole`             | `boolean`        | `true`          | Show the developer Console beside the chat. It needs a wide container; set it to `false` for end-user pages.                                                                                                      |
+| `toggleMetadata`          | `boolean`        | `false`         | Show the Sandbox mode / Production mode button, which shows and hides the backend's own messages (system prompt, tool results, Smarter's), and start in sandbox mode. Without it, the chat is in production mode. |
+| `streamProgress`          | `boolean`        | `true`          | Display a running prompt's progress, which the prompt api streams as Server-Sent Events.                                                                                                                          |
+| `debugMode`               | `boolean`        | `false`         | Log to the browser console.                                                                                                                                                                                       |
+| `cookieDomain`            | `string`         | `""`            | The domain whose cookies the chat reads. Empty means the page's own domain.                                                                                                                                       |
+| `sessionCookieName`       | `string`         | `"session_key"` | The cookie in which the chat saves its session's key, for the page's path.                                                                                                                                        |
+| `sessionCookieExpiration` | `number`         | one day         | The session cookie's lifetime, in milliseconds.                                                                                                                                                                   |
+| `csrfCookieName`          | `string`         | `"csrftoken"`   | The name of Django's CSRF cookie, whose value is sent as the `X-CSRFToken` header.                                                                                                                                |
+| `csrftoken`               | `string \| null` | `null`          | The CSRF token, when the page cannot read the CSRF cookie.                                                                                                                                                        |
+| `debugCookieName`         | `string`         | `"debug"`       | The cookie in which the chat saves the LLMClient's debug mode.                                                                                                                                                    |
+| `debugCookieExpiration`   | `number`         | one day         | The debug cookie's lifetime, in milliseconds.                                                                                                                                                                     |
+| `smarterRequestId`        | `string`         | `""`            | A unique id of the page request, sent as the `X-Smarter-RequestId` header, for tracing.                                                                                                                           |
+| `logStreamUrl`            | `string \| null` | `null`          | The url of a server log stream (Server-Sent Events), for the Console's Server Logs tab.                                                                                                                           |
+
+## Examples
+
+### A chat widget in a corner of the page
+
+```tsx
+function ChatWidget({ apiKey }: { apiKey: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(!open)}>Chat with us</button>
+      {open && (
+        <div style={{ position: "fixed", right: 24, bottom: 80, width: 400, height: 600 }}>
+          <SmarterChat apiUrl="https://support.3141-5926-5359.api.example.com/" apiKey={apiKey} showConsole={false} />
+        </div>
+      )}
+    </>
+  );
+}
 ```
 
-3. Link your local package to the test app. This is a 1-time operation.
+### Next.js
 
-```console
-yalc add @smarter.sh/ui-chat
-npm install # verifies peer dependencies
-```
+The component uses browser apis (cookies, `localStorage`, `EventSource`), so render it on the client only:
 
-4. In the test app, import and use your component as you described.
+```tsx
+"use client";
+import dynamic from "next/dynamic";
+import "@smarter.sh/ui-chat/dist/ui-chat.css";
+import "katex/dist/katex.min.css";
 
-5. Start the test app
+const SmarterChat = dynamic(() => import("@smarter.sh/ui-chat").then((m) => m.SmarterChat), { ssr: false });
 
-```console
-yalc update @smarter.sh/ui-chat
-npm run build
-npm start
+export default function Chat() {
+  return (
+    <div style={{ height: "80vh" }}>
+      <SmarterChat
+        apiUrl="https://stackademy.3141-5926-5359.api.example.com/"
+        apiKey={process.env.NEXT_PUBLIC_SMARTER_API_KEY}
+        showConsole={false}
+      />
+    </div>
+  );
+}
 ```
 
-### Backend integration
-
-See [Getting Started with the Smarter Chatbot Api](./doc/CHATBOT_API.md)
-This app interacts with two endpoints from the [smarter.sh/v1](https://platform.smarter.sh/docs/api/) chatbot api:
+### A prompt engineering workbench
 
-- GET `/config/`: retrieves a json dict, structured in 4 major sections, with all information required by the react app.
-- POST `/chat/`: send a text completion prompt to the Smarter Api.
+The full workbench, as in the Smarter web console: the Console, the mode toggle, and your server logs.
 
-Smarter chatbot urls use either of these two naming conventions:
+```tsx
+<SmarterChat
+  apiUrl={apiUrl}
+  apiKey={apiKey}
+  toggleMetadata
+  showConsole
+  logStreamUrl="https://platform.example.com/dashboard/logs/api/stream/"
+/>
+```
 
-- public: `https://<name>.<account_number>.example.com/`
-- authenticated: `https://platform.smarter.sh/chatbots/<name>/`. This react component looks for and adds the Smarter platform sessionid cookie value to request headers, if it exists.
+## Styling
 
-Public api url example for a deployed chatbot:
+Import the stylesheet once, anywhere in your app:
 
-- `https://my-chatbot.3141-5926-5359.api.smarter.sh/config/`
-- `https://my-chatbot.3141-5926-5359.api.smarter.sh/chat/`
+```ts
+import "@smarter.sh/ui-chat/dist/ui-chat.css"; // or "@smarter.sh/ui-chat/style.css"
+import "katex/dist/katex.min.css";
+```
 
-Authenticated api url example for any chatbot in your Smarter account:
+- **`ui-chat.css`** is the component's own css, including
+  [chatscope](https://github.com/chatscope/chat-ui-kit-react)'s chat styles, which it is built on.
+- **`katex/dist/katex.min.css`** is the stylesheet of math in responses. It's left out of `ui-chat.css` so that pages
+  without math don't pay for KaTeX's fonts. Without it, math is displayed twice: as text, and as unstyled MathML.
 
-- `https://platform.smarter.sh/chatbots/my-chatbot/config/`
-- `https://platform.smarter.sh/chatbots/my-chatbot/chat/`
+The component's elements have stable class names, prefixed `smarter-chat-` (for example `.smarter-chat-message-list`,
+`.smarter-chat-code`, `.smarter-chat-image`), under a root `.SmarterChat` element, so you can override their styles
+from your own stylesheet.
 
-#### Config
+## TypeScript
 
-A Json dict containing all configuration data for the chatbot. This is downloaded at run-time when the reactapp is initializing.
-Example: [/chatbots/example/config/?session_key=YOUR-SESSION-KEY](http://localhost:8000/chatbots/example/config/)
+Type declarations are included. Besides the components, the package exports:
 
-See: [sample config](./data/sample-config.json)
+| Export                                                                         | What it is                                                       |
+| ------------------------------------------------------------------------------ | ---------------------------------------------------------------- |
+| `SmarterChat`                                                                  | The chat component.                                              |
+| `Console`                                                                      | The developer Console, on its own.                               |
+| `SmarterChatProps`                                                             | The chat's props.                                                |
+| `ChatConfig`, `LLMClientConfig`, `ChatHistory`, `ChatMetaData`                 | The LLMClient configuration that the Smarter config api returns. |
+| `Contract`                                                                     | Every type of the api contract, generated from its JSON Schema.  |
+| `normalizeConfig`, `CHAT_CONTRACT_V2_CAPABILITY`                               | Converts an older platform's configuration to the current one.   |
+| `ApiMessage`, `ChatMessage`                                                    | A message as the api sends it, and as the chat thread holds it.  |
+| `PromptProgressEvent`                                                          | A step of a running prompt, as the prompt api streams it.        |
+| `MessageDirectionEnum`, `SenderRoleEnum`, `ValidMessageRolesEnum`, `MenuItems` | Message directions and roles, and the Console's tabs.            |
+| `version`                                                                      | The package's version.                                           |
 
-#### Api
+## How it works
 
-A REST Api for sending and receiving chat prompt requests. The url comes from the config dict (above): data.chatbot.url_chatbot.
-example: `http://api.smarter.sh/v1/chatbots/smarter/example/`
+The component makes two kinds of POST requests to Smarter, with the browser's cookies:
 
-example http request:
+1. **`<apiUrl>config/`** returns the LLMClient's configuration and the chat session's history, which restores the
+   thread when the page reloads. A new session's key is saved in a cookie.
+2. **The LLMClient's prompt api** (`llmclient.url_llmclient` in the configuration) receives the thread with each new
+   message, and returns the messages to add to it. With `streamProgress`, it answers with Server-Sent Events: progress
+   events while the prompt runs, then the result.
 
-```json
-{
-    "method": "POST",
-    "credentials": "include",
-    "mode": "cors",
-    "headers": {
-        "Accept": "application/json",
-        "Content-Type": "application/json",
-        "X-CSRFToken": "q9WXqqIhYJMI3ZSBIOE18JMORBMqAHri",
-        "Origin": "http://localhost:8000",
-        "Cookie": "session_key=a07593ecfaecd24008ca4251096732663ac0213b8cc6bdcce4f4c043276ab0b5; debug=true;"
-    },
-    "body": "{\"session_key\":\"a07593ecfaecd24008ca4251096732663ac0213b8cc6bdcce4f4c043276ab0b5\",\"messages\":[{\"role\":\"system\",\"content\":\"You are a helpful chatbot."},{\"role\":\"assistant\",\"content\":\"Welcome to the Smarter demo!\"}]}"
-}
-```
+The api contract is versioned, and generated from the backend's Pydantic models: the component asks for the current
+version, with `X-Smarter-Capabilities: chat-contract-v2`, and reads the previous one from older Smarter platforms.
 
-example http response:
-
-```json
-{
-  "data": {
-    "isBase64Encoded": false,
-    "statusCode": 200,
-    "headers": {
-      "Content-Type": "application/json"
-    },
-    "body": "{\"id\": \"chatcmpl-AoDpMvoAhf8iSJuEm6pMqkX62HK4G\", \"choices\": [{\"finish_reason\": \"stop\", \"index\": 0, \"logprobs\": null, \"message\": {\"content\": \"Hello! While I'm not your mom, I'm here to help you with any questions or tasks you have. What can I assist you with today?\", \"refusal\": null, \"role\": \"assistant\", \"audio\": null, \"function_call\": null, \"tool_calls\": null}}], \"created\": 1736532916, \"model\": \"gpt-4-turbo-2024-04-09\", \"object\": \"chat.completion\", \"service_tier\": \"default\", \"system_fingerprint\": \"fp_f17929ee92\", \"usage\": {\"completion_tokens\": 33, \"prompt_tokens\": 1122, \"total_tokens\": 1155, \"completion_tokens_details\": {\"accepted_prediction_tokens\": 0, \"audio_tokens\": 0, \"reasoning_tokens\": 0, \"rejected_prediction_tokens\": 0}, \"prompt_tokens_details\": {\"audio_tokens\": 0, \"cached_tokens\": 0}}, \"metadata\": {\"tool_calls\": null, \"model\": \"gpt-4-turbo\", \"temperature\": 0.5, \"max_tokens\": 256, \"input_text\": \"hi mom\"}}"
-  },
-  "api": "smarter.sh/v1",
-  "thing": "Chatbot",
-  "metadata": {
-    "command": "chat"
-  }
-}
-```
+The complete contract, with every request, response, header, cookie and event, is in
+[The Chat API Contract](https://docs.smarter.sh/en/latest/smarter-framework/smarter-chat/api-contract.html).
 
-## Contributor Reference
+## Browser support
 
-### Getting Started
+Current versions of Chrome, Edge, Firefox and Safari. The component uses `fetch` response streams, `EventSource`,
+`localStorage` and the `inert` attribute.
 
-- `make`: prints a full menu of commands to the console.
-- `make init`: Setup your environment for first time use. sets up your Node environment for you. initializes pre-commit, which you need to run prior to creating pull requests.
-- `make run`: Run the dev server locally
-- `make build`: Build the react.js project. saves vite.js output to `./build` in the root of this project.
-- `make release`: Deploy the react.js project. **REQUIRES awscli + keypair with sufficient permissions**. Publishes the contents of the `./build` folder to an AWS S3 bucket served by the host defined by the value of `CDN_HOST_BASE_URL` located in shared/constant.js. For example, the react app for the Smarter workbench is initialized and served from these endpoints: a. [index.html](https://cdn.platform.smarter.sh/ui-chat/index.html): the react app build artifacts, and b. [app-loader.js](https://cdn.platform.smarter.sh/ui-chat/app-loader.js): a script to insert the react app build artifacts into the DOM.
+## Development
 
-### Architecture
+```console
+git clone https://github.com/smarter-sh/smarter-chat.git
+cd smarter-chat
+make init    # npm install
+make serve   # Storybook at http://localhost:6006, with the Smarter api mocked
+make test    # Vitest; every story is also rendered as a test
+```
 
-- [Vite](https://vitejs.dev/)
-- [React](https://react.dev/)
-- [Chat UI Kit React](https://www.npmjs.com/package/@chatscope/chat-ui-kit-react)
+No Smarter backend is needed: the stories mock the api with [MSW](https://mswjs.io/). See
+[CONTRIBUTING.md](https://github.com/smarter-sh/smarter-chat/blob/main/.github/CONTRIBUTING.md) for the rest of the
+workflow (every `make` target, working inside the Smarter repository, commits and releases), and the
+[developer guide](https://docs.smarter.sh/en/latest/smarter-framework/smarter-chat/development.html) for the
+architecture.
 
-## Contributing
+## License
 
-We welcome contributions! There are a variety of ways for you to get involved, regardless of your background. In addition to Pull requests, this project would benefit from contributors focused on documentation and how-to video content creation, testing, community engagement, and stewards to help us to ensure that we comply with evolving standards for the ethical use of AI.
+[AGPL-3.0-or-later](https://github.com/smarter-sh/smarter-chat/blob/main/LICENSE), as Smarter is. Copyright © Lawrence
+McDaniel.
 
-You can also contact [Lawrence McDaniel](https://lawrencemcdaniel.com/contact) directly.
+Contributions are welcome: code, documentation, how-to videos, testing and community help. See
+[CONTRIBUTING.md](https://github.com/smarter-sh/smarter-chat/blob/main/.github/CONTRIBUTING.md), or contact
+[Lawrence McDaniel](https://lawrencemcdaniel.com/contact).