https://github.com/haardikk21/wanda
React Hooks for Keyless AI
https://github.com/haardikk21/wanda
cohere gpt3 gpt4 hooks keyless openai react window-ai
Last synced: 3 months ago
JSON representation
React Hooks for Keyless AI
- Host: GitHub
- URL: https://github.com/haardikk21/wanda
- Owner: haardikk21
- Created: 2023-04-11T20:08:59.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-13T03:19:56.000Z (over 2 years ago)
- Last Synced: 2025-01-16T19:53:51.386Z (9 months ago)
- Topics: cohere, gpt3, gpt4, hooks, keyless, openai, react, window-ai
- Language: TypeScript
- Homepage:
- Size: 42 KB
- Stars: 25
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wanda - React Hooks for keyless AI
**wanda** is a collection of React Hooks to get you up and running with keyless AI in a matter of minutes.
```
npm install @wanda-dev/react
```
## Features
- Hooks for working with injected `window.ai`
- TypeScript ready
## Documentation
### Connectors
Wanda makes the use of connectors to identify keyless AI wallets. For now, there is only one connector - `injected` - which supports [Window.AI](https://windowai.io).
When setting up the context provider for Wanda in your React App, you need to supply a list of connectors you'd like to support. By default, it comes with the Injected Connector supported.
### Hooks
#### `useConnect`
The `useConnect` hook offers a way to connect to keyless AI through a given connector.
```tsx
export function MyComponent() {
const [{ connectors, error }, connect] = useConnect()
return (
{connectors.map((connector) => (
connect(connector)}>
Connect to window.ai through {connector.name}
))}
{error && Failed to connect: {error.message}}
)
}
```
#### `useModel`
The `useModel` hook provides the `ModelID` that is currently set as default through the connector.
This is useful for displaying what model is being used currently on the frontend. It's also useful for detecting if `window.ai` is currently injected or not, as `model` will be undefined if not.
```tsx
export function MyComponent() {
const model = useModel();
if (model) {
return (
You are currently connected to {model}
)
}
return (
// Show prompt to install window.ai
)
}
```
#### `useCompletion`
This is the main hook you will be using. It provides a function to request the connector to provide a completion to a given prompt. You can also pass it an `options` object to customize the request. Currently supports all options supported by `window.ai`
```tsx
export function MyComponent() {
const { getCompletion } = useCompletion()
const [prompt, setPrompt] = useState('')
const [output, setOutput] = useState('')
async function handleSubmit(e: FormEvent) {
e.preventDefault()
const completion = await getCompletion({ prompt })
setOutput(completion.text)
}
return (
<>
setPrompt(e.target.value)}
/>
Get Completion
{output && (
<>
Output: {output}
>
)}
>
)
}
```
### Examples
Look in the `example` directory to see an example application using React.
## License
This project is licensed under the MIT License.
## Authors
- Haardik ([@haardikkk](https://twitter.com/haardikkk), [@haardikk21](https://github.com/haardikk21))