# AI.RUN 통합 인터페이스 구축 계획

## 개요
AI.RUN의 다양한 기능들을 웹과 모바일에서 일관된 사용자 경험으로 제공하기 위한 통합 인터페이스 구축 계획입니다.

## 메뉴 구조

```
워크스페이스 (Workspace)
├── 대화하기 (Chat)              // AI 모델과의 대화, RAG/웹 검색 통합
├── 코드 작업 (Code)             // 코드 생성, 분석, 편집
├── 문서 작업 (Document)         // 문서 작성, 분석, 변환
├── 자동화 (Automation)          // MCP 도구 실행 및 관리
├── 설정 (Settings)             // AI 프로바이더, API 키, 환경 설정
└── 모니터링 (Monitoring)        // 사용량, 실행 상태, 로그 확인

┌─ 상단 메인 메뉴 (Top Navigation) ────────────────────────────────────────────┐
│  대화  |  코드  |  문서  |  자동화  |  설정  |  모니터링  |  도움말         │
└─────────────────────────────────────────────────────────────────────────────┘

┌─ 사이드바 메뉴 (각 메인 메뉴 선택 시) ──┐
│                                          │
├─ [대화 선택 시]                          │
│  • 새 대화                               │
│  • 대화 목록                             │
│                                          │
├─ [코드 선택 시]                          │
│  • 새 프로젝트                           │
│  • 프로젝트 목록                         │
│                                          │
├─ [문서 선택 시]                          │
│  • 새 문서                               │
│  • 문서 목록                             │
│                                          │
├─ [자동화 선택 시]                        │
│  • 새 작업                               │
│  • 작업 목록                             │
│                                          │
├─ [설정 선택 시]                          │
│  • 사용자 관리                           │
│    - 사용자 목록                         │
│  • AI 설정                               │
│    - AI 프로바이더/모델                  │
│    - API 키 관리                         │
│    - 지식 검색 설정                      │
│  • 도구 설정                             │
│    - MCP 도구 관리                       │
│    - 도구 권한 설정                      │
│  • 시스템 설정                           │
│    - 환경 설정                           │
│    - 업데이트                            │
│                                          │
├─ [모니터링 선택 시]                      │
│  • 사용량 통계                           │
│  • 실행 현황                             │
│  • 시스템 상태                           │
│  • 사용자 활동                           │
│                                          │
├─ [도움말 선택 시]                        │
│  • 사용자 가이드                         │
│  • 자주 묻는 질문                        │
│  • 기술 문서                             │
│  • 고객 지원                             │
└──────────────────────────────────────────┘

```
# 통합 내용
대화하기는 chatbot-ui 폴더의 앱과 mcp-agents 을 통합하는거고, 
코드작업과 환경설정, 자동화,모니터링 메뉴는 electron 앱의 내용을 통합하는겁니다.  
문서작업은 airun_report_webapp 폴더의 앱을 통합하는겁니다. 
각메뉴의 내용을 자세히 분석하고 모든 페이지를 완성하세요

## 폴더 구조
workspaces/
├── web/                      # 웹 클라이언트
│   ├── pages/               # 페이지 컴포넌트
│   ├── layouts/             # 레이아웃
│   ├── widgets/             # 위젯
│   └── styles/              # 웹 전용 스타일
│
├── mobile/                   # 모바일 클라이언트
│   ├── screens/             # 화면 컴포넌트
│   ├── navigation/          # 네비게이션
│   ├── widgets/             # 모바일용 위젯
│   └── styles/              # 모바일 전용 스타일
│
├── shared/                   # 웹/모바일 공유
│   ├── components/          # 공통 컴포넌트
│   │   ├── chat/           # 채팅 관련
│   │   ├── code/           # 코드 관련
│   │   └── docs/           # 문서 관련
│   │
│   ├── hooks/              # 공통 훅
│   ├── store/              # 상태 관리
│   ├── api/                # API 클라이언트
│   ├── types/              # 타입 정의
│   └── utils/              # 유틸리티
│
└── server/                  # 백엔드
    ├── routes/             # API 라우트
    ├── services/           # 비즈니스 로직
    └── models/             # 데이터 모델

## 기술 스택
### 공통
- TypeScript
- 상태관리: Zustand
- API: tRPC

### 웹
- Next.js
- Tailwind CSS

