added UI

functions.py

@@ -3,7 +3,7 @@ import re
 from agents import function_tool
 
 @function_tool
-def fetch_youtube_transcript(url: str) -> str:
+def fetch_video_transcript(url: str) -> str:
     """
     Extract transcript with timestamps from a YouTube video URL and format it for LLM consumption
     

main.py

@@ -1,32 +1,144 @@
-from agents import Agent, function_tool, Runner
-from openai.types.responses import ResponseTextDeltaEvent
+import os
 from dotenv import load_dotenv
+load_dotenv()
+
 import asyncio
-import os
+from agents import Agent, Runner
+from openai.types.responses import ResponseTextDeltaEvent
+import streamlit as st
+
 from functions import fetch_video_transcript, fetch_intstructions
 
-# try to import OPENAI_API_KEY from .env file, if not found, take user input
-if not os.getenv("OPENAI_API_KEY"):
-    OPENAI_API_KEY = input("Enter your OpenAI API key: ")
-    with open(".env", "w") as f:
-        f.write(f"OPENAI_API_KEY={OPENAI_API_KEY}")
-else:
-    OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
-
-# load system instructions
-with open("prompts/system_instructions.md", "r") as f:
-    system_instructions = f.read()
-    
-# create agent
-agent = Agent(
-    name="YouTube Agent",
-    model="gpt-5",
-    system_instructions=system_instructions,
-    tools=[fetch_video_transcript, fetch_intstructions],
-)
-
-async def main():
-    pass
+async def run_streamlit_app():
+    st.set_page_config(
+        page_title="YouTube Agent",
+        page_icon="🤖",
+        layout="wide"
+    )
+
+    st.title("YouTube Agent")
+    st.markdown("Ask me anything about YouTube videos!")
+
+    # Get API key from environment or user input
+    env_api_key = os.getenv("OPENAI_API_KEY")
+
+    # Sidebar for API key (only show input if no env key)
+    with st.sidebar:
+        st.header("Configuration")
+
+        if env_api_key:
+            st.success("✅ API key loaded from .env file")
+            api_key = env_api_key
+        else:
+            api_key = st.text_input(
+                "OpenAI API Key",
+                type="password",
+                help="Enter your OpenAI API key to use the agent"
+            )
+
+        if st.button("Clear Chat"):
+            st.session_state.messages = []
+            st.session_state.input_items = []
+            st.rerun()
+
+    # Initialize session state
+    if "messages" not in st.session_state:
+        st.session_state.messages = []
+    if "input_items" not in st.session_state:
+        st.session_state.input_items = []
+    if "agent" not in st.session_state:
+        st.session_state.agent = None
+
+    # Create agent if API key is provided
+    if api_key and st.session_state.agent is None:
+        os.environ["OPENAI_API_KEY"] = api_key
+
+        # Load system instructions
+        try:
+            with open("prompts/system_instructions.md", "r") as f:
+                system_instructions = f.read()
+
+            st.session_state.agent = Agent(
+                name="YouTube Agent",
+                instructions=system_instructions,
+                tools=[fetch_video_transcript, fetch_intstructions],
+            )
+        except Exception as e:
+            st.error(f"Error initializing agent: {str(e)}")
+            return
+
+    # Display chat messages
+    for message in st.session_state.messages:
+        with st.chat_message(message["role"]):
+            st.markdown(message["content"])
+
+    # Chat input
+    if prompt := st.chat_input("Type your message here..."):
+        if not api_key:
+            st.error("Please enter your OpenAI API key in the sidebar.")
+            return
+
+        if st.session_state.agent is None:
+            st.error("Agent not initialized. Please check your API key.")
+            return
+
+        # Add user message to chat
+        st.session_state.messages.append({"role": "user", "content": prompt})
+        st.session_state.input_items.append({"content": prompt, "role": "user"})
+
+        with st.chat_message("user"):
+            st.markdown(prompt)
+
+        # Generate response
+        with st.chat_message("assistant"):
+            response_placeholder = st.empty()
+            full_response = ""
+
+            try:
+                # Run the agent
+                result = Runner.run_streamed(
+                    st.session_state.agent,
+                    input=st.session_state.input_items,
+                )
+
+                # Process streaming events with await
+                async for event in result.stream_events():
+                    if event.type == "raw_response_event" and isinstance(event.data, ResponseTextDeltaEvent):
+                        full_response += event.data.delta
+                        response_placeholder.markdown(full_response + "▌")
+                    elif event.type == "run_item_stream_event":
+                        if event.item.type == "tool_call_item":
+                            # Get tool name and show appropriate status message
+                            tool_name = event.item.raw_item.name
+                            if tool_name == "fetch_video_transcript":
+                                status_msg = f"\n\n-- Fetching transcript..."
+                            elif tool_name == "fetch_intstructions":
+                                status_msg = f"\n\n-- Fetching instructions..."
+                            else:
+                                status_msg = f"\n\n-- Calling {tool_name}..."
+                            response_placeholder.markdown(full_response + status_msg + "▌")
+                        elif event.item.type == "tool_call_output_item":
+                            # Use generic handling for tool outputs
+                            formatted_content = f"Tool output:\n{event.item.output}"
+                            completion_msg = f"\n\n-- Tool completed."
+
+                            # Add tool output as user role to input_items
+                            st.session_state.input_items.append({
+                                "content": formatted_content,
+                                "role": "user"
+                            })
+                            response_placeholder.markdown(full_response + completion_msg + "▌")
+
+                # Final response without cursor
+                response_placeholder.markdown(full_response)
+
+                # Add assistant response to session state
+                st.session_state.messages.append({"role": "assistant", "content": full_response})
+                st.session_state.input_items.append({"content": full_response, "role": "assistant"})
+
+            except Exception as e:
+                st.error(f"Error: {str(e)}")
+
 
 if __name__ == "__main__":
-    asyncio.run(main())
+    asyncio.run(run_streamlit_app())

prompts/system_instructions.md

@@ -0,0 +1,23 @@
+You are a YouTube Video Agent. You help users with requests related to YouTube videos.
+
+## Core Rule
+Always cite and link to the specific part(s) of the video used in your answer.
+
+## Tools
+
+### fetch_video_transcript
+Use this tool whenever a user provides a YouTube URL. It retrieves the full transcript.
+
+### fetch_instructions
+Use this tool to get **specialized instructions** for common user requests, including:
+
+- Writing a blog post
+- Writing a social media post
+- Extracting video chapters
+
+To fetch the correct instructions, pass one of the following **exact** prompts:
+- write_blog_post
+- write_social_post
+- write_video_chapters
+
+Important: Do **not** guess how to complete these tasks. Always fetch the instructions and follow them exactly.

prompts/write_blog_post.md

@@ -0,0 +1,21 @@
+## How to Write a Blog Post
+
+### Blog Structure
+
+- Short engaging title (format with markdown `#`)
+- Short engaging subtitle that compliments title (format with markdown `###`)
+- 2–3 sentence hook that clearly states the reader benefit, no header.
+- `---` (section break)
+- **Introduction**: Three short paragraphs, no header.
+- **Body**: Multiple sections with clear, punchy headers. 
+    - Note: Each section in body should have 2 paragraphs (3 max when necessary).
+- **Ending**: A final section titled *Conclusion*, *Takeaways*, or *What's Next?*
+
+### Writing Guidelines
+
+- Most paragraphs should be 2 sentences (3 max when necessary).
+- Use one of these story structures for posts, sections, and even paragraphs:
+  - *Status quo → Problem → Solution*
+  - *What? → Why? → How?*
+  - *What? → So what? → What now?*
+- Use plain language that’s easy for most people to understand.

prompts/write_social_post.md

@@ -0,0 +1,31 @@
+## How to Write Social Media Posts
+
+### Post Structure
+
+- **Hook**: Opening line that grabs attention and creates curiosity.
+- **Value**: Core message that provides benefit, insight, or entertainment.
+- **Call to Action**: Clear next step for the reader (optional but recommended).
+
+### Platform Guidelines
+
+- **Twitter/X**: 280 characters max.
+- **LinkedIn**: 1,300 characters max, professional tone, longer-form content welcome.
+- **Instagram**: 2,200 characters max, use emojis and line breaks for readability.
+- **Facebook**: 63,206 characters max, conversational tone, encourage engagement.
+
+### Writing Guidelines
+
+- Start with a strong hook that makes people want to read more.
+- Use short sentences and paragraphs for easy mobile reading.
+- Do not include relevant hashtags
+- Ask questions or use prompts to encourage engagement.
+- Use emojis strategically to add personality and break up text.
+- End with a clear call to action when appropriate.
+
+### Engagement Tips
+
+- Use storytelling elements: *Problem → Solution → Result*
+- Include numbers, statistics, or specific examples for credibility.
+- Create urgency or FOMO when relevant.
+- Tag relevant people or brands to increase reach.
+- Use trending topics or current events when appropriate.

prompts/write_video_chapters.md

@@ -0,0 +1,19 @@
+## How to Write Video Chapters
+
+### Steps
+1. Watch or review the video to understand its content and flow.
+2. Identify natural breakpoints in the content (e.g., topic changes, new sections).
+3. Create a list of chapters with timestamps and optional links.
+
+### Example Output
+{chapter 1 name} – [0:00](chapter-link)
+{chapter 2 name} – [0:45](chapter-link)
+{chapter 3 name} – [2:00](chapter-link)
+{chapter 4 name} – [6:00](chapter-link)
+...
+
+### Guidelines
+- Each chapter must be **at least 20 seconds** long.
+- The first 1–3 chapters can be shorter due to introductions or quick transitions.
+- Avoid creating too many chapters — aim for clarity over granularity.
+- Chapter titles should be concise and descriptive of the content.