| import streamlit as st | |
| import anthropic | |
| import os | |
| from streamlit.components.v1 import html | |
| # Set up the Anthropic client | |
| client = anthropic.Anthropic(api_key=os.environ.get("ANTHROPIC_API_KEY")) | |
| # Streamlit app | |
| def main(): | |
| st.title("Claude 3.5 Sonnet API Demo") | |
| # User input | |
| user_input = st.text_area("Enter your message:", height=100) | |
| if st.button("Send"): | |
| if user_input: | |
| # Call Claude API | |
| response = client.messages.create( | |
| model="claude-3-sonnet-20240229", | |
| max_tokens=1000, | |
| messages=[ | |
| {"role": "user", "content": user_input} | |
| ] | |
| ) | |
| # Display Claude's response | |
| st.write("Claude's response:") | |
| st.write(response.content[0].text) | |
| # Example of using a custom HTML/JS component | |
| custom_html = """ | |
| <div id="custom-component"> | |
| <h3>Custom Component</h3> | |
| <p>This is a custom HTML component.</p> | |
| <button onclick="alert('Button clicked!')">Click me</button> | |
| </div> | |
| <script> | |
| // You can add custom JavaScript here | |
| console.log("Custom component loaded"); | |
| </script> | |
| """ | |
| html(custom_html, height=200) | |
| if __name__ == "__main__": | |
| main() |