Create a landing page where users can directly try the plugin

Currently ChatGPT plugin model is in beta, and the plugin store has very limited capabilities. This limits our reach.

Work that needs to be done and proposed architecture:

[ ] Create a new directory under /web with a Next.js typescript app
[ ] Create a landing page with example diagrams generated by users.
[ ] Add an input box to accept diagram description
[ ] Create an endpoint in Next.js to handle submitted input from the page. For example the input is "Show me a diagram of airline expenses in the US in a pie chart"
[ ] On the server side of Next.js fetch manifest from showme.redstarplugin.com/.well-known/ai-plugin.json to get the plugin manifest
[ ] Construct the prompt for gpt-4 using the manifest + user input
[ ] Ask gpt-4 to generate the mermaid diagram source

[ ] With the result hit the /render endpoint using the same domain and passing mermaid and source query parameter with the mermaid.js diagram, example request using curl

curl --location --globoff 'https://showme.redstarplugin.com/render?mermaid=graph%20TB%250A%20%20A[%22Web%20Browser%22]%20--%20%22HTTP%20API%20Request%22%20--%3E%20B[%22Load%20Balancer%22]%250A%20%20B%20--%20%22HTTP%20Request%22%20--%3E%20C[%22Crossover%22]%250A%20%20style%20C%20fill%3A%252399cc99%250A%20%20C%20--%20%22Talks%20to%22%20--%3E%20D[%22Redis%22]%250A%20%20C%20--%20%22Talks%20to%22%20--%3E%20E[%22MySQL%22]%250A%20%20C%20--%20%22Downstream%20API%20Request%22%20--%3E%20F[%22Multiplex%22]%250A%20%20F%20--%20%22Returns%20Job%20ID%22%20--%3E%20C%250A%20%20C%20--%20%22Long%20Poll%20API%20Request%22%20--%3E%20G[%22Evaluator%22]%250A%20%20G%20--%20%22API%20Call%22%20--%3E%20F%250A%20%20G%20--%20%22API%20Call%22%20--%3E%20H[%22Result-Fetcher%22]%250A%20%20H%20--%20%22Downloads%20Results%22%20--%3E%20I[%22S3%20or%20GCP%20Cloud%20Buckets%22]%250A%20%20I%20--%20%22Results%20Stream%22%20--%3E%20G%250A%20%20G%20--%20%22Results%20Stream%22%20--%3E%20C%250A%20%20C%20--%20%22API%20Response%22%20--%3E%20B%250A%20%20B%20--%20%22API%20Response%22%20--%3E%20A%250A&source=landing-page'

[ ] Alternatively instead of hitting the /render you can use kroki.io to render the resulting diagram, this is what we do internally in the plugin https://kroki.io/#post-requests

bra1nDump / show-me-chatgpt-plugin

Create a landing page where users can directly try the plugin #4