ai-chat2
No description available
Ask AI about ai-chat2
Powered by Claude Β· Grounded in docs
I know everything about ai-chat2. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
AI Chat Assistant with MCP
Google Gemini APIμ Model Context Protocol(MCP)μ νμ©ν νμ₯ κ°λ₯ν AI μ±ν μ ν리μΌμ΄μ μ λλ€.
μ£Όμ κΈ°λ₯
π€ AI μ±ν
- Google Gemini 2.0 Flash λͺ¨λΈ μ°λ
- μ€μκ° μλ΅
- λ§ν¬λ€μ΄ λ λλ§ (μ½λ νμ΄λΌμ΄ν ν¬ν¨)
- μ½λ λΈλ‘ λ³΅μ¬ λ²νΌ
- λ©ν° μ±ν λ°© μ§μ (μ¬μ΄λλ°μμ μ ν κ°λ₯)
- LocalStorageλ₯Ό ν΅ν λͺ¨λ μ±ν λ°© λ΄μ μ μ₯
- κ° μ±ν λ°©μ λ 립μ μΈ λν λ§₯λ½ μ μ§
π MCP (Model Context Protocol) ν΅ν©
- MCP μλ² κ΄λ¦¬: λ€μ€ MCP μλ² λ±λ‘ λ° κ΄λ¦¬
- Transport μ§μ: STDIO, SSE, Streamable HTTP
- λꡬ μ€ν: MCP μλ²μ λꡬλ₯Ό ν μ€νΈνκ³ μ€ν
- ν둬ννΈ κ΄λ¦¬: MCP ν둬ννΈ μ‘°ν λ° μ¬μ©
- 리μμ€ μ κ·Ό: MCP 리μμ€ μ½κΈ° λ° νμ©
- AI Function Calling: Geminiκ° μλμΌλ‘ MCP λꡬλ₯Ό νΈμΆνμ¬ μμ μν
- μ€μ κ΄λ¦¬: MCP μλ² μ€μ Import/Export
π¨ UI/UX
- λ€ν¬λͺ¨λ μ§μ
- λ°μν λμμΈ (λͺ¨λ°μΌ μ¬μ΄λλ° μ€λ²λ μ΄)
- μ§κ΄μ μΈ ν κΈ°λ° MCP κ΄λ¦¬ UI
μμνκΈ°
1. API ν€ μ€μ
λ¨Όμ Google AI Studioμμ API ν€λ₯Ό λ°κΈλ°μΌμΈμ:
.env.example νμΌμ 볡μ¬νμ¬ .env.local νμΌμ μμ±νκ³ , API ν€λ₯Ό μ
λ ₯νμΈμ:
cp .env.example .env.local
.env.local νμΌμ μ΄μ΄ λ€μκ³Ό κ°μ΄ μμ :
NEXT_PUBLIC_GEMINI_API_KEY=your_actual_api_key_here
2. κ°λ° μλ² μ€ν
pnpm dev
λΈλΌμ°μ μμ http://localhost:3000μ μ΄μ΄ νμΈνμΈμ.
μ¬μ© λ°©λ²
μ±ν λ°© κ΄λ¦¬
- μ μ±ν μμ±: μ’μΈ‘ μ¬μ΄λλ°μ "μ μ±ν " λ²νΌ ν΄λ¦
- μ±ν λ°© μ ν: μ¬μ΄λλ°μμ μνλ μ±ν λ°© μ ν
- μ±ν λ°© μμ : μ±ν λ°©μ λ§μ°μ€λ₯Ό μ¬λ¦¬κ³ μμ λ²νΌ ν΄λ¦
- λͺ¨λ°μΌ: μ’μΈ‘ μλ¨ νλ²κ±° λ©λ΄λ‘ μ¬μ΄λλ° ν κΈ
MCP μλ² κ΄λ¦¬
-
μλ² λ±λ‘:
- μ¬μ΄λλ°μμ "MCP μλ²" λ²νΌ ν΄λ¦
- "μλ² μΆκ°" λ²νΌμΌλ‘ μ MCP μλ² μΆκ°
- Transport νμ μ ν (SSE, HTTP, STDIO)
- URL λλ Command μ λ ₯
-
μλ² μ°κ²°:
- λ±λ‘λ μλ² μΉ΄λμμ μ°κ²° λ²νΌ ν΄λ¦
- μ°κ²° μ±κ³΅ μ λꡬ/ν둬ννΈ/리μμ€ μλ λ‘λ
-
λꡬ μ¬μ©:
- "λꡬ" νμμ μ°κ²°λ μλ²μ λꡬ νμΈ
- νλΌλ―Έν° μ λ ₯ ν "Execute" λ²νΌμΌλ‘ ν μ€νΈ
- AI μ±ν μμ μλμΌλ‘ λꡬ νΈμΆ κ°λ₯
-
μ€μ λ°±μ :
- "λ΄λ³΄λ΄κΈ°" λ²νΌμΌλ‘ μλ² μ€μ JSON λ€μ΄λ‘λ
- "κ°μ Έμ€κΈ°" λ²νΌμΌλ‘ μ€μ 볡μ
AI Function Calling
- MCP μλ²κ° μ°κ²°λλ©΄ AIκ° μλμΌλ‘ μ¬μ© κ°λ₯ν λꡬλ₯Ό μΈμ
- λν μ€ νμμ AIκ° μλμΌλ‘ MCP λꡬλ₯Ό νΈμΆ
- λꡬ μ€ν κ²°κ³Όκ° μλ΅μ ν¬ν¨λ¨
λ©μμ§ μ μ‘
- Enter: λ©μμ§ μ μ‘
- Shift + Enter: μ€λ°κΏ
- κ° μ±ν λ°©μ λ 립μ μΈ λν λ§₯λ½μ μ μ§ν©λλ€
μλ κΈ°λ₯
- 첫 λ©μμ§λ₯Ό κΈ°λ°μΌλ‘ μ±ν λ°© μ λͺ©μ΄ μλ μμ±λ©λλ€
- λͺ¨λ μ±ν λ΄μμ LocalStorageμ μλ μ μ₯λ©λλ€
- λ§μ§λ§μΌλ‘ μ¬μ©ν μ±ν λ°©μ΄ μλμΌλ‘ μ νλ©λλ€
- MCP μλ² μ€μ λ LocalStorageμ μ μ₯λ©λλ€
κΈ°μ μ€ν
- νλ μμν¬: Next.js 15.5.6 (App Router)
- UI: React 19, Tailwind CSS
- AI SDK: @google/generative-ai
- MCP SDK: @modelcontextprotocol/sdk
- λ§ν¬λ€μ΄: react-markdown, remark-gfm
- μ½λ νμ΄λΌμ΄ν : react-syntax-highlighter
- μμ΄μ½: lucide-react
- μΈμ΄: TypeScript
- μν κ΄λ¦¬: React Context API
μν€ν μ²
MCP ν΅ν© ꡬ쑰
βββββββββββββββββββ
β Chat UI β
β (app/page.tsx) β
ββββββββββ¬βββββββββ
β
ββ> MCPContext (μ μ μν)
β
ββ> API Routes (/api/mcp/*)
β ββ connect
β ββ disconnect
β ββ tools (list & execute)
β ββ prompts (list & get)
β ββ resources (list & read)
β
ββ> MCP Client Manager (μ±κΈν€)
ββ STDIO Transport
ββ SSE Transport
ββ HTTP Transport
μ£Όμ μ»΄ν¬λνΈ
- MCPContext: μλ² μ€μ , μ°κ²° μν, μΊμ κ΄λ¦¬
- MCP Client Manager: μλ²λ³ Client μΈμ€ν΄μ€ κ΄λ¦¬
- API Routes: ν΄λΌμ΄μΈνΈ-μλ² ν΅μ λ μ΄μ΄
- MCP UI Components: ServerCard, ToolExecutor, PromptViewer, ResourceViewer
MCP μλ² μμ
SSE Transport
{
"name": "My MCP Server",
"transport": "sse",
"url": "http://localhost:3001/mcp/sse"
}
STDIO Transport (μλ² νκ²½λ§)
{
"name": "Local MCP Server",
"transport": "stdio",
"command": "node",
"args": ["server.js"]
}
μ£Όμμ¬ν
- STDIO Transport: Next.js API Routesλ μλ²λ¦¬μ€ νκ²½μμ μ€νλλ―λ‘, STDIO transportλ μ₯μκ° μ°κ²° μ μ§κ° μ΄λ €μΈ μ μμ΅λλ€. νλ‘λμ νκ²½μμλ SSE λλ HTTP transport κΆμ₯.
- CORS: SSE/HTTP transport μ¬μ© μ MCP μλ²μμ CORS μ€μ νμ.
- 보μ: API Routesμμ MCP λꡬ μ€ν μ μ λ ₯κ° κ²μ¦ νμ.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
