freemcplab / 디렉터리 / 플레이그라운드 / scira-mcp-chat

● 커뮤니티 zaidmukaddam ⚡ 바로 사용

scira-mcp-chat

Name: scira-mcp-chat MCP Server
Author: zaidmukaddam

제작: zaidmukaddam · zaidmukaddam/scira-mcp-chat

A minimalist open-source MCP client web app — bring your own LLM, add MCP servers through a UI, and chat.

scira-mcp-chat is a Next.js web chat interface that acts as an MCP client. Stream responses via Vercel AI SDK (multiple providers), add MCP servers (HTTP or SSE) through a settings panel, and get a clean shadcn/ui interface. Pairs well with hosted MCP providers like Composio, Zapier, or Hugging Face.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

Open-source Next.js chat UI — self-host anywhere
Multi-provider LLM via Vercel AI SDK (OpenAI, Anthropic, Google, etc.)
Add MCP servers via UI (HTTP / SSE transport)
Reasoning model support — renders thinking traces
Built with shadcn/ui + Tailwind — easy to theme / fork

라이브 데모

실제 사용 모습

scira-mcp-chat.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "scira-mcp-chat": {
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "scira-mcp-chat",
      "command": "npx",
      "args": [
        "-y",
        "scira-mcp-chat"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "scira-mcp-chat": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "scira-mcp-chat"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add scira-mcp-chat -- npx -y scira-mcp-chat

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: scira-mcp-chat

Self-host an MCP-enabled chat UI for your team

👤 Small teams wanting ChatGPT-like UX with tools ⏱ ~60 min intermediate

언제 쓸까: You want internal chat with MCP tools without paying per-seat for Claude Pro / ChatGPT Team.

사전 조건

Node 20+ and Postgres — Vercel / Docker / self-hosted
LLM API keys — At least one of OpenAI / Anthropic / Google

흐름

Clone and deploy

Walk me through self-hosting scira-mcp-chat on Vercel with Postgres via Supabase.✓ 복사됨

→ Deployed URL + DB connected
Add MCP servers

In the settings UI, add Composio's HTTP endpoint for Slack + GitHub.✓ 복사됨

→ Tools visible in the chat
Share with team

How do I put this behind basic auth or SSO?✓ 복사됨

→ Next-Auth or proxy config suggestion

결과: A private chat UI with tools, way cheaper than per-seat SaaS.

함정

Keys stored per-user or globally? Depends on fork — Review auth/settings flow before putting real credentials in

Experiment with many MCP servers without editing config files

👤 MCP tinkerers / reviewers ⏱ ~30 min beginner

언제 쓸까: You want to evaluate 10 different MCP servers this weekend without modifying Claude Desktop config repeatedly.

흐름

Add servers one at a time

In the settings UI, paste the HTTP/SSE URL for each MCP server you want to try.✓ 복사됨

→ Tools list updates live
Test each

Use tool X with input Y. Report back.✓ 복사됨

→ Call + response visible

결과: Rapid MCP evaluation without restart cycles.

함정

stdio-only MCPs can't be used directly — Wrap them via a stdio-to-HTTP bridge or run via Smithery which hosts them

조합

다른 MCP와 조합해 10배 효율

scira-mcp-chat + filesystem + fetch + github

DIY Claude Desktop replacement

Add filesystem (via HTTP wrapper), fetch, and github MCPs in the settings. Use as daily driver.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
(web UI)	Natural chat	This is the chat UI itself — not an MCP to be called from another client	LLM provider cost

비용 및 제한

운영 비용

API 쿼터: Your LLM provider's rate limits
호출당 토큰: Pass-through to the model
금액: Self-hosting = just infra cost. LLM = pay-as-you-go. MCP providers (Composio etc.) have their own tiers.
팁: Use DeepSeek or Gemini Flash as the default model for team chat — 10-100x cheaper than GPT-4.

보안

권한, 시크릿, 파급범위

자격 증명 저장: API keys in env vars (self-host) or user settings (multi-user mode)

데이터 외부 송신: Your LLM provider + whichever MCP servers you add

절대 부여 금지: Unauthenticated public deployment — your LLM keys will get drained

This is a web app MCP *client*, not an MCP server. You can't add it to Claude Desktop.
Review auth before exposing on the internet — defaults may allow anyone to use your keys.

문제 해결

자주 발생하는 오류와 해결

Build fails on deploy

Next.js version mismatch — use the Node version in .nvmrc.

확인: node --version

Added MCP server, no tools appear

Transport mismatch. HTTP URL must return the MCP handshake; SSE URL must keep the stream open.

확인: curl the URL and inspect

DB connection errors

DATABASE_URL format: postgres://user:pass@host:5432/db?sslmode=require

확인: psql $DATABASE_URL

대안

scira-mcp-chat 다른 것과 비교

대안	언제 쓰나	단점/장점
LibreChat	You want a more mature, feature-rich chat UI	Heavier; MCP support via plugins
Open WebUI	You want native MCP 0.6.31+ support and Ollama integration	More complex but batteries-included
Claude Desktop / Claude Code	You only use Anthropic and want zero infra	Paid; single-user