feat: Initial support for assistant-ui

.github/workflows/build.yml

@@ -23,6 +23,7 @@ jobs:
       sdk_dotnet: ${{ steps.filter.outputs.sdk_dotnet }}
       sdk_go: ${{ steps.filter.outputs.sdk_go }}
       sdk_react: ${{ steps.filter.outputs.sdk_react }}
+      assistant_ui: ${{ steps.filter.outputs.assistant_ui }}
       cli: ${{ steps.filter.outputs.cli }}
       control_plane: ${{ steps.filter.outputs.control_plane }}
       data_connector: ${{ steps.filter.outputs.data_connector }}
@@ -48,6 +49,8 @@ jobs:
               - 'sdk-go/**'
             sdk_react:
               - 'sdk-react/**'
+            assistant_ui:
+              - 'assistant-ui/**'
             cli:
               - 'cli/**'
             control_plane:

assistant-ui/README.md

@@ -0,0 +1,94 @@
+<p align="center">
+  <img src="https://a.inferable.ai/logo-hex.png" width="200" style="border-radius: 10px" />
+</p>
+
+# Assistant UI Runtime
+
+[![npm version](https://badge.fury.io/js/%40inferable%2Freact.svg)](https://badge.fury.io/js/%40inferable%2Freact)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Documentation](https://img.shields.io/badge/docs-inferable.ai-brightgreen)](https://docs.inferable.ai/)
+
+Inferable Runtime for [assistant-ui](https://github.com/Yonom/assistant-ui).
+
+## Installation
+
+```bash
+npm install @inferable/assistant-ui
+```
+
+```bash
+yarn add @inferable/assistant-ui
+```
+
+```bash
+pnpm add @inferable/assistant-ui
+```
+
+## Quick Start
+
+> More details on Inferable front-end usage can be found [here](https://docs.inferable.ai/pages/frontend).
+
+### useInferableRuntime
+
+`useInferableRuntime` provides an `AssistantRuntime` object which can be used with `assistant-ui` to render a Chat UI with Inferable.
+
+```typescript
+import { useInferableRuntime } from '@inferable/assistant-ui';
+import { Thread } from "@assistant-ui/react";
+
+const { runtime, run } = useInferableRuntime({
+  clusterId: '<YOUR_CLUSTER_ID>',
+  apiSecret: '<YOUR_API_SECRET>',
+  onError: (error) => {
+    console.error(error);
+  }
+})
+
+return (
+  <div className="h-full">
+    <Thread runtime={runtime}/>
+  </div>
+);
+```
+
+`userInferableRuntime` can also be used with `AssistantModal` for a modal UI.
+
+
+#### Error Handling
+
+You can handle errors by providing an `onError` callback:
+
+```typescript
+  const { runtime, run } = useInferableRuntime({
+    clusterId: '<YOUR_CLUSTER_ID>',
+    apiSecret: '<YOUR_API_SECRET>',
+    onError: (error) => {
+      console.error(error);
+    }
+  })
+```
+
+
+## Local Development
+
+There is development server included in the repository at `./demo`.
+
+1. Start the development server:
+```bash
+npm run dev
+```
+
+This will start a Vite dev server at http://localhost:3000 with the test page, which provides a simple interface to test the runtime.
+
+## Documentation
+
+- [Inferable documentation](https://docs.inferable.ai/) contains all the information you need to get started with Inferable.
+- [Assistant UI documentation](https://www.assistant-ui.com/docs/getting-started) contains all the information you need to get started with Assistant UI.
+
+## Support
+
+For support or questions, please [create an issue in the repository](https://github.com/inferablehq/inferable/issues).
+
+## Contributing
+
+Contributions to the Inferable React SDK are welcome. Please ensure that your code adheres to the existing style and includes appropriate tests.

assistant-ui/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    ['@babel/preset-react', { runtime: 'automatic' }],
+  ],
+};

assistant-ui/demo/TestPage.jsx

@@ -0,0 +1,32 @@
+import { useInferableRuntime } from '../src'
+import { Thread } from "@assistant-ui/react";
+import toast from "react-hot-toast";
+
+const TestPage = () => {
+  const existingRunId = localStorage.getItem("runID")
+
+  const { runtime, run } = useInferableRuntime({
+    clusterId: import.meta.env.VITE_INFERABLE_CLUSTER_ID,
+    apiSecret: import.meta.env.VITE_INFERABLE_API_SECRET,
+    runId: existingRunId,
+    onError: (error) => {
+      toast.error(error.message)
+    }
+  })
+
+  if (run && existingRunId !== run.id) {
+    localStorage.setItem("runID", run.id);
+  }
+
+  if (existingRunId && !run) {
+    return <div className="center">Loading...</div>;
+  }
+
+  return (
+    <div className="h-full">
+      <Thread runtime={runtime}/>
+    </div>
+  );
+};
+
+export default TestPage

assistant-ui/demo/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

assistant-ui/demo/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.jsx"></script>
+  </body>
+</html>

assistant-ui/demo/main.jsx

@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import TestPage from './TestPage.jsx'
+import { Toaster } from 'react-hot-toast'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <TestPage/>
+    <Toaster/>
+  </StrictMode>,
+)

assistant-ui/demo/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: "./demo/tailwind.config.js",
+    },
+  },
+}

assistant-ui/demo/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@assistant-ui/react/tailwindcss")
+  ],
+}