Name: task4-plan
Author: yoonucho

Instruction file imported from yoonucho/vibe_coding_w2-2 (.cursor/rules/task4-plan.mdc). Copyright stays with the author.

TASK-004 개발 계획: Streamlit 프론트엔드 구현

구현 항목

1. Streamlit 챗봇 UI 구현

챗봇 인터페이스 구현
메시지 표시 및 사용자 입력 처리
FastAPI 백엔드와 연동
상품 검색 결과 표시

기술 스택 및 라이브러리

프론트엔드 프레임워크

Streamlit: Python 기반 웹 애플리케이션 프레임워크
언어: Python 3.11

핵심 컴포넌트

st.chat_message: 채팅 메시지 표시 컨테이너
st.chat_input: 사용자 입력 위젯
st.write: 메시지 내용 표시

백엔드 연동

requests: HTTP 클라이언트 라이브러리
FastAPI 백엔드: /chat/ 엔드포인트 호출

UI/UX 요소

streamlit: 기본 UI 컴포넌트
st.title: 애플리케이션 제목
st.markdown: 마크다운 텍스트 렌더링

개발 계획

Streamlit 기본 설정
- 애플리케이션 구조 설정
- 페이지 제목 및 기본 레이아웃 구성
채팅 UI 구현
- chat_message 컨테이너 구현
- 사용자/어시스턴트 메시지 구분 표시
사용자 입력 처리
- chat_input 위젯 구현
- 입력 검증 및 처리
백엔드 API 연동
- requests를 이용한 HTTP 통신
- FastAPI 엔드포인트 호출
- 응답 처리 및 에러 핸들링
상품 검색 결과 표시
- Agent 응답 포맷팅

# after Install: the listing is in your workspace's routing pool - a plan picks it for its slot curl -s -X POST https://api.opensmartroute.ai/api/v1/route -H 'Authorization: Bearer $OSR_API_KEY' -H 'Content-Type: application/json' -d '{"text": "...", "plan": true}'

Install task4-plan and it becomes one more candidate the router can pick - when it fits.

A listing is a routing target with a manifest: what it does, which domains it covers, what it costs and who publishes it. Once installed it sits beside your own models and tools, is scored like any other candidate for each request, and shows up in the trace when it wins. Ratings come from workspaces that installed it, one per account.

{ "ocm": "1", "id": "yoonucho-vibe-coding-w2-2-task4-plan-rule", "kind": "skill", "name": "task4-plan", "description": "1. **Streamlit 기본 설정** - 애플리케이션 구조 설정 - 페이지 제목 및 기본 레이아웃 구성", "publisher": "yoonucho", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-cursor-rules" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "1. **Streamlit 기본 설정** - 애플리케이션 구조 설정 - 페이지 제목 및 기본 레이아웃 구성" ], "primary": false, "metadata": { "source": { "provider": "github-cursor-rules", "repository": "https://github.com/yoonucho/vibe_coding_w2-2", "path": ".cursor/rules/task4-plan.mdc", "ref": "0d7e0ef3ef45250e04ae7c99b8495696489a7c63", "url": "https://github.com/yoonucho/vibe_coding_w2-2/blob/0d7e0ef3ef45250e04ae7c99b8495696489a7c63/.cursor/rules/task4-plan.mdc", "key": "yoonucho/vibe_coding_w2-2/.cursor/rules/task4-plan.mdc" } }, "instructions": "# TASK-004 개발 계획: Streamlit 프론트엔드 구현\n\n## 구현 항목\n\n### 1. Streamlit 챗봇 UI 구현\n- 챗봇 인터페이스 구현\n- 메시지 표시 및 사용자 입력 처리\n- FastAPI 백엔드와 연동\n- 상품 검색 결과 표시\n\n## 기술 스택 및 라이브러리\n\n### 프론트엔드 프레임워크\n- **Streamlit**: Python 기반 웹 애플리케이션 프레임워크\n- **언어**: Python 3.11\n\n### 핵심 컴포넌트\n- **st.chat_message**: 채팅 메시지 표시 컨테이너\n- **st.chat_input**: 사용자 입력 위젯\n- **st.write**: 메시지 내용 표시\n\n### 백엔드 연동\n- **requests**: HTTP 클라이언트 라이브러리\n- **FastAPI 백엔드**: `/chat/` 엔드포인트 호출\n\n### UI/UX 요소\n- **streamlit**: 기본 UI 컴포넌트\n- **st.title**: 애플리케이션 제목\n- **st.markdown**: 마크다운 텍스트 렌더링\n\n## 개발 계획\n\n1. **Streamlit 기본 설정**\n - 애플리케이션 구조 설정\n - 페이지 제목 및 기본 레", "cost": { "context_tokens": 214 } }

task4-plan

About