This demo showcases a chat assistant capable of displaying images of various kinds.
Built using MFNG — a minimal React Server Components (RSC) bundler & library — and the Vercel AI SDK, this demo leverages RSCs to seamlessly integrate text with UI 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.
- Node.js 20+ installed on your local development machine.
- An OpenAI API key.
To install the dependencies, run:
npm install
Define the following environment variables, e.g., using direnv:
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
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
Open http://localhost:3000 in your browser.