### 모바일
- React Native
- React Navigation
- Native Base

## 개발 전략
1. **단계적 개발**
   - 웹 버전 먼저 개발 및 안정화
   - 공통 로직을 shared로 점진적 이동
   - 모바일 버전 개발

2. **코드 공유 전략**
   - 비즈니스 로직 최대한 공유
   - UI는 플랫폼별 최적화
   - 타입과 상태 관리 통일

3. **UI/UX 가이드라인**
   - 일관된 디자인 시스템
   - 플랫폼별 최적화
   - 접근성 고려

## 구현 우선순위
1. **웹 인터페이스 (8주)**
   - 핵심 기능 구현
   - 기본 UI/UX
   - API 통합

2. **공통 모듈화 (4주)**
   - 비즈니스 로직 분리
   - 상태 관리 통합
   - 타입 시스템 정비

3. **모바일 인터페이스 (8주)**
   -


----
프론트엔드는 API 호출만으로 기능을 구헌하는것이 의도입니다.

API 서버 : http://localhost:5500/api/v1/docs/

API 엔드포인트 분석

주요 기능별 엔드포인트

1. 대화 기능 (Chat)
/api/v1/chat: 채팅 요청 처리
/api/v1/chat/sync: 동기식 채팅 처리
/api/v1/chat/status/:jobId: 채팅 작업 상태 확인

2. 코드 작업 (Code)
/api/v1/code: 코드 생성 요청 처리
/api/v1/code/sync: 동기식 코드 생성
/api/v1/code/status/:jobId: 코드 생성 작업 상태 확인

3. 문서 작업 (Document)
/api/v1/report: 보고서 생성 요청
/api/v1/report/status/:jobId: 보고서 생성 상태 확인
/api/v1/report/templates: 보고서 템플릿 목록 조회
/api/v1/report/templates/:templateName: 특정 템플릿 상세 정보 조회
/api/v1/template/upload: 템플릿 업로드

4. 자동화 기능 (Automation)
/api/v1/agent: 에이전트 실행 요청
/api/v1/agent/status/:jobId: 에이전트 작업 상태 확인
/api/v1/tasks: 작업 관리 (목록 조회, 저장, 삭제, 실행)

5. 지식 검색 (RAG) 관련 기능
/api/v1/rag/search: RAG 검색 요청
/api/v1/rag/search/sync: 동기식 RAG 검색
/api/v1/rag/add: RAG 문서 추가
/api/v1/rag/init: RAG 초기화
/api/v1/rag/list: RAG 문서 목록 조회
/api/v1/rag/path: RAG 문서 경로 설정
/api/v1/rag/upload: RAG 파일 업로드
/api/v1/rag/download: RAG 파일 다운로드

6. 웹 검색 기능
/api/v1/web/search: 웹 검색 요청
/api/v1/web/search/sync: 동기식 웹 검색
/api/v1/web/status/:jobId: 웹 검색 작업 상태 확인

7. 세션 관리
/api/v1/sessions: 세션 관리 (생성, 조회, 삭제, 업데이트)

8. 설정 관리
/api/v1/config/:key: 설정 값 조회
/api/v1/config: 설정 값 설정

9. 인증 및 사용자 관리
/api/v1/auth/register: 사용자 등록
/api/v1/auth/login: 로그인
/api/v1/auth/logout: 로그아웃
/api/v1/auth/me: 사용자 정보 조회/업데이트
/api/v1/auth/user: 사용자 정보 업데이트
/api/v1/auth/change-password: 비밀번호 변경
/api/v1/auth/reset-password: 비밀번호 초기화
/api/v1/auth/activities: 활동 로그 조회

10. API 키 관리
/api/v1/api-keys: API 키 관리 (생성, 조회, 업데이트, 삭제)

11. 모니터링
/api/v1/monitor/data: API 모니터링 데이터 조회
/api/v1/queues/status: 큐 상태 모니터링
/api/v1/usage: 사용량 조회 및 초기화

12. 시스템 및 기타
/api/v1/health: 서버 상태 확인
/api/v1/license/validate: 라이선스 검증
/api/v1/cache/clear: 캐시 초기화
/api/v1/client/setup: 클라이언트 설치 스크립트 제공
/api/v1/client/utils/:platform/:version/:filename: 클라이언트 유틸리티 제공
/api/v1/client/config: 클라이언트 환경 설정 정보 제공

통합 인터페이스 적합성 평가
README.md에서 제시한 통합 인터페이스 구축 계획은 api_server.js에서 제공하는 모든 주요 기능을 적절히 포함하고 있습니다:
대화하기 (Chat): 채팅 관련 API 완전 지원
코드 작업 (Code): 코드 생성 관련 API 완전 지원
문서 작업 (Document): 보고서 생성 및 템플릿 관련 API 완전 지원
자동화 (Automation): 에이전트 및 작업 관리 API 완전 지원
설정 (Settings): 사용자 관리, AI 설정, 도구 설정, 시스템 설정에 필요한 API 지원
모니터링 (Monitoring): 사용량, 실행 상태, 로그 확인에 필요한 API 지원

추가 고려사항
WebSocket 지원: API 서버는 WebSocket 통신을 지원하므로, Next.js 애플리케이션에서도 이를 활용하여 실시간 통신이 가능합니다.
인증 시스템: 기존 API 서버에는 인증 및 권한 관리 시스템이 구현되어 있으므로, 통합 인터페이스에서도 이를 활용할 수 있습니다.
API 키 관리: Next.js 앱에서 API 키 관리 기능을 구현하여 사용자별 API 접근 제어가 가능합니다.
RAG 및 웹 검색 통합: 대화하기(Chat) 메뉴에서 RAG와 웹 검색 기능을 통합할 수 있는 API가 이미 제공되고 있습니다.

결론
api_server.js에서 제공하는 API 엔드포인트들은 README.md에서 제시된 통합 인터페이스 구축 계획의 모든 기능을 구현하기에 충분합니다. Next.js 기반의 웹 애플리케이션이 이 모든 엔드포인트를 활용할 수 있어 통합 인터페이스 구축에 매우 적합합니다.

주요 장점:
API 서버가 이미 모든 핵심 기능을 제공하므로 프론트엔드는 API 호출만으로 기능 구현 가능
RESTful API와 WebSocket 모두 지원되어 동기/비동기 처리 모두 가능
인증, 권한, 모니터링 시스템이 이미 구축되어 있어 이를 재활용 가능
이 API 엔드포인트를 활용하면, README.md에서 제시한 Next.js 기반의 통합 인터페이스를 성공적으로 구현할 수 있을 것입니다.


# 각 메뉴의 기능과 구현해야 할 페이지

1. 대화하기(Chat) 메뉴 구현
기존 기능 (chatbot-ui + mcp-agents):
chatbot-ui: Next.js 기반 챗봇 인터페이스 제공
워크스페이스 및 채팅 기능 구현
mcp-agents: 다양한 외부 도구와 연동 가능한 MCP(Multi-Channel Process) 에이전트 제공
Anthropic Claude 모델 기반 AI 대화 지원
파일 시스템, 깃허브, PostgreSQL 등 다양한 도구 통합
구현할 페이지:
대화 메인 페이지 (/chat)
새 대화 시작 및 대화 목록 링크 제공
최근 대화 목록 표시
새 대화 페이지 (/chat/new)
모델 선택 옵션 (Anthropic Claude, OpenAI, Gemini)
대화창 및 메시지 입력 영역
파일 업로드 기능
RAG 및 웹 검색 토글 옵션
도구 호출 결과 표시 영역
대화 목록 페이지 (/chat/list)
기존 대화 세션 목록 표시
검색 및 필터링 기능
대화 삭제 및 내보내기 기능
특정 대화 페이지 (/chat/[id])
선택한 대화 내용 표시
대화 이어가기 기능
대화 내용 편집 및 공유 기능

2. 코드 작업(Code) 메뉴 구현
기존 기능 (electron 앱 통합):
Electron 기반 코드 생성 및 실행 환경
터미널 명령 실행 및 관리 기능
코드 작업 태스크 스케줄링
구현할 페이지:
코드 작업 메인 페이지 (/code)
새 프로젝트 및 프로젝트 목록 링크
최근 작업 코드 목록
새 프로젝트 페이지 (/code/new)
프로젝트 템플릿 선택
코드 생성 프롬프트 입력
언어 및 프레임워크 선택 옵션
프로젝트 목록 페이지 (/code/list)
기존 프로젝트 목록 표시
프로젝트 검색 및 필터링 기능
코드 편집기 페이지 (/code/[id])
코드 편집 인터페이스
터미널 통합
코드 실행 및 결과 표시

3. 문서 작업(Document) 메뉴 구현
기존 기능 (airun_report_webapp):
보고서 생성 및 관리 기능
다양한 문서 형식 지원 (PDF, HWPX, DOCX, PPTX)
이메일을 통한 문서 전송
구현할 페이지:
문서 작업 메인 페이지 (/document)
새 문서 및 문서 목록 링크
최근 생성 문서 목록
새 문서 페이지 (/document/new)
문서 템플릿 선택
문서 내용 프롬프트 입력
출력 형식 선택 (PDF, HWPX, DOCX, PPTX)
사용자 정보 입력 (이메일, 이름)
문서 목록 페이지 (/document/list)
생성된 문서 목록 표시
문서 검색 및 필터링 기능
문서 다운로드 및 공유 기능
문서 뷰어 페이지 (/document/[id])
생성된 문서 내용 표시
문서 편집 및 재생성 기능
다른 형식으로 내보내기 기능

4. 자동화(Automation) 메뉴 구현
기존 기능 (electron + MCP 도구):
MCP 도구 실행 및 관리
태스크 스케줄링 및 로그 관리
구현할 페이지:
자동화 메인 페이지 (/automation)
새 작업 및 작업 목록 링크
최근 실행 작업 표시
새 작업 페이지 (/automation/new)
자동화 작업 템플릿 선택
작업 설정 및 매개변수 입력
스케줄링 옵션 구성
작업 목록 페이지 (/automation/list)
작업 목록 표시
작업 상태 및 로그 확인
작업 실행/중지/삭제 기능
작업 상세 페이지 (/automation/[id])
작업 실행 상태 및 이력
작업 로그 및 결과 확인
작업 업데이트 및 복제 기능

5. 환경 설정(Settings) 메뉴 구현
기존 기능 (API 서버의 설정 기능):
API 키 관리
환경 변수 및 설정 관리
사용자 계정 관리
구현할 페이지:
설정 메인 페이지 (/settings)
설정 카테고리 탭 제공 (사용자, AI, 도구, 시스템)
사용자 관리 페이지 (/settings/users)
사용자 목록 및 권한 관리
사용자 계정 생성/편집/삭제
AI 설정 페이지 (/settings/ai)
AI 프로바이더 및 모델 설정
API 키 관리
RAG 및 웹 검색 설정
도구 설정 페이지 (/settings/tools)
MCP 도구 관리
도구 권한 설정
도구 연동 설정
시스템 설정 페이지 (/settings/system)
환경 변수 및 전역 설정
백업 및 복원
업데이트 관리

6. 모니터링(Monitoring) 메뉴 구현
기존 기능 (API 서버의 모니터링 기능):
사용량 통계
서버 상태 및 큐 모니터링
활동 로그 조회
구현할 페이지:
모니터링 메인 페이지 (/monitoring)
대시보드 형태로 주요 지표 요약
사용량 통계 페이지 (/monitoring/usage)
API 호출 통계
리소스 사용량 그래프
사용량 초기화 및 내보내기
실행 현황 페이지 (/monitoring/status)
현재 실행 중인 작업 목록
큐 상태 모니터링
작업 우선순위 조정
시스템 상태 페이지 (/monitoring/system)
서버 상태 및 성능 지표
로그 파일 조회
오류 및 경고 알림
사용자 활동 페이지 (/monitoring/activities)
사용자별 활동 로그
활동 검색 및 필터링
활동 분석 보고서
구현 계획
공통 컴포넌트 구현
헤더 및 네비게이션 바
사이드바 메뉴
페이지 레이아웃
공통 UI 요소 (버튼, 카드, 알림 등)
API 통합
각 기능별 API 서비스 구현 완료
인증 및 권한 관리 구현
에러 처리 및 로딩 상태 관리
각 메뉴별 페이지 구현
대화하기 메뉴: chatbot-ui 기능 통합
코드 작업 메뉴: electron 앱 기능 통합
문서 작업 메뉴: airun_report_webapp 기능 통합
자동화 메뉴: MCP 도구 및 태스크 관리 통합
설정 및 모니터링 메뉴: API 서버 관리 기능 통합
테스트 및 최적화
각 페이지별 기능 테스트
반응형 디자인 최적화
성능 및 접근성 개선