Skip to main content

Build a Streamlit AI Chatbot

Level: Beginner · Time: 30–40 min · Category: Web app

Tags: Python · Streamlit · OpenAI SDK · Prompting

Build a small web chat interface that talks to the Research Computing OpenAI-compatible API. In about half an hour you will have a streaming chatbot with conversation history, then add one improvement of your own.

This is a great hackathon starting point: the same pattern powers assistants, help desks, and lab tools.

Prerequisites​

Confirm Python 3 and pip are available before you start:

python3 --version      # expect 3.9 or newer
python3 -m pip --version

If Python is not found, install it from python.org. On the supercomputer, load a Python module instead (for example module load python), then run the checks again.

What you will do​

  • Create a Python web app workspace with Streamlit and the OpenAI SDK.
  • Connect to the RC OpenAI-compatible API with environment variables.
  • Build a chat UI that streams responses and remembers the conversation.
  • Add one focused feature such as a system prompt or a clear-chat button.

Build it step by step​

1. Create the workspace​

Install Streamlit, the OpenAI SDK, and an environment loader. The app runs locally in your browser.

mkdir ai-chatbot
cd ai-chatbot
python3 -m venv .venv
source .venv/bin/activate
pip install streamlit openai python-dotenv
Keep this out of Git

If you track this project with Git, do not commit your virtual environment or any secrets. Create a .gitignore file in the project folder with at least these lines:

.gitignore
.venv/
.env
__pycache__/

.venv/ is large and specific to your machine, and .env holds your API key — neither belongs in a shared repository. New to Git? See Track a New Project with Git.

2. Add API connection values​

Your program needs three values to reach the API: your API key, the gateway URL, and a model ID. You keep them in a small text file named .env so they stay out of your code — and out of Git.

What is a .env file, and where does it go?

A .env ("dot-env") file is a plain text file that stores settings as NAME=value lines, one per line. Programs read it at startup so you never have to paste secrets like API keys directly into your code.

  • The filename is literally .env — a leading dot with nothing before it (not config.env or .env.txt).
  • It goes in your project folder: the same directory you just created, where the .venv lives and where you run your commands.
  • The python-dotenv package loads it with load_dotenv(), which looks for .env in the folder you run the program from.
  • Because it holds a secret, never commit it to Git (see the note below).

Create a new file named .env in your project folder — in VS Code use File → New File, or run code .env in the terminal — then paste these three lines and replace the placeholders:

.env
OPENAI_API_KEY="paste-your-key-here"
OPENAI_BASE_URL="https://openai.rc.asu.edu/v1"
RC_LLM_MODEL="paste-model-id-here"
Where do the values come from?

Get your API key and a valid model ID from the LLM API guide. The OPENAI_BASE_URL above is already correct for the Research Computing gateway.

  • Use the /v1 base URL, not the full /chat/completions URL, for the Python SDK.
  • Use a model ID that appears in the portal model list for your account.
  • Keep .env out of Git: add a line containing .env to your .gitignore (see Track a New Project with Git).

3. Ask for the first chat app​

Give the assistant the goal, the stack, and the connection details. Keep the first version small.

You are helping me build a beginner Streamlit chatbot that uses an OpenAI-compatible API.

Project goal:
- A single-page Streamlit app in app.py.
- Show a chat interface using st.chat_message and st.chat_input.
- Send the conversation to the chat completions API through the OpenAI Python SDK.
- Read OPENAI_API_KEY, OPENAI_BASE_URL, and RC_LLM_MODEL from a .env file.

Constraints:
- Keep the whole app in app.py.
- Store the conversation in st.session_state.
- Add a friendly error if the API key or model is missing.

Please:
1. Create app.py.
2. Explain how to run it.
3. Point out the lines I would change to adjust the model or system prompt.

4. Run and test​

Start the app and send a first message. Streamlit reloads automatically when you edit app.py.

streamlit run app.py

Check that the conversation stays visible after each message and that a missing key produces a clear message, not a stack trace.

5. Add streaming and memory​

Once basic replies work, ask for streaming output and confirm the history is passed on every request.

Please make two focused improvements to the chatbot:

1. Stream the assistant's reply token by token using the SDK's streaming response and st.write_stream.
2. Make sure the full conversation history in st.session_state is sent on each request.

Constraints:
- Keep the app in app.py.
- Do not add a database or user accounts.
- Explain how to test that streaming works.

6. Add one feature of your own​

Pick a single improvement. Small, clear changes are easier to review and demo.

Please add one focused feature to the chatbot:

Feature:
- Add a sidebar with a system prompt text box and a "Clear chat" button.

Constraints:
- Apply the system prompt to new conversations.
- Keep the code beginner-readable.
- Explain how to test the new controls.

More prompts to try​

  • Add a model picker to the sidebar that lists a few model IDs I provide.
  • Show a message count so I can see how long the conversation is getting.
  • Add a "Download conversation" button that saves the chat as a markdown file.

Troubleshooting​

  • If the app cannot find your key, confirm .env is in the folder where you run streamlit run.
  • If responses do not stream, ask the assistant to switch to the streaming API and st.write_stream.
  • If you get a model error, use a model ID from the portal model list for your account.
  • If the app is slow to reload, stop it with Ctrl+C and start it again.

Next steps​