@foundationui/smart-input - npm Package Compare versions

Comparing version 1.0.74 to 1.0.75

package.json

		{
		"name": "@foundationui/smart-input",
		"version": "1.0.74",
		"version": "1.0.75",
		"description": "Smart input/textarea component for React. Learns to provide inline, tab-completeable suggestions.",
		@@ -5,0 +5,0 @@ "type": "module",

README.md

		# `<SmartInput>`

		Drop-in `<input>` and `<textarea>` replacement that that provides inline, tab-completable suggestions like GitHub Copilot and Gmail Smart Compose for any app.
		Drop-in `<input>` and `<textarea>` replacement that that provides inline, tab-completable suggestions like [GitHub Copilot](https://github.com/features/copilot) and [Gmail Smart Compose](https://support.google.com/mail/answer/9116836) for any app.

		The component automatically learns from user input and makes better suggestions over time. We don't call it smart for nothing!
		![demo user composing an email with SmartInput](/img/demo-email.gif)

		The component learns from user input and makes better suggestions over time.

		```jsx
		@@ -31,2 +33,4 @@ import { SmartInput } from '@foundationui/smart-input'

		<br>

		## Install
		@@ -46,8 +50,10 @@

		<br>

		## How it works

		`<SmartInput>` learns to complete the text you intend to write just like GitHub Copilot. It's not very smart at first, but it quickly learns to be useful. Start by creating a model on [foundation-ui.com](https://foundation-ui.com) then set the `model` property:
		`<SmartInput>` completes the text you write just like [GitHub Copilot](https://github.com/features/copilot). It's not very smart at first, but it quickly learns to be useful. Start by creating a model on [foundation-ui.com](https://app.foundation-ui.com) then set the `model` property:

		```jsx
		<SmartInput model="my-org/my-input" />
		<SmartInput model="foundation/hn-comment" />
		```
		@@ -57,2 +63,6 @@

		![admin console playground](/img/admin-playground.png)

		<br>

		### Learning user style & preferences
		@@ -66,22 +76,48 @@

		<br>

		### Providing context

		To generate the best completions, give `<SmartInput>` whatever extra context you think would be useful. Provide data as a JSON object:
		To generate the best completions, give `<SmartInput>` whatever extra context you think would be useful. Provide data as a string:

		```jsx
		<SmartInput
		context={{
		emailSubject: 'This is too easy to integrate into my app',
		to: 'support@foundation-ui.com',
		}}
		/>
		<SmartInput context="Subject: 'This is too easy to integrate'\nTo: 'support@foundation-ui.com'" />
		```

		Don't need to worry about how you format the string, but it's useful to be descriptive. You an use an English sentence, a `JSON.stringify`'d object of key/value pairs, both, etc.

		<br>

		### Bootstrap data

		`<SmartInput>` can start learning without any data. If you want to accelerate the process, you can upload a list of strings to [foundation-ui.com](https://foundation-ui.com) to bootstrap the model.
		`<SmartInput>` can start learning without any data. If you want to accelerate the process, you can upload a list of strings to [foundation-ui.com](https://app.foundation-ui.com) to bootstrap the model.

		![admin UI accepts a bulk upload of data](/img/admin-upload-data.gif)

		You can also send your data to our data ingestion endpoint, which accepts inputs your users have already written.

		```bash
		curl -X POST https://api.foundation-ui.com/smartinput/data \
		-H 'Content-Type: application/json' \
		-H 'Authorization: Bearer <your model secret>' \
		-d @- <<BODY
		{
		"model": "my-org/support-widget",
		"data": [{
		"id": "deduplication-id",
		"user": "user-id",
		"context": "Subject: 'This is too easy to integrate'\nTo: 'support@foundation-ui.com'",
		"input": "Hey, SmartInput is awesome! It only took me a couple of minutes to..."
		}]
		}
		BODY
		```

		In the example above, the `id`, `user`, and `context` fields are all ⚠️ optional.

		<br>

		### Deploy to prod

		`<SmartInput>` is designed for your peace of mind. In addition to the controls provided for your model on [foundation-ui.com](https://foundation-ui.com), you can set the component's `safeMode` property to prevent showing completions:
		`<SmartInput>` is designed for your peace of mind. In addition to the controls provided for your model on [foundation-ui.com](https://app.foundation-ui.com), you can set the component's `safeMode` property to prevent showing completions:

		@@ -96,11 +132,36 @@ ```jsx

		0. (optional) Bootstrap your model with data on [foundation-ui.com](https://foundation-ui.com)
		0. (optional) Bootstrap your model with data on [foundation-ui.com](https://app.foundation-ui.com)
		1. Replace one of the inputs in your app with `<SmartInput safeMode />`
		2. Tune settings and review model performance on [foundation-ui.com](https://foundation-ui.com) until you are satisfied with the results
		3. Turn off `safeMode`
		2. Tune settings and review model performance on [foundation-ui.com](https://app.foundation-ui.com) until you are satisfied with the results

		## API
		<br>

		### Props
		<blockquote>
		🔮 <b>Coming soon</b> ✨<br>

		Soon on foundation-ui.com, you'll be able to ...

		- deploy a model to a small fraction of your users
		- check how often they accepted completions
		- A/B test different model versions
		- build confidence over time

		</blockquote>

		<br>

		### Improve your model

		Once your models are live, you can play with them to make them smarter. First, take a look at your models' accepted completion rate to see how useful it is to your users.

		Next, improve your model by creating different versions of your model (branches), train them with different sets of data, request completions with different parameters, A/B test branches, etc.

		<br>

		![branch](/img/branch.gif)

		## :scroll: Props

		<blockquote>

		#### `model: string \| undefined`
		@@ -199,1 +260,3 @@
		Props that will get passed to the `container` element, when one is provided.

		</blockquote>

@foundationui/smart-input - npm Package Compare versions

Improved metrics