Webverse · Branching Comic Stories, End to End

HackUTA 2026: Out Devpost page project: https://devpost.com/software/hackuta-7-vandy-prat?ref_content=my-projects-tab&ref_feature=my_projects A chance to build something joyful with awesome friends: Vandit Goel, Pratyaksh Mathur, Harshill W

🕸️ Digital Spider-Man Interactive Comic Website

Description: Developed an interactive “Choose Your Own Adventure” digital comic experience inspired by Spider-Man, allowing users to customize their storyline, visual style, and narration. The platform integrates multimodal AI agents to collaboratively generate dynamic storytelling, visuals, and voice narration.

Key Features & Technologies:

Google Gemini: Generates adaptive storylines and user-driven narrative choices.

• Nanobanana: Produces comic-style images based on scene descriptions.
• Agentuity AI: Hosts and deploys three specialized AI agents:
• Writer Agent: Creates story scripts and decision branches.
• Illustrator Agent: Designs visual descriptions—lighting, mood, sound effects, and art direction.
• Generator Agent: Produces full comic book pages based on Illustrator output using Nanobanana.
• ElevenLabs: Provides natural voice narration for an immersive audio experience.
• Auth0: Handles secure user authentication and session management.
• Director Module: Orchestrates seamless collaboration between agents to produce cohesive storylines and visuals.

Auth0 React SDK • Sample App

This sample shows how to integrate the Auth0 React SDK into a React app bootstrapped with Create React App. It accompanies the Auth0 React SDK Quickstart.

What this sample covers

• Sign in / Sign out
• Displaying the authenticated user’s profile
• Protecting routes
• Calling secured APIs

---

Project setup

Install dependencies:

npm install

---

Configuration

1) (Optional) Create an API — required for “Call an API”

In the Auth0 Dashboard, create an API. You’ll get an API Identifier to use as the audience value.

• If you’re not calling an API, do not set an audience.
• Setting an audience without a configured API will lead to a “Service not found” error during authentication.

2) Configure credentials

The app needs your Auth0 domain and client ID.

1. Copy src/auth_config.json.example → src/auth_config.json
2. Replace placeholders with your Auth0 application values (optionally add your app/API base URLs)

{
  "domain": "{YOUR AUTH0 DOMAIN}",
  "clientId": "{YOUR AUTH0 CLIENT ID}"
}

Note: Leave out audience if you’re not using the API portion of the sample.

---

Run the sample

Dev server with hot reload

Compiles and serves the React app and starts the backend API server on port 3000:

npm start

---

Deployment & Testing

Run tests:

npm test

---

FAQ

• Having trouble (e.g., users not remaining authenticated after refresh)? Check the auth0-react FAQ for common fixes.

---

What is Auth0?

Auth0 helps you:

• Add authentication via social identity providers (Google, Facebook, Microsoft, LinkedIn, GitHub, Twitter, Box, Salesforce, etc.) and enterprise providers (Azure AD, Google Workspace, Active Directory/ADFS, any SAML IdP).
• Support username/password databases.
• Link multiple identities to one user.
• Issue signed JWTs for secure API calls and identity propagation.
• Analyze login behavior (who/when/where).
• Enrich user profiles with custom logic via JavaScript rules.

---

Create a free Auth0 account

1. Visit Auth0 and click Sign Up.
2. Sign in with Google, GitHub, or Microsoft.

---

Issue reporting

• Bugs or feature requests: open an issue in this repository.
• Security issues: do not use public issues. Please follow Auth0’s Responsible Disclosure Program.

---

Author

Auth0

---

📄 License

Licensed under MIT. See the LICENSE file for details.

Thanks & credits

For Backend, please give credits to the webverse project by linking to https://github.com/vandyG/webverse

Can I use my own image model or API? Yes. The image_generator agent is pluggable—swap in local models or API services.