https://github.com/unstubbable/mfng-ai-demo
MFNG AI SDK Generative UI Demo
https://github.com/unstubbable/mfng-ai-demo
Last synced: 8 months ago
JSON representation
MFNG AI SDK Generative UI Demo
- Host: GitHub
- URL: https://github.com/unstubbable/mfng-ai-demo
- Owner: unstubbable
- License: mit
- Created: 2024-03-15T11:43:27.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-30T13:25:13.000Z (over 1 year ago)
- Last Synced: 2025-03-27T06:34:38.153Z (9 months ago)
- Language: TypeScript
- Homepage: https://ai-demo.mfng.strict.software
- Size: 2.05 MB
- Stars: 46
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⚗️ MFNG AI SDK Generative UI Demo
This demo showcases a chat assistant capable of displaying images of various
kinds.
Built using [MFNG](https://github.com/unstubbable/mfng/) — a minimal React
Server Components (RSC) bundler & library — and the
[Vercel AI SDK](https://sdk.vercel.ai/docs), this demo leverages RSCs to
[seamlessly integrate text with UI](https://sdk.vercel.ai/docs/concepts/ai-rsc)
as generated by the LLM.
The app is deployed on AWS Lambda & CloudFront. Due to cost considerations, it
is heavily rate-limited, which may result in occasional error responses.
You can try it out at
[https://ai-demo.mfng.strict.software](https://ai-demo.mfng.strict.software).
## Run Locally
### Prerequisites
- Node.js 20+ installed on your local development machine.
- An [OpenAI API key](https://platform.openai.com/account/api-keys).
### Install
To install the dependencies, run:
```
npm install
```
### Environment Variables
Define the following environment variables, e.g., using
[direnv](https://direnv.net):
- `OPENAI_API_KEY`: Your OpenAI API key (**required**)
- `GOOGLE_SEARCH_API_KEY`: Your Google Custom Search JSON API key (optional)
- `GOOGLE_SEARCH_SEARCH_ENGINE_ID`: Your Google Custom Search JSON API Search
Engine ID (optional)
**Note:** When the two Google Custom Search JSON API environment variables are
not defined, the chat will still function properly; however, images will not be
displayed, and error messages will be shown instead.
For more information on the Google Custom Search JSON API, visit:
[https://developers.google.com/custom-search/v1/introduction](https://developers.google.com/custom-search/v1/introduction)
### Dev Server
To start the dev server (which watches for file changes), run:
```
npm run dev
```
Recording and replaying OpenAI responses can be enabled by starting the dev
server as follows:
```
OPENAI_BASE_URL=http://localhost:3001/v1/ npm run dev
```
To start the dev server in production mode, run:
```
npm start
```
### Browser
Open [http://localhost:3000](http://localhost:3000) in your browser.