You can use this template to create your own StorybookGPT chat bot powered by OpenAI and the ChatGPT API. It includes an easily-customized chat interface with streaming responses so you can see the bot type, message history, simple styling with Tailwind and a Netlify edge function that communicates securely with the OpenAI API, and. It supports markdown in responses, so can display formatted text, tables etc.
Demo site (available to Netlify employees only, due to OpenAI costs)
- ⚡ deploy your StorybookGPT bot in less than 5 minutes
- 🚀 streaming responses powered by ChatGPT
- 💯 simple, high-performance chat interface
- 💰 This template is completely free for any use. Use free OpenAI credits to get started, and deploy your site for free to Netlify.
- ⚛️ easy to customize: built with React, TailwindCSS and TypeScript
- Sign up for an OpenAI account and get your API key
- Deploy to Netlify, pasting the API key when prompted
- Customize StorybookGPT
- Share your creation
- Clone your repository
gh repo clone <your-username>/storybookgpt - Install dependencies:
npm install - Run the bot locally:
npm run dev
This bot is preconfigured for Netlify's preferences when it comes to its stories formats, but each team has different preferences. For example, you may use Component Story Format 3.0 with vanilla JSX, whereas Netlify uses CSF 2.0 with TypeScript (see CSF 3.0 prompt.
Edit your site title and description in src/App.tsx, src/index.html, src/routes/index.tsx.
The prompt is what tells your bot who it is. It is here that you give the bot its mission, personality and rules. The most important thing to do is create your own prompt to follow your team's conventions.
The prompt is set in storybookgpt.ts.
The chat interface is an Impala app, built with React, so see the Impala docs for more information.
Original Daneel template Released under the MIT license. Free for any use. © Matt Kane and contributors 2023.