Table of Contents

1. Challenge

   Introduction

   Welcome to the Guided: Building a Full-stack AI-powered Application with React and Python Lab

   In this hands-on lab, you'll build a full-stack web application that integrates generative AI using tools like React, FastAPI, LangChain, and LiteLLM. The app you're building will serve as a Preschool Activity Generator—a chatbot designed to help users discover engaging preschool activities tailored for a specific age group and interest, such as "a 4-year-old interested in dinosaurs".

   You'll create a system that allows a user to type in a natural language prompt, send it to a backend AI service, and receive a creative activity idea in return—all in real time.

   You'll build the frontend and backend of the application from scaffolded starter files and progressively connect them to form a working full-stack system powered by a local AI model.

   Lab Step Overview

   
   ### Step 1: Introduction to AI Integration in Full-stack Apps

   You'll explore why and how AI is integrated into web applications. You'll get a high-level understanding of the architecture, including the roles of the React frontend, the FastAPI backend, and the AI model. You'll also learn how to start both services, and why the backend will error until Step 3 is complete.

   
   ### Step 2: Model Initialization

   In this step, you'll import your LLM model using LangChain's ChatOpenAI class. You'll create an instance of the model and implement a get_ai_response function to return generated responses for given prompts.

   
   ### Step 3: Python FastAPI AI Endpoint

   You'll build the /analyze endpoint using FastAPI. You'll configure CORS so your frontend can access it, implement the route to receive a prompt from the frontend, call the AI model, and return the response in JSON format.

   
   ### Step 4: Sending User Input From React UI to AI Model

   You'll complete the sendPrompt function in your api.js file using an axios POST request. You’ll then update the App component to handle the form submission, send the prompt to the backend, and update the response state based on the returned result.

   
   ### Step 5: Displaying AI-powered Results in the UI

   You'll update the App component to show a loading indicator while waiting for a response, and render the AI-generated content once it arrives.

   
   ### Step 6: Error Handling and Debugging Tips You’ll add error handling to both frontend and backend. In the backend, you’ll wrap the call to the model in a `try`/`except` block and return an error message if something fails. On the frontend, you’ll handle possible errors from Axios and show the user either the AI response or a meaningful error message.

   You'll also learn how to integrate and interact with modern AI services in full-stack applications by using LiteLLM, LangChain, and local chat models. Each technology plays a specific role:

   • LiteLLM: A drop-in API for calling local or hosted LLMs with an OpenAI-compatible interface.
   • Langchain: A framework that simplifies building AI-powered apps with LLMs.
   • Chat Models: LLMs designed for conversational or instruction-following tasks, such as answering questions or generating responses based on prompts.

   ---

   Scenario Overview

   You are building a chatbot that helps parents, teachers, or caregivers discover fun and educational preschool activities. The app accepts prompts like:

   Generate a fun preschool activity for a 4-year-old interested in dinosaurs.
   

   This prompt is sent from the frontend to the backend, where it's processed by an AI model. The AI returns a suggested activity, which is then displayed to the user on the page.

   ---

   How to Start the Project

   To build and run this full-stack AI-powered application, you'll need to start both the frontend and backend services. You will use two Terminal tabs—one for each service—and a third optional tab to check that services are running.

   1. Start the Backend API (Terminal Tab 1)

   1. Navigate to the backend directory:

      	cd backend
      

   2. Start the FastAPI server:

      	uvicorn main:app --reload
      

   Note: You won’t be able to start the backend without errors until after you complete Task 2 in Step 3. This is because the backend requires an app instance and a model definition that you'll create during the lab.

   2. Start the Frontend React App (Terminal Tab 2)

   1. Navigate to the frontend directory:

      	cd frontend
      

   2. Start the development server:

      	npm run dev
      

   This will start the React frontend at: http://localhost:3000

   You can open this URL in the Web Browser tab. When it's running, you'll see a page with the header:

   Preschool Activity Generator
   

   3. Check Supporting Services (Terminal Tab 3, optional)

   In another Terminal, use these commands to check that your local AI infrastructure is running:

   Check that the Ollama LLM is running:

   curl http://localhost:11434
   

   Check that LiteLLM is running and healthy:

   curl http://localhost:4000/health
   

   ---

   After completing Step 3 in the lab, your backend will be fully functional. At that point, you can test the AI pipeline end-to-end by sending a prompt using curl:

   curl -X POST http://localhost:8000/analyze 
        -H "Content-Type: application/json" 
        -d '{"prompt": "Generate a fun preschool activity for a 4-year-old interested in dinosaurs."}'
   

   This will return a JSON response from the AI with an activity suggestion.

   ---

   What You’ll Learn

   • How to structure a full-stack app using React and FastAPI
   • How to integrate a generative AI model using LangChain and LiteLLM
   • How to send and receive data between frontend and backend using JSON
   • How to create an API endpoint that processes prompts and returns AI-generated responses
   • How to build a React UI that sends user input and displays AI-powered suggestions

   ---

   Technologies Used

   • React – For building the frontend interface
   • FastAPI – For building the backend API in Python
   • Langchain – For abstracting AI model interactions
   • LiteLLM – For serving and proxying local or hosted language models
   • Chat Models – For generating intelligent responses based on user input

   ---

   Prerequisites

   You should have basic familiarity with:

   • React components and state
   • Making HTTP requests (e.g., using axios or fetch)
   • Python functions and modules
   • JSON and REST APIs

   No prior experience with LangChain or LiteLLM is required—this lab will introduce you to those tools step by step.

   ---

   You're now ready to begin building your full-stack, AI-powered application!

   Tip: If you need assistance at any point, you can refer to the solution directory. It contains subdirectories for each of the steps with example implementations.

