You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
1
+
# Simple NextJS Example
2
2
3
-
## Getting Started
3
+
This project is an example that creates a simple NextJS web app that demonstrates streaming an LLM response from a route handler to a client component.
4
4
5
-
First, run the development server:
5
+
```sh
6
+
# install the dependencies (substrate)
7
+
npm install
6
8
7
-
```bash
8
-
npm run dev
9
-
# or
10
-
yarn dev
11
-
# or
12
-
pnpm dev
13
-
# or
14
-
bun dev
15
-
```
16
-
17
-
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18
-
19
-
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
9
+
# set your Substrate API Key
10
+
export SUBSTRATE_API_KEY=<your-api-key>
20
11
21
-
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22
-
23
-
## Learn More
12
+
# run the server
13
+
npm run dev
24
14
25
-
To learn more about Next.js, take a look at the following resources:
15
+
# view the page
16
+
open http://localhost:3000
17
+
```
26
18
27
-
-[Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28
-
-[Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
19
+
## About the project
29
20
30
-
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
21
+
### `app/quote/route.ts`
31
22
32
-
## Deploy on Vercel
23
+
This file contains the route handler used to fetch the LLM response from Substrate. We're using the route handler here so that we can produce an event-stream for our client code to consume.
33
24
34
-
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
25
+
### `app/Example.tsx`
35
26
36
-
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment)for more details.
27
+
This file contains our client component with a UI for fetching the stream from our route handler and rendering the stream chunks as they arrive.
0 commit comments