Deploy to AWS - Githubissues

nagendrakumar02 commented 4 months ago

I am planning to deploy this to AWS and need a high-level architecture diagram to guide the backend deployment for internal use. Is there such a diagram available?

bonk1t commented 4 months ago

Asked ChatGPT to draw such a diagram.

To create a high-level diagram of the AI in Hand Platform based on the repository, we can break down the main components and their interactions. Here’s a step-by-step approach:

Frontend:
- Built using React.
- Provides a user-friendly interface.
- Utilizes Gatsby for setup, TailwindCSS for styling, and Ant Design for UI components.
- Communicates with the backend via API and WebSocket for real-time interactions.
- Uses Firebase Authentication for user management.
Backend:
- Built with FastAPI.
- Manages agencies, agents, skills, sessions, and user variables.
- Persists configurations using Google Firestore.
- Exposes RESTful API endpoints.
- WebSocket for real-time updates.
Database:
- Google Firestore for storing configurations and state.
Authentication:
- Firebase Authentication for user authentication and security.
Deployment:
- Backend accessible at http://localhost:8000 in development.
- Frontend accessible at http://localhost:3000 in development.

High-Level Diagram

         +-------------+            +-------------+
         |  Frontend   |            |  Backend    |
         | (React,     |<---------->| (FastAPI)   |
         |  Gatsby,    | API &      |             |
         |  Tailwind,  | WebSocket  |             |
         |  Ant Design)|            |             |
         +-------------+            +-------------+
                 |                          |
                 |                          |
          +-------------+           +--------------+
          |  Firebase   |<--------->|  Firestore   |
          |  Auth       |           |  Database    |
          +-------------+           +--------------+

Explanation

Frontend:
- Implements user interfaces and interactions.
- Manages state and components with React.
- Styled with TailwindCSS and Ant Design.
Backend:
- Handles API requests and business logic.
- Manages AI agents, configurations, and sessions.
- Provides real-time updates via WebSocket.
Database:
- Firestore stores configurations, session data, and other persistent state.
Authentication:
- Firebase Authentication secures the platform and manages user identities.

If you need a detailed diagram or further information on specific parts, let me know!

nagendrakumar02 commented 4 months ago

Thank you so much!

From: Nick Bobrowski @.> Date: Tuesday, May 28, 2024 at 7:08 PM To: AI-in-Hand/platform @.> Cc: Nagendra Dattatreya @.>, Author @.> Subject: [EXTERNAL] Re: [AI-in-Hand/platform] Deploy to AWS (Issue #127)

Asked ChatGPT to draw such a diagram.

To create a high-level diagram of the AI in Hand Platform based on the repository, we can break down the main components and their interactions. Here’s a step-by-step approach:

Frontend:
- Built using React.
- Provides a user-friendly interface.
- Utilizes Gatsby for setup, TailwindCSS for styling, and Ant Design for UI components.
- Communicates with the backend via API and WebSocket for real-time interactions.
- Uses Firebase Authentication for user management.
Backend:
- Built with FastAPI.
- Manages agencies, agents, skills, sessions, and user variables.
- Persists configurations using Google Firestore.
- Exposes RESTful API endpoints.
- WebSocket for real-time updates.
Database:
- Google Firestore for storing configurations and state.
Authentication:
- Firebase Authentication for user authentication and security.
Deployment:
- Backend accessible at http://localhost:8000 https://urldefense.proofpoint.com/v2/url?u=http-3A__localhost-3A8000&d=DwQFaQ&c=KzuoINoV_Q8QgPnRTe59HA&r=smX41hyei94hqTjgtiPdn0ohy9HieX4ERhdeZg1eYx4&m=tbbhVBlegpe--R1v9gik4gPvTw2fy6EVgziUKHcAn9CcQj6lcQY2RBlKrOv4fegE&s=bVEr9Dj7lfcUyLPNcbL0dfg8IRRoniPtdX6HmGEpRxc&e= in development.
- Frontend accessible at http://localhost:3000 https://urldefense.proofpoint.com/v2/url?u=http-3A__localhost-3A3000&d=DwQFaQ&c=KzuoINoV_Q8QgPnRTe59HA&r=smX41hyei94hqTjgtiPdn0ohy9HieX4ERhdeZg1eYx4&m=tbbhVBlegpe--R1v9gik4gPvTw2fy6EVgziUKHcAn9CcQj6lcQY2RBlKrOv4fegE&s=fMTmutaZFfuCN2RE5Ef83k9fO7_5v60o4-V42A2PKUA&e= in development.

High-Level Diagram

     +-------------+            +-------------+

     |  Frontend   |            |  Backend    |

     | (React,     |<---------->| (FastAPI)   |

     |  Gatsby,    | API &      |             |

     |  Tailwind,  | WebSocket  |             |

     |  Ant Design)|            |             |

     +-------------+            +-------------+

             |                          |

             |                          |

      +-------------+           +--------------+

      |  Firebase   |<--------->|  Firestore   |

      |  Auth       |           |  Database    |

      +-------------+           +--------------+

Explanation

Frontend:
- Implements user interfaces and interactions.
- Manages state and components with React.
- Styled with TailwindCSS and Ant Design.
Backend:
- Handles API requests and business logic.
- Manages AI agents, configurations, and sessions.
- Provides real-time updates via WebSocket.
Database:
- Firestore stores configurations, session data, and other persistent state.
Authentication:
- Firebase Authentication secures the platform and manages user identities.

If you need a detailed diagram or further information on specific parts, let me know!

— Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_AI-2Din-2DHand_platform_issues_127-23issuecomment-2D2136247433&d=DwMFaQ&c=KzuoINoV_Q8QgPnRTe59HA&r=smX41hyei94hqTjgtiPdn0ohy9HieX4ERhdeZg1eYx4&m=tbbhVBlegpe--R1v9gik4gPvTw2fy6EVgziUKHcAn9CcQj6lcQY2RBlKrOv4fegE&s=Hsa0TZC2DZyIYShhIdr_x9inKRfx5e4g-ahsLhsZ7V8&e=, or unsubscribehttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AY4N7ZO636FK6N7C3A3J2STZEUE7VAVCNFSM6AAAAABINAX56WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZWGI2DONBTGM&d=DwMFaQ&c=KzuoINoV_Q8QgPnRTe59HA&r=smX41hyei94hqTjgtiPdn0ohy9HieX4ERhdeZg1eYx4&m=tbbhVBlegpe--R1v9gik4gPvTw2fy6EVgziUKHcAn9CcQj6lcQY2RBlKrOv4fegE&s=zFm0t4CjH6IB3nATiolT6DFWP4A3ItMuzZzLhW2gsMY&e=. You are receiving this because you authored the thread.Message ID: @.***>

This message may contain confidential information and is intended only for the addressee. If you received this message in error, you are hereby notified that any use, dissemination, distribution or reproduction of this communication, or its content, is prohibited. If you have received this message in error, please advise the sender and delete this email.

nagendrakumar02 commented 4 months ago

One more question: Where is the code for the widget in the front-end stored? Is it located in a different repository?

bonk1t commented 4 months ago

One more question: Where is the code for the widget in the front-end stored? Is it located in a different repository?

Yeah, the code of the widget is not available.

bonk1t / agentic-platform

Deploy to AWS #127

High-Level Diagram

Explanation