Creating a Basic Page with Streamlit

Introduction: Building Your First DeepResearcher Page

Welcome back! In the last lesson, you learned what Streamlit is and how it helps you build interactive web apps using Python. Now, you are ready to take the next step and create the main page for your DeepResearcher tool.

In this lesson, you will learn how to:

  • Add a title and helpful instructions to your app
  • Collect user input using simple widgets
  • Put everything together to create a clean, interactive page

By the end of this lesson, you will have a working starting point for your DeepResearcher frontend. This page will be the foundation for all the features you add in future lessons.

Structuring the Page: Titles and Descriptions

A good app starts with a clear title and some helpful instructions. In Streamlit, you can do this with st.title(), st.write(), and st.markdown().

Let’s start by setting up the page title.

import streamlit as st

st.title("🧠 DeepResearcher")
  • st.title() displays a large, bold title at the top of your app. Here, we use an emoji and the name of our tool to make it stand out.

Next, let’s add a short description to tell users what the app does. You can use st.write() or st.markdown() for this. Both work for simple text, but st.markdown() lets you use Markdown formatting if you want.

st.write("AI-powered research assistant that performs real-time web exploration and synthesis.")
  • This line adds a short, clear description under the title.

What you see in your app:

Adding User Inputs with Widgets

Now, let’s make the page interactive by adding widgets. Widgets are elements like text boxes, sliders, and buttons that let users provide input to your app.

Text Input

To let users enter their research topic, use st.text_input():

user_query = st.text_input("Enter your research topic:", placeholder="e.g. Impact of AI in healthcare")
  • The first argument is the label shown above the input box.
  • The placeholder shows a hint inside the box until the user types something.
  • The value the user enters is stored in the user_query variable.
Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal