ํผ๋๋ก ๋์๊ฐ๊ธฐ
Dev.toAI/ML
์๋ฌธ ์ฝ๊ธฐ
Multi-Agent Gemini ํ์ดํ๋ผ์ธ ๊ธฐ๋ฐ์ AI Flowchart ์๋ ์์ฑ ์์คํ ๊ตฌ์ถ
I built a free AI Flowchart Studio โ just launched today! ๐
AI ์์ฝ
Context
Lucidchart ๋ฑ ๊ธฐ์กด ๋ค์ด์ด๊ทธ๋จ ๋๊ตฌ์ ๋ฌด๊ฑฐ์ด ์ธํฐํ์ด์ค๋ก ์ธํ ๋น ๋ฅธ ์๊ฐํ ์์ ์ ๋ณ๋ชฉ ๋ฐ์. ์์ฐ์ด ๊ธฐ์ ๋ง์ผ๋ก ์ฆ์ ์ ๋ฌธ์ ์ธ Flowchart๋ฅผ ์์ฑํ๋ ๊ฒฝ๋ํ๋ ๋๊ตฌ์ ํ์์ฑ ๋๋.
Technical Solution
- Orchestrator Agent๋ฅผ ํตํ ์ ๋ ฅ ํ๋กฌํํธ์ ๋ ผ๋ฆฌ์ ํ๋น์ฑ ๊ฒ์ฆ ๋ฐ ํํฐ๋ง
- Logic Parser Agent๋ฅผ ํ์ฉํ ํ ์คํธ ๊ธฐ๋ฐ์ ์ ํํ๋ JSON Graph(Nodes, Edges) ์ถ์ถ
- Generator Agent๋ฅผ ํตํ JSON Graph์ Mermaid.js Syntax ๋ณํ ๋ฐ ์๊ฐํ ๋ฐ์ดํฐ ์์ฑ
- Syntax Validator ๋จ๊ณ์ ์ต์ข ๊ฒ์ฆ์ ํตํ ์๊ฐ์ ๋ ๋๋ง ์ค๋ฅ ์์ฒ ์ฐจ๋จ
- FastAPI์ Server-Sent Events(SSE)๋ฅผ ๊ฒฐํฉํ ์ค์๊ฐ ์คํธ๋ฆฌ๋ฐ ์๋ต ๊ตฌ์กฐ ์ค๊ณ
- LocalStorage ๊ธฐ๋ฐ์ BYOK(Bring Your Own Key) ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ ๋ณด์ ๋ฐ ํ๋ผ์ด๋ฒ์ ๊ฐํ
์ค์ฒ ํฌ์ธํธ
- LLM ์ถ๋ ฅ์ ๋ถํ์ค์ฑ ์ ๊ฑฐ๋ฅผ ์ํด '๊ฒ์ฆ-ํ์ฑ-์์ฑ-์ต์ข ๊ฒ์ฆ'์ Multi-Stage ํ์ดํ๋ผ์ธ ๊ฒํ - ์ฌ์ฉ์ API Key์ Client-side ์ ์ฅ ๋ฐ Secure Proxy ๊ตฌ์กฐ๋ฅผ ํตํ ์๋ฒ ๋น์ฉ ์ ๊ฐ ๋ฐ ๋ณด์ ๋ชจ๋ธ ์ ์ฉ - ์ ํ ๋ฐ์ดํฐ(JSON)๋ฅผ ์ค๊ฐ ๋งค๊ฐ์ฒด๋ก ํ์ฉํ์ฌ AI ์ถ๋ ฅ๋ฌผ๊ณผ ๋ ๋๋ง ์์ง(Mermaid.js) ๊ฐ์ ๊ฒฐํฉ๋ ๋ถ๋ฆฌ