micro-frontend-chatbot
A micro-front end chatbot example
Nitric Chatbot Component Example
This is a Nitric TypeScript project, that implements a Chat webcomponent using LitElement, websockets and GPT-4.
Running this project locally
Ensure dependencies are installed
# install dependencies
yarn install
# run locally
yarn dev dev
Learning Nitric
Nitric provides detailed and intuitive documentation and guides to help you get started quickly.
If you'd rather chat with the maintainers or community, come and join our Discord server, GitHub Discussions or find us on Twitter.
Running this project
To run this project you'll need the Nitric CLI installed, then you can use the CLI commands to run, build or deploy the project.
You'll also want to make sure the project's required dependencies have been installed.
Setup your .env variables:
cp .env.template .env
and fill in with your own API keys e.g.
OPENAI_API_KEY=YOUR_OPEN_AI_KEY
# install dependencies
npm install
# run locally
npm run dev
Deploying this project
This project can easily be deployed to AWS simply run:
nitric stack new
select AWS and complete the prompts.
Then run:
nitric up
This will deploy the following resources:
Integratining into a website
The example app has a minimal intregration example for local development
<html>
<head>
<script type="module" src="http://localhost:4001/"></script>
</head>
<body>
<chat-element></chat-element>
</body>
</html>
Once your API has been deployed you can simply replace the local API with your deployed API hostname.