Skip to content
/ storybookgpt Public template
generated from ascorbic/daneel

StorybookGPT generates Stories based on your component code. Fork and customize it to your needs, then deploy to Netlify for free.

License

Notifications You must be signed in to change notification settings

kaelig/storybookgpt

Repository files navigation

StorybookGPT template

Create your own GPT-powered chat bot

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)

Step by step demo of StorybookGPT

Deploy to Netlify

Features

  • ⚡ 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

Getting started

  1. Sign up for an OpenAI account and get your API key
  2. Deploy to Netlify, pasting the API key when prompted
  3. Customize StorybookGPT
  4. Share your creation

Local development

  1. Clone your repository gh repo clone <your-username>/storybookgpt
  2. Install dependencies: npm install
  3. Run the bot locally: npm run dev

Customizing your bot

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.

Name

Edit your site title and description in src/App.tsx, src/index.html, src/routes/index.tsx.

Prompt

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.

Impala

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.

About

StorybookGPT generates Stories based on your component code. Fork and customize it to your needs, then deploy to Netlify for free.

Topics

Resources

License

Stars

Watchers

Forks

Languages