2. Challenge

   Model Initialization in Python

   Step 2: Model Initialization in Python

   In this step, you'll begin connecting your backend service to an actual large language model (LLM). This forms the core of your AI-powered chatbot, which will generate preschool activity ideas based on user input.

   You’ll be working in the backend/model.py file to initialize the model and implement the logic that handles AI responses.

   Why It Matters

   This setup is crucial because it connects your backend to the AI that generates the preschool activity suggestions.

   ---

   2.1 Initialize get_ai_response Function

   In this task, you will start setting up the get_ai_response function inside backend/model.py.

   Currently, the function is just a placeholder:

   def get_ai_response(prompt):
       return
   

   Update the file by doing the following:

   1. Import ChatOpenAI from langchain_openai.

   Keep the get_ai_response function defined but leave its implementation empty for now.

   Solution

   from langchain_openai import ChatOpenAI
   
   
   def get_ai_response(prompt):
       return
   

   ## 2.2 Create an Instance of the Chat Model

   Now that you've imported ChatOpenAI, it's time to initialize the model you'll use to generate responses.

   In backend/model.py, make the following update:

   1. Create a variable named model.
   2. Set it equal to a new instance of ChatOpenAI.
   3. Use the following parameters in the constructor:
      • model="gpt-4o"
      • base_url="http://0.0.0.0:4000"
      • api_key="test-key"

   This sets up your connection to the local LiteLLM server.

   Why This Matters

   This model instance is your application's interface to the AI. You'll use it to send prompts and receive generated responses.

   Solution

   from langchain_openai import ChatOpenAI
   
   model = ChatOpenAI(model="gpt-4o", base_url="http://0.0.0.0:4000", api_key="test-key")
   
   
   def get_ai_response(prompt):
       return
   

   ## 2.3 Complete the AI Response Function

   Now that your model is initialized, it’s time to finish the get_ai_response function so it actually sends a prompt to the AI and returns the response.

   In backend/model.py, update the get_ai_response function:

   1. Use the model.invoke(prompt) method to send the prompt to the model.
   2. Store the result in a variable named response.
   3. Return response.content—this contains the text generated by the AI.

   Why This Matters

   This function is now fully wired to interact with the LLM. Whenever you call `get_ai_response` with a prompt, the model will return a relevant response that can be displayed in your UI.

   Solution

   from langchain_openai import ChatOpenAI
   
   model = ChatOpenAI(model="gpt-4o", base_url="http://0.0.0.0:4000", api_key="test-key")
   
   
   def get_ai_response(prompt):
       response = model.invoke(prompt)
       return response.content
   

