chore: update demo readmes (#189)

Author: marcusschiesser

demo/browser/README.md

@@ -1,54 +1,55 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-});
+# Browser Workflow Demo
+
+Run LlamaIndex workflows directly in the browser with React and Vite.
+This demo renders workflow output and showcases the streaming APIs without any server component.
+
+## Highlights
+- Fully client-side workflow execution with the `WorkflowContext` stream API
+- Event chaining example using `startEvent` and `stopEvent` to emit UI updates
+
+## Prerequisites
+- Node.js 20+
+- npm, pnpm, or yarn (examples below use npm)
+
+## Getting Started
+```bash
+npm install
+npm run dev
+```
+The dev server starts on http://localhost:5173 by default.
+
+To create a production build, run:
+```bash
+npm run build
+npm run preview
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from "eslint-plugin-react-x";
-import reactDom from "eslint-plugin-react-dom";
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    "react-x": reactX,
-    "react-dom": reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs["recommended-typescript"].rules,
-    ...reactDom.configs.recommended.rules,
-  },
+## How It Works
+The demo defines two events and a simple workflow in `src/App.tsx`:
+```ts
+const startEvent = workflowEvent();
+const stopEvent = workflowEvent<string>();
+
+workflow.handle([startEvent], (context) => {
+  setTimeout(() => {
+    context.sendEvent(stopEvent.with("Hello, World!"));
+  }, 1000);
 });
+
+const context = workflow.createContext();
+context.sendEvent(startEvent.with());
+const events = await context.stream.until(stopEvent).toArray();
 ```
+- `startEvent` triggers when the component loads.
+- The handler fires an async side effect, then emits `stopEvent`.
+- `context.stream.until(stopEvent)` collects the events and the component renders the payload.
+
+## Customize the Workflow
+- Edit `src/App.tsx` to add additional events, stateful middleware, or validation.
+- Import React hooks to stream multiple updates or feed results into components.
+
+## Project Structure
+- `src/` – React components and workflow definition
+- `public/` – Static assets served by Vite
+- `vite.config.ts` – Vite configuration with the React SWC plugin
+

demo/next/README.md

@@ -1,36 +1,57 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
+# Next.js AI News Report Demo
+
+Generate downloadable news briefs with a server-side LlamaIndex workflow. This Next.js app orchestrates OpenAI web search, report writing, and PDF conversion 
+and surfaces the results in a polished Tailwind UI.
+
+## Highlights
+- Multi-stage workflow (`userInputEvent → webSearchEvent → createReportEvent → finalResponseEvent`) 
+- OpenAI Responses API with Zod parsing for query validation and report generation
+- Server-side PDF rendering via Puppeteer with instant preview and download links
+- Client UI built with Next.js App Router, Radix UI primitives, and Tailwind utilities
+
+## Requirements
+- Node.js 20+
+- `OPENAI_API_KEY` available to the server (set in `.env.local`)
+- Chrome-compatible environment for Puppeteer PDF rendering (works locally by default)
+
+## Setup
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+2. Create `.env.local` in this directory:
+   ```bash
+   echo "OPENAI_API_KEY=your-key" > .env.local
+   ```
+
+## Run the Demo
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
+Visit http://localhost:3000 to access the News Report Generator.
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
+For production builds:
+```bash
+npm run build
+npm start
+```
 
-To learn more about Next.js, take a look at the following resources:
+## Workflow Overview
+Core orchestration lives in `src/utils/ai-workflow.ts`:
+- `userInputEvent` validates the search request with `evaluateQueryAndEnhance`
+- `webSearchEvent` calls OpenAI's web search tool to gather context
+- `createReportEvent` composes a markdown report with title/content fields
+- `finalResponseEvent` returns either a refusal message or the generated PDF path
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+The route `src/app/api/report/route.ts` runs the workflow and returns the output path. A follow-up `POST /api/download` route streams the PDF back to the client.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## UI Flow
+`src/app/page.tsx` collects the query, tracks workflow status, and renders results. The `FileDisplay` component provides PDF preview and download controls once a report is available.
 
-## Deploy on Vercel
+Generated PDFs are stored in `public/outputs/pdfs`. Files served from `/outputs/pdfs/...` are accessible directly in the browser and through the download endpoint.
 
-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.
+## Customizing
+- Extend the workflow with additional events (e.g., fact checking) or middleware
+- Adjust PDF styling in `src/utils/pdf-conversion.ts`
+- Update UI components under `src/components` for different branding or layouts
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.