# @zerowidth/react-api-provider
> an easy way to connect React apps to ZeroWidth
Latest version **0.5.0-beta** (published 2024-08-12) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @zerowidth/react-api-provider
pnpm add @zerowidth/react-api-provider
yarn add @zerowidth/react-api-provider
bun add @zerowidth/react-api-provider
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.5.0-beta |
| Published | 2024-08-12 |
| First published | 2023-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 69.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Peter Binggeser |
| Maintainers | pbinggeser |
## Links
- npm: https://www.npmjs.com/package/@zerowidth/react-api-provider
- Repository: https://pbinggeser@github.com/zerowidth-ai/react-api-provider
- Homepage: https://github.com/zerowidth-ai/react-api-provider#readme
- Issues: https://github.com/zerowidth-ai/react-api-provider/issues
- npm.io page: https://npm.io/package/@zerowidth/react-api-provider
## Recent versions
- 0.5.0-beta (latest) — 2024-08-12
- 0.4.0-beta.1 — 2024-06-03
- 0.3.0-beta.2 — 2024-04-23
- 0.3.0-beta.1 — 2024-04-15
- 0.3.0-beta.0 — 2024-01-21
- 0.2.3-beta — 2023-12-04
- 0.2.2-beta — 2023-11-27
- 0.2.1-beta — 2023-11-27
- 0.2.0-beta — 2023-11-27
- 0.1.1-beta — 2023-11-10
- 0.1.0-beta — 2023-11-10
## README
This package is currently in beta.
# @zerowidth/react-api-provider
This package provides a React context and hooks for interacting with the ZeroWidth API. It allows you to easily make API calls to process data through agents on the ZeroWidth Workbench, where users can configure large language models (LLMs) and an ecosystem of technologies to adapt LLMs for specific applications or use cases. It is specifically designed to work hand-in-hand with the @zerowidth/api package, and more specifically with the express-middleware proxy setup on your server, which this package will make calls through
## Features
- Easy integration with React applications.
- Supports processing data and retrieving history.
- Handles streaming responses using Server-Sent Events (SSEs).
## Installation
Install the package using `npm` or `yarn`:
```bash
npm install @zerowidth/react-api-provider
# or
yarn add @zerowidth/react-api-provider
```
## Usage
### Importing the Library
You can import the library components as follows:
```javascript
import { ZeroWidthApiProvider, useZeroWidthApi } from '@zerowidth/react-api-provider';
```
### Setting up the Provider
Wrap your application with the `ZeroWidthApiProvider` to provide the context to your components.
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { ZeroWidthApiProvider } from '@zerowidth/react-api-provider';
const App = () => (
);
ReactDOM.render(, document.getElementById('root'));
```
### Using the Hook
Use the `useZeroWidthApi` hook to access the API methods and state.
```javascript
import React, { useEffect } from 'react';
import { useZeroWidthApi } from '@zerowidth/react-api-provider';
const YourComponent = () => {
const { data, error, loading, stream, process, getHistory } = useZeroWidthApi();
useEffect(() => {
const fetchData = async () => {
await process({
agentId: 'your-agent-id',
messages: [
{ role: 'user', content: 'Hello' }
]
});
};
fetchData();
}, [process]);
if (loading['your-identifier']) return Loading...
;
if (error['your-identifier']) return Error: {error['your-identifier'].message}
;
return (
{JSON.stringify(data['your-identifier'], null, 2)}
{JSON.stringify(stream['your-identifier'], null, 2)}
);
};
export default YourComponent;
```
### Handling Streaming Responses with SSEs
The ZeroWidth API supports streaming responses using Server-Sent Events (SSEs). This allows you to receive real-time updates from the API as events occur. To handle streaming responses, enable the `stream` option in the `process` method, and access the stream data from the context.
#### Example with Streaming
```javascript
import React, { useEffect } from 'react';
import { useZeroWidthApi } from '@zerowidth/react-api-provider';
const YourComponent = () => {
const { stream, process } = useZeroWidthApi();
useEffect(() => {
const fetchData = async () => {
await process({
agentId: 'your-agent-id',
messages: [
{ role: 'user', content: 'Hello' }
],
stream: true
});
};
fetchData();
}, [process]);
return (
{stream['your-identifier']?.map((event, index) => (
{event.eventType}: {JSON.stringify(event.data, null, 2)}
))}