3. Challenge

   Python FastAPI AI Endpoint

   Step 3: Python FastAPI AI Endpoint

   In this step, you'll build a backend API using FastAPI that acts as a bridge between your frontend app and the AI model.

   You'll start with an empty main.py file and incrementally build up a fully functional endpoint. This endpoint will accept a prompt from the frontend, pass it to the language model for analysis, and return the generated response.

   Here’s what you’ll accomplish across the next few tasks:

   1. Import FastAPI, CORS middleware, and your AI function.
   2. Initialize the FastAPI app.
   3. Configure CORS so your React frontend can talk to your backend.
   4. Create a POST route at /analyze to accept prompts.
   5. Parse the incoming request body.
   6. Pass the prompt to your AI model and return the result.

   By the end of Step 3, you'll have a working backend that accepts requests and generates preschool activity ideas using your local LLM.

   Note: In the Code Labs environment, your request to the AI model may sometimes take longer than expected or even timeout. If that happens, try again—your local model may just be running slowly.

   3.1 Import Dependencies for the API

   In this step, you'll begin building your FastAPI backend by importing the necessary libraries and functions.

   In the empty backend/main.py file, add the following import statements:

   1. Import FastAPI and Request from fastapi—these are needed to create the API and handle incoming requests.
   2. Import CORSMiddleware from fastapi.middleware.cors—this will allow your React frontend to communicate with the backend.
   3. Import the get_ai_response function from model—this connects your API to the AI model you initialized earlier.

   Why This Matters

   These imports set up everything you need to start building the FastAPI app, connect it to your AI model, and allow communication with your frontend.

   Solution

   from fastapi import FastAPI, Request
   from fastapi.middleware.cors import CORSMiddleware
   from model import get_ai_response
   

   ## 3.2 Initialize the FastAPI Application

   Now that you've imported your dependencies, the next step is to create an instance of the FastAPI application.

   1. In backend/main.py, create an instance of the FastAPI class and assign it to a variable named app.

   Why This Matters

   This app instance is what FastAPI uses to register routes, middlewares, and other configurations. It becomes the entry point for your backend service.

   Solution

   from fastapi import FastAPI, Request
   from fastapi.middleware.cors import CORSMiddleware
   from model import get_ai_response
   
   app = FastAPI()
   

   Note: At this point your backend should compile without errors. ## 3.3 Add CORS Middleware to Allow Frontend Requests

   Now that you’ve initialized the FastAPI app, the next step is to allow requests from the frontend to the backend. This is done by adding Cross-Origin Resource Sharing (CORS) middleware.

   In backend/main.py, make the following changes:

   1. After creating the FastAPI app instance, call app.add_middleware(...).
   2. Use CORSMiddleware to configure cross-origin access.
   3. Set allow_origins=["*"] to accept requests from any domain (suitable for development).
   4. Set allow_methods=["*"] and allow_headers=["*"] to allow all HTTP methods and headers.

   Why This Matters

   This setup allows the frontend (which may be running on a different origin, such as `http://localhost:3000`) to make requests to your backend without being blocked by the browser's same-origin policy. This configuration is essential for development in a full-stack environment.

   Solution

   from fastapi import FastAPI, Request
   from fastapi.middleware.cors import CORSMiddleware
   from model import get_ai_response
   
   app = FastAPI()
   
   app.add_middleware(
       CORSMiddleware,
       allow_origins=["*"],
       allow_methods=["*"],
       allow_headers=["*"],
   )
   

   ## 3.4 Create the Analyze Endpoint

   In this step, you’ll define your first backend endpoint. This endpoint will handle incoming POST requests from the frontend and return a basic response.

   In backend/main.py, do the following:

   1. Add a new route using the @app.post("/analyze") decorator.
   2. Define an async function called analyze that takes a Request object as input.
   3. For now, just return a hardcoded JSON response with an empty result.

   Why This Matters

   This defines an HTTP `POST` endpoint at `/analyze`. When the frontend sends a prompt to this URL, FastAPI calls `analyze` function. For now, it just returns a dummy response, but you’ll add the actual AI logic next.

   Solution

   from fastapi import FastAPI, Request
   from fastapi.middleware.cors import CORSMiddleware
   from model import get_ai_response
   
   app = FastAPI()
   
   app.add_middleware(
       CORSMiddleware,
       allow_origins=["*"],
       allow_methods=["*"],
       allow_headers=["*"],
   )
   
   
   @app.post("/analyze")
   async def analyze(request: Request):
       return {"result": ""}
   

   ## 3.5 Parse the Request Body

   Now that you’ve created the /analyze endpoint, it’s time to extract the JSON data sent from the frontend.

   In backend/main.py, do the following:

   1. Inside the analyze function, use await request.json() to read and parse the incoming JSON request body.
   2. Store the result in a variable named body.
   3. Return the same hardcoded response for now.

   Why This Matters

   When the frontend sends a `POST` request, the prompt is included in the request body as JSON. Using `await request.json()` allows you to access that data and store it for later use.

   Solution

   from fastapi import FastAPI, Request
   from fastapi.middleware.cors import CORSMiddleware
   from model import get_ai_response
   
   app = FastAPI()
   
   app.add_middleware(
       CORSMiddleware,
       allow_origins=["*"],
       allow_methods=["*"],
       allow_headers=["*"],
   )
   
   
   @app.post("/analyze")
   async def analyze(request: Request):
       body = await request.json()
       return {"result": ""}
   

   ## 3.6 Call the AI Model

   Now that you're receiving the prompt from the frontend, it's time to pass it to the AI model and return the generated response.

   In backend/main.py, do the following:

   1. Extract the "prompt" field from the parsed request body.
   2. Pass the prompt to the get_ai_response function.
   3. Store the result in a variable called response.
   4. Return a JSON object with a result field set to the response variable: return {"result": response}

   Why This Matters

   This change connects the frontend input to the AI model response, completing the flow: user input → backend → LLM → frontend response.

   Solution

   from fastapi import FastAPI, Request
   from fastapi.middleware.cors import CORSMiddleware
   from model import get_ai_response
   
   app = FastAPI()
   
   app.add_middleware(
       CORSMiddleware,
       allow_origins=["*"],
       allow_methods=["*"],
       allow_headers=["*"],
   )
   
   
   @app.post("/analyze")
   async def analyze(request: Request):
       body = await request.json()
       prompt = body.get("prompt")
       response = get_ai_response(prompt)
       return {"result": response}
   

