readme

README.md

@@ -1,63 +1,81 @@
-# NxAiAssistant
+# OpenAI Assistant API
 
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
+## Introduction
 
-✨ **This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)** ✨
+This project demonstrates the integration of OpenAI's Assistant API into a React/Next.js application. The application showcases a chat interface where users can interact with the AI assistant. This demo serves as an example of how OpenAI's powerful AI models can be leveraged within a web application to create interactive and engaging user experiences.
 
+## Features
 
-## Start the app
+### Interactive Chat Interface
 
-To start the development server run `nx serve assistant`. Open your browser and navigate to http://localhost:4200/. Happy coding!
+Users can send queries and receive responses from the AI assistant in real-time.
 
+### Edge Function Integration
 
-## Generate code
+Utilizes Next.js API routes (Edge Functions) for server-side processing and interaction with OpenAI's Assistant API.
 
-If you happen to use Nx plugins, you can leverage code generators that might come with it.
+### Dynamic Message Display
 
-Run `nx list` to get a list of available plugins and whether they have generators. Then run `nx list <plugin-name>` to see what generators are available.
+Messages are dynamically displayed in a chat-like interface, with different alignments and styles for user and assistant messages.
 
-Learn more about [Nx generators on the docs](https://nx.dev/plugin-features/use-code-generators).
+### Real-Time Feedback
 
-## Running tasks
+Includes a loading spinner to indicate when the AI is processing a request.
 
-To execute tasks with Nx use the following syntax:
+## Technologies Used
 
-```
-nx <target> <project> <...options>
-```
+- Nx: For management of the monorepo.
+- React/Next.js: For the front-end interface and server-side logic.
+- OpenAI API: Specifically the Assistant API for generating responses based on user queries.
 
-You can also run multiple targets:
+## Setup and Installation
 
-```
-nx run-many -t <target1> <target2>
+### 01. Clone the Repository
+
+```bash
+ git clone [email protected]:mandarini/openai-assistant-demo.git
 ```
 
-..or add `-p` to filter specific projects
+### 02. Install Dependencies
 
+```bash
+pnpm install
 ```
-nx run-many -t <target1> <target2> -p <proj1> <proj2>
+
+### 03. Environment Variables
+
+1. Create a `.env` file in the `apps/assistant` directory.
+2. Add NX_OPENAI_KEY with your OpenAI API key.
+3. Add NX_ASSISTANT_ID with the ID of your OpenAI Assistant.
+
+## Run the Assistant Demo Application
+
+```bash
+npx nx serve assistant
 ```
 
-Targets can be defined in the `package.json` or `projects.json`. Learn more [in the docs](https://nx.dev/core-features/run-tasks).
+## Usage
 
-## Want better Editor Integration?
+1. Open the application in your browser.
+2. Type your Nx-related query in the input box and press 'Send' or hit Enter.
+3. View the AI assistant's response in the chat interface.
 
-Have a look at the [Nx Console extensions](https://nx.dev/nx-console). It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
+## Project Structure
 
-## Ready to deploy?
+- [`apps/assistant/app`](apps/assistant/app): Contains the React/Next.js pages including the main chat interface.
+- [`apps/assistant/pages/api/chat`](apps/assistant/pages/api/chat.ts): Includes the Edge Function for handling API requests and interactions with the OpenAI Assistant. Some of the reasons why we're using an edge function to handle the OpenAI calls is for security reasons (keep API key hidden) and to avoid CORS issues.
+- [`libs/utils`](libs/utils): Utility functions for API interactions and error handling.
 
-Just run `nx build demoapp` to build the application. The build artifacts will be stored in the `dist/` directory, ready to be deployed.
+## Limitations and Future Work
 
-## Set up CI!
+- Text Streaming is not yet supported by the API so the responses are super slow
+- We should show sources for the AI responses
+- Improvement in error handling and user feedback mechanisms should be considered
 
-Nx comes with local caching already built-in (check your `nx.json`). On CI you might want to go a step further.
+## Contributing
 
-- [Set up remote caching](https://nx.dev/core-features/share-your-cache)
-- [Set up task distribution across multiple machines](https://nx.dev/nx-cloud/features/distribute-task-execution)
-- [Learn more how to setup CI](https://nx.dev/recipes/ci)
+Contributions to enhance this demo are welcome. Please follow the standard fork, branch, and pull request workflow.
 
-## Connect with us!
+## License
 
-- [Join the community](https://nx.dev/community)
-- [Subscribe to the Nx Youtube Channel](https://www.youtube.com/@nxdevtools)
-- [Follow us on Twitter](https://twitter.com/nxdevtools)
+MIT

vercel.json

@@ -4,5 +4,10 @@
   "devCommand": "npx nx serve assistant --prod",
   "installCommand": "npm install",
   "framework": "nextjs",
-  "outputDirectory": "./dist/apps/assistant/.next"
+  "outputDirectory": "./dist/apps/assistant/.next",
+  "functions": {
+    "pages/api/**": {
+      "maxDuration": 120
+    }
+  }
 }