Flowbite MCP UI: AI 대화창에 인터랙티브 React UI를 띄우는 오픈소스 스타터 키트

AI에게 “이번 주 매출 보여줘”라고 물으면 어떤 답변을 원하시나요? 숫자 나열이나 Markdown 표보다는, 기간 선택 버튼과 꺾은선 그래프, 지점별 테이블이 대화창 안에 직접 나타난다면 훨씬 유용할 겁니다.

먼저 결론부터 말하면, Flowbite MCP UI는 MCP 서버가 텍스트 대신 실제 React UI를 AI 클라이언트에 렌더링하도록 만드는 오픈소스 스타터 키트입니다. 아직 초기 단계의 예제 프로젝트이지만, AI 대화형 앱의 구조를 검증하는 PoC 기반으로 매우 유용합니다.

이 글에서 다루는 내용:

• Flowbite MCP UI가 제공하는 것과 제공하지 않는 것
• 기존 Flowbite MCP Server와의 차이
• 동작 구조와 위젯 개발 방법
• 실제 적용 사례와 주의해야 할 점

공식 데모 영상(GitHub) ↗과 라이브 데모 ↗에서 AI 대화창 안에서 위젯이 렌더링되는 모습을 직접 확인할 수 있습니다.

배경: 텍스트 MCP의 한계

MCP(Model Context Protocol)는 AI 클라이언트와 서버 간 통신을 표준화하는 프로토콜입니다. 일반적인 MCP 서버는 AI에게 함수나 데이터를 제공하고, 결과는 텍스트나 Markdown으로 돌아옵니다.

문제는 Markdown만으로는 표현하기 어려운 인터랙션이 많다는 점입니다. 체크박스, 날짜 선택, 차트, 상품 카드처럼 사용자가 직접 선택하고 탐색해야 하는 UI는 텍스트 응답으로 대체하기가 어렵습니다.

Generative UI 관점에서 비슷한 시도들이 있었습니다. OpenGenerativeUI는 Claude 스타일의 인터랙티브 시각화를 직접 구현하는 방법을 보여줬고, Vercel의 json-render는 JSON 스키마 기반으로 UI를 안전하게 생성하는 방식을 제안했습니다. Flowbite MCP UI는 그보다 한 단계 더 나아가, MCP 표준 위에서 직접 실행 가능한 React 앱을 AI 대화창 안에 띄우는 구조를 제시합니다.

Flowbite MCP vs Flowbite MCP UI

이름이 비슷해서 혼동하기 쉽지만 두 프로젝트는 목적이 다릅니다.

Flowbite MCP Server ↗는 60개 이상의 Flowbite 컴포넌트를 코딩 에이전트에 제공하고, Figma 디자인을 코드로 변환하거나 브랜드 테마를 생성하는 도구입니다. 반면 MCP UI는 직접적인 사용자용 AI 앱 화면을 만드는 프로젝트입니다.

동작 구조

MCP UI 앱의 전체 흐름은 다음과 같습니다.

sequenceDiagram
    participant User as 사용자
    participant AI as ChatGPT/Claude/Gemini
    participant MCP as Express MCP Server<br/>/mcp endpoint
    participant Widget as React Widget<br/>(Vite + Flowbite)

    User->>AI: "이번 주 매출 보여줘"
    AI->>MCP: MCP 도구 호출
    MCP->>MCP: 데이터 처리 & UI 리소스 결정
    MCP->>AI: structuredContent + 위젯 URL 반환
    AI->>Widget: 위젯 렌더링 요청
    Widget->>User: 대화창 안에 React UI 표시

스타터 프로젝트는 한 프로세스에서 세 가지를 함께 제공합니다.

1. /mcp 경로의 MCP 백엔드 (Express + Skybridge)
2. Vite 기반 React UI
3. Flowbite로 만들어진 위젯 예제 7종

로컬에서는 기본 3000번 포트로 실행되고, ngrok 같은 HTTP 터널로 외부 AI 클라이언트에 노출한 뒤 /mcp 주소를 커넥터로 등록합니다.

제공 위젯 목록

현재 공개된 예제에는 다음 UI가 포함되어 있습니다.

완성된 SaaS라기보다는 AI 대화형 앱을 만드는 개발용 템플릿과 UI 예제 모음에 가깝습니다.

시작하기

기본 실행

# 저장소 클론
git clone https://github.com/themesberg/mcp-ui-starter.git
cd mcp-ui-starter

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev --use-forwarded-host

# ngrok으로 외부 접근 허용
ngrok http 3000

생성된 주소에 /mcp를 붙여 AI 클라이언트에 등록합니다.

https://xxxx.ngrok-free.app/mcp

AI 클라이언트별 연결

Claude Code:

claude mcp add --transport http "https://xxxx.ngrok-free.app/mcp"

Cursor (mcp.json):

{
  "mcpServers": {
    "my-mcp-app": {
      "type": "http",
      "url": "https://xxxx.ngrok-free.app/mcp"
    }
  }
}

Codex:

codex mcp add --url "https://xxxx.ngrok-free.app/mcp"

ChatGPT, Claude Web, Gemini CLI, VS Code, Mistral AI 연결 예제도 공식 문서 ↗에 제공됩니다.

위젯 직접 만들기

새 위젯은 서버 컴포넌트와 웹 컴포넌트 두 파일로 구성됩니다.

서버 컴포넌트

// server/src/widgets/basic-text-server.tsx
// from: https://flowbite.com/docs/getting-started/mcp-ui/
import { z } from "zod";

export const basicTextWidget = {
  name: "basic-text" as const,
  metadata: {
    description: "Basic Text",
  },
  toolConfig: {
    description: "Show a text message based on a question.",
    inputSchema: {
      question: z.string().describe("The user's question."),
    },
  },
  handler: async () => {
    try {
      const answer = "Hello, world!";
      return {
        structuredContent: { answer },
        content: [],
        isError: false,
      };
    } catch (error) {
      return {
        content: [{ type: "text" as const, text: `Error: ${error}` }],
        isError: true,
      };
    }
  },
};

웹 컴포넌트

// web/src/widgets/basic-text.tsx
// from: https://flowbite.com/docs/getting-started/mcp-ui/
import "@/index.css";
import { mountWidget } from "skybridge/web";
import { useToolInfo } from "../helpers";

function BasicTextWidget() {
  const { input, output } = useToolInfo<"basic-text">();

  if (!output) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <p>Question: {input.question}</p>
      <p>Answer: {output.answer}</p>
    </div>
  );
}

export default BasicTextWidget;
mountWidget();

서버에 위젯 등록

// server.ts
import { McpServer } from "skybridge/server";
import { basicTextWidget } from "./widgets/basic-text-server.js";

const server = new McpServer(
  { name: "mcp-ui-components", version: "0.0.1" },
  { capabilities: {} }
).registerWidget(
  basicTextWidget.name,
  basicTextWidget.metadata,
  basicTextWidget.toolConfig,
  basicTextWidget.handler
);

실전 적용 사례

검색 서비스 인터랙션

AI 답변 아래에 다음을 직접 표시할 수 있습니다.

• 기간·조건 선택 라디오 버튼
• 추세 꺾은선 그래프
• 데이터 테이블
• 후속 작업용 체크박스

단순 자연어 답변보다 사용자가 정보를 탐색하고 선택하기 훨씬 쉬워집니다.

사내 운영 도구

• 장애 현황 대시보드
• 배포 대상 선택
• 승인·반려 버튼
• KPI 차트 및 상세 테이블

자연어 명령과 기존 관리 도구 UI의 중간 형태를 만들 때 특히 유용합니다.

커머스·예약

• 상품 비교 카드
• 옵션 선택 폼
• QR 코드 발급

AI가 추천만 하는 것이 아니라 실제 선택 흐름까지 이어갈 수 있습니다.

주의사항

실제 서비스에 적용하기 전에 반드시 검증해야 할 항목:

• 클라이언트별 UI 지원 범위 — 호스트마다 렌더링 가능한 위젯 종류가 다를 수 있음
• iframe·웹 리소스 실행 정책 — CSP와 외부 도메인 허용 정책 확인 필요
• 인증과 세션 전달 — 사용자 인증 정보를 위젯에 어떻게 전달할지 설계 필요
• 모바일·데스크톱 렌더링 차이 — 위젯 반응형 처리 필수
• 민감 작업 확인 절차 — 결제, 삭제 같은 작업에 대한 이중 확인 로직 필요

마무리

Flowbite MCP UI의 핵심 가치는 “AI에게 도구만 제공하는 MCP”에서 “AI 내부에서 직접 실행되는 미니 웹앱”으로 확장하는 참고 구현이라는 점입니다.

프로젝트의 실체를 정확히 표현하면 다음 조합입니다.

MCP 서버 스타터
+ React 위젯 실행 구조 (Skybridge)
+ Flowbite 디자인 컴포넌트
+ 여러 AI 클라이언트 연결 예제

검색 결과나 사내 AI 에이전트에 차트·필터·선택형 UI를 붙이려는 경우, 상당히 좋은 출발점입니다. 아직 위젯 수가 7종으로 제한적이므로 실제 서비스에서는 디자인 시스템, 상태 관리, 인증, 오류 처리, 접근성을 별도로 강화해야 합니다.

관련 포스트:

• OpenGenerativeUI: Claude식 인터랙티브 시각화 오픈소스 — CopilotKit·LangGraph 기반 Generative UI 구현
• Vercel json-render: 생성형 UI를 더 안전하게 — JSON 스키마로 안전한 UI 생성

참고 자료

• Flowbite MCP UI 공식 문서 ↗ — 전체 가이드와 클라이언트별 연결 예제
• themesberg/mcp-ui-starter GitHub ↗ — 스타터 키트 소스코드
• themesberg/flowbite-mcp GitHub ↗ — Flowbite MCP Server (코딩 에이전트용)
• Flowbite MCP Server 문서 ↗ — AI 코딩 도구에 컴포넌트 제공하는 별도 프로젝트