4. Challenge

   Sending User Input From React UI to AI Model

   Step 4: Sending User Input From React UI to AI Model

   In this step, you will connect the frontend React application with your backend AI model. You will start by implementing the API call to send user input (the prompt) from the React UI to the FastAPI backend. Then, you will update the React component to handle user input through a form, send that input to the backend, and finally display the AI model’s response in the UI.

   By the end of this step, you’ll have a functional interface where users can submit prompts and see generated results in real time.

   4.1 Implement the sendPrompt Function in frontend/api.js

   Update the sendPrompt function to send the user’s prompt to your backend API and return the response.

   In frontend/src/api.js, make the following changes:

   1. Use axios.post to send a POST request to /api/analyze.
   2. Pass the prompt in the request body as JSON.
   3. Include 'Content-Type': 'application/json' header.
   4. Await the response and return the response data.

   Solution

   import axios from "axios";
   
   export async function sendPrompt(prompt) {
       const res = await axios.post(
           "/api/analyze",
           { prompt },
           {
               headers: {
                   'Content-Type': 'application/json',
               },
           }
       );
       return res.data;
   }
   

   Note: The POST request is made to /api/analyze because the Code Labs environment requires all requests to use the same port. The /api path is proxied to http://localhost:8000, your backend server. This proxy setup is configured in frontend/vite.config.js. ## 4.2 Add Response State to React Component

   Update frontend/src/App.jsx to add state for storing the AI response.

   Make the following changes:

   1. Add a new state variable response initialized as an empty string using useState.

   Solution

   import { useState } from 'react';
   import { sendPrompt } from './api';
   
   function App() {
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [response, setResponse] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       setLoading(true);
       setLoading(false);
     };
   
     return (
       <div style={{ padding: "2rem" }}>
         <h1>Preschool Activity Generator</h1>
       </div>
     );
   }
   
   export default App;
   

   ## 4.3 Update `handleSubmit` to Call API and Store Response

   Modify the handleSubmit function in frontend/src/App.jsx to:

   1. Leave e.preventDefault(); at the start of the function.
   2. Set loading to true at the start of the function.
   3. Call sendPrompt with the current input value and await the result.
   4. Set loading to false after the API call completes.
   5. Set the response state to the returned result.

   Solution

   import { useState } from 'react';
   import { sendPrompt } from './api';
   
   function App() {
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [response, setResponse] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       setLoading(true);
       const res = await sendPrompt(input);
       setLoading(false);
       setResponse(res.result);
     };
   
     return (
       <div style={{ padding: "2rem" }}>
         <h1>Preschool Activity Generator</h1>
       </div>
     );
   }
   
   export default App;
   

   ## 4.4 Add Input Form to the UI

   Enhance the return statement in your App component by adding a form with:

   1. An <input> field to capture user input:

      • Set type to "text".
      • Set the placeholder to "Enter age and interest (e.g. 3 years old, animals)".
      • Bind value to the input state.
      • Use an onChange handler to update the input state.

   2. A submit <button> to trigger the form submission.

   3. Attach the handleSubmit function to the form’s onSubmit event.

   Solution

   import { useState } from 'react';
   import { sendPrompt } from './api';
   
   function App() {
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [response, setResponse] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       setLoading(true);
       const res = await sendPrompt(input);
       setLoading(false);
       setResponse(res.result);
     };
   
     return (
       <div style={{ padding: "2rem" }}>
         <h1>Preschool Activity Generator</h1>
         <form onSubmit={handleSubmit}>
           <input
             type="text"
             placeholder="Enter age and interest (e.g. 3 years old, animals)"
             value={input}
             onChange={(e) => setInput(e.target.value)}
             style={{ width: "60%" }}
           />
           <button type="submit">Submit</button>
         </form>
       </div>
     );
   }
   
   export default App;
   

   Note: At this point, when you visit http://localhost:3000 in the Web Browser tab, you’ll see a form. Submitting the form will trigger a request to your backend, which you can verify in the browser’s network tab. In the next step, you’ll learn how to display the results from that API request.

5. Challenge

   Displaying AI-powered Results in the UI

   Step 5: Displaying AI-powered Results in the UI

   In this step, you will enhance the React UI to provide feedback while waiting for the AI response and display the generated results once available. This improves user experience by showing a loading indicator during the request and presenting the AI-powered activity suggestions clearly.

   5.1 Display Loading State and Response in the UI

   Update the React component to provide feedback while waiting for the AI model's response and display the response once it's received.

   Make the following changes to frontend/src/App.jsx:

   1. Inside the return statement, below the form, add a conditional rendering that:
      • Shows the text Loading... when the loading state is true
      • Otherwise, displays the response text

   This will improve the user experience by showing a loading indicator while the backend processes the prompt and then displaying the generated activity suggestion.

   Solution

   import { useState } from 'react';
   import { sendPrompt } from './api';
   
   function App() {
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [response, setResponse] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       setLoading(true);
       const res = await sendPrompt(input);
       setLoading(false);
       setResponse(res.result);
     };
   
     return (
       <div style={{ padding: "2rem" }}>
         <h1>Preschool Activity Generator</h1>
         <form onSubmit={handleSubmit}>
           <input
             type="text"
             placeholder="Enter age and interest (e.g. 3 years old, animals)"
             value={input}
             onChange={(e) => setInput(e.target.value)}
             style={{ width: "60%" }}
           />
           <button type="submit">Submit</button>
         </form>
         {loading ? <p>Loading...</p> : <p>{response}</p>}
       </div>
     );
   }
   
   export default App;
   

   Note: Now, when you submit the form at http://localhost:3000, you’ll see a loading state while waiting for the API response. Once the API responds, the AI-generated content will be displayed.

6. Challenge

   Error Handling and Debugging Tips

   Step 6: Error Handling and Debugging Tips

   In this step, you'll enhance the robustness of your application by adding proper error handling both in the backend and frontend. This ensures that if something goes wrong—whether due to network issues, unexpected inputs, or server errors—your app can gracefully handle the situation and inform the user appropriately.

   You will complete the following:

   • Update the backend API endpoint to catch exceptions and return meaningful error messages.
   • Modify the frontend API call to handle request errors without crashing.
   • Adjust the React UI to display any errors returned from the backend, improving user feedback and debugging experience.

   These improvements will help make your AI-powered app more reliable and user-friendly. ## 6.1 Add Error Handling to the /analyze Endpoint

   Enhance the /analyze endpoint in backend/main.py by adding basic error handling. This will help gracefully catch and return any errors that occur when calling the AI model.

   Make the following changes:

   1. Add a comment above the CORS middleware setup explaining it is for the React frontend.
   2. Wrap the call to get_ai_response(prompt) inside a try block.
   3. Return the AI response inside the try block as before.
   4. Add an except block to catch exceptions and return a JSON with an "error" key and the exception message as the value.

   Solution

   from fastapi import FastAPI, Request
   from fastapi.middleware.cors import CORSMiddleware
   from model import get_ai_response
   
   app = FastAPI()
   
   # CORS for React frontend
   app.add_middleware(
       CORSMiddleware,
       allow_origins=["*"],
       allow_methods=["*"],
       allow_headers=["*"],
   )
   
   
   @app.post("/analyze")
   async def analyze(request: Request):
       body = await request.json()
       prompt = body.get("prompt")
       try:
           response = get_ai_response(prompt)
           return {"result": response}
       except Exception as e:
           return {"error": str(e)}
   

   ## 6.2 Add Error Handling to `sendPrompt` API Call

   Update the sendPrompt function in frontend/src/api.js to handle possible errors when making the POST request to the backend. This will ensure your frontend gracefully handles failures like network issues or server errors.

   Make the following changes:

   1. Wrap the axios.post call in a try block.
   2. Return the response data as before inside the try.
   3. Add a catch block to catch any errors.
   4. Return an object containing an error key with the error message.

   Solution

   import axios from "axios";
   
   export async function sendPrompt(prompt) {
     try {
       const res = await axios.post(
           "/api/analyze",
           { prompt },
           {
               headers: {
                 'Content-Type': 'application/json',
               },
           }
       );
       return res.data;
     } catch (error) {
       return { error: error.message };
     }
   }
   

   ## 6.3 Display Errors Returned from the Backend in the UI

   Update the handleSubmit function in frontend/src/App.jsx so that the UI can display error messages returned from the backend.

   Make the following changes:

   1. When setting the response state, check if res.result exists.
   2. If res.result is falsy, display res.error instead.
   3. This allows error messages from the backend to be shown to the user.

   Solution

   import { useState } from 'react';
   import { sendPrompt } from './api';
   
   function App() {
     const [input, setInput] = useState('');
     const [loading, setLoading] = useState(false);
     const [response, setResponse] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       setLoading(true);
       const res = await sendPrompt(input);
       setLoading(false);
       setResponse(res.result || res.error);
     };
   
     return (
       <div style={{ padding: "2rem" }}>
         <h1>Preschool Activity Generator</h1>
         <form onSubmit={handleSubmit}>
           <input
             type="text"
             placeholder="Enter age and interest (e.g. 3 years old, animals)"
             value={input}
             onChange={(e) => setInput(e.target.value)}
             style={{ width: "60%" }}
           />
           <button type="submit">Submit</button>
         </form>
         {loading ? <p>Loading...</p> : <p>{response}</p>}
       </div>
     );
   }
   
   export default App;
   

7. Challenge

   Conclusion

   Conclusion

   Congratulations on completing the lab!

   You have successfully built a full-stack AI-powered application, integrating a Python FastAPI backend with a React frontend. Along the way, you:

   • Initialized and used a local LLM model with LangChain’s ChatOpenAI
   • Created a FastAPI endpoint to serve AI responses with proper request handling
   • Connected the React frontend to the backend API, sending user input dynamically
   • Displayed AI-generated results in the UI with loading states and user feedback
   • Implemented error handling and debugging strategies for a more robust app

   Together, these skills provide a solid foundation for building modern, interactive AI applications that span backend and frontend technologies.

   Now that you’ve seen how to connect user interfaces to AI models seamlessly, consider expanding your app with additional features like user authentication, more advanced prompts, or richer UI components. Happy coding!