> Discover all available pages from the documentation index: https://mastra.zisheng.pro/ko/llms.txt

# 어시스턴트 UI 사용

[어시스턴트 UI](https://assistant-ui.com)AI Chat용 TypeScript/React 라이브러리입니다. shadcn/ui 및 Tailwind CSS를 기반으로 구축되어 개발자는 몇 분 만에 멋진 엔터프라이즈급 채팅 환경을 만들 수 있습니다.

> **정보:** Mastra가 Next.js API 경로에서 직접 실행되는 전체 스택 통합 접근 방식은 다음을 참조하세요.[Full-Stack Integration Guide](https://www.assistant-ui.com/docs/integrations/frameworks/mastra/full-stack) on Assistant UI's documentation site.

마스트라(Mastra)를 방문해 보세요[**"UI Dojo"**](https://ui-dojo.mastra.ai/) Mastra와 통합된 Assistant UI의 실제 사례를 확인하세요.

## 통합 가이드

Mastra를 독립형 서버로 실행하고 Next.js 프런트엔드(Assistant UI 포함)를 API 엔드포인트에 연결하세요.

1. 디렉터리 구조를 설정합니다. 가능한 디렉터리 구조는 다음과 같습니다.

   ```bash
   project-root
   ├── mastra-server
   │   ├── src
   │   │   └── mastra
   │   └── package.json
   └── my-app
       └── package.json
   ```

   Mastra 서버를 부트스트랩합니다.

   ```bash
   npx create-mastra@latest
   ```

   이 명령은 프로젝트 이름을 묻는 메시지와 기본 구성 설정을 포함하여 새로운 Mastra 프로젝트를 스캐폴드하는 데 도움이 되는 대화형 마법사를 시작합니다. 메시지에 따라 서버 프로젝트를 만듭니다.

   새로 생성된 Mastra 서버 디렉터리로 이동합니다.

   ```bash
   cd mastra-server # Replace with the actual directory name you provided
   ```

   이제 기본 Mastra 서버 프로젝트가 준비되었습니다. 다음 파일과 폴더가 있어야 합니다.

   ```bash
   src
   └── mastra
       ├── agents
       │   └── weather-agent.ts
       ├── scorers
       │   └── weather-scorer.ts
       ├── tools
       │   └── weather-tool.ts
       ├── workflows
       │   └── weather-workflow.ts
       └── index.ts
   ```

   > **노트:** 다음에서 LLM 공급자에 대한 적절한 환경 변수를 설정했는지 확인하세요.`.env` file.

2. 다음을 사용하여 Assistant UI 프런트엔드에 대한 채팅 경로를 만듭니다.`chatRoute()` helper from `@mastra/ai-sdk`. Add it to your Mastra project:

   **npm**:

   ```bash
   npm install @mastra/ai-sdk@latest
   ```

   **pnpm**:

   ```bash
   pnpm add @mastra/ai-sdk@latest
   ```

   **Yarn**:

   ```bash
   yarn add @mastra/ai-sdk@latest
   ```

   **Bun**:

   ```bash
   bun add @mastra/ai-sdk@latest
   ```

   당신의`src/mastra/index.ts` file, register the chat route:

   ```typescript
   import { Mastra } from '@mastra/core/mastra'
   import { chatRoute } from '@mastra/ai-sdk'
   // Rest of the imports...

   export const mastra = new Mastra({
     // Rest of the configuration...
     server: {
       apiRoutes: [
         chatRoute({
           path: '/chat/:agentId',
         }),
       ],
     },
   })
   ```

   이렇게 하면 모든 Agent를 AI SDK 호환 형식으로 사용할 수 있게 됩니다.`weatherAgent` at the endpoint `/chat/weatherAgent`.

3. 다음 명령을 사용하여 Mastra 서버를 실행하십시오.

   ```bash
   npm run dev
   ```

   기본적으로 Mastra 서버는 다음에서 실행됩니다.`http://localhost:4111`. 다음 단계에서 Assistant UI 프런트엔드가 이 서버에 연결되도록 설정할 예정이므로 서버를 계속 실행해 두세요.

4. 프로젝트 루트의 한 디렉터리로 이동합니다.

   ```bash
   cd ..
   ```

   새로 만들기`assistant-ui` project with the following command.

   ```bash
   npx assistant-ui@latest create
   ```

   > **노트:** API 키 추가, 기본 구성, 수동 설정 단계를 포함한 자세한 설정 지침은 다음을 참조하세요.[assistant-ui's official documentation](https://assistant-ui.com/docs).

5. 기본 Assistant UI 설정은 로컬 API 경로(`/api/chat`)를 Next.js 프로젝트 내에서 찾습니다. Mastra Agent가 별도의 서버에서 실행되고 있으므로 해당 서버의 엔드포인트를 가리키도록 프런트엔드를 업데이트해야 합니다.

   다음이 포함된 Assistant-ui 프론트엔드 프로젝트에서 파일을 엽니다.`useChatRuntime` hook (usually `app/assistant.tsx` or `src/app/assistant.tsx`). Find the `useChatRuntime` hook and change the `api` 속성을 Mastra Agent의 스트림 엔드포인트 전체 URL로 설정합니다:

   ```tsx
   'use client'

   // Rest of the imports...

   export const Assistant = () => {
     const runtime = useChatRuntime({
       transport: new AssistantChatTransport({
         api: 'http://localhost:4111/chat/weatherAgent',
       }),
     })

     // Rest of the component...
   }
   ```

   이제 Assistant UI 프런트엔드는 실행 중인 Mastra 서버에 직접 채팅 요청을 보냅니다.

6. 조각들을 연결할 준비가 되었습니다! Mastra 서버와 Assistant UI 프런트엔드가 모두 실행되고 있는지 확인하세요. Next.js 개발 서버를 시작합니다:

   ```bash
   npm run dev
   ```

   이제 브라우저에서 Agent과 채팅할 수 있습니다.

축하해요! 별도의 서버 접근 방식을 사용하여 Mastra를 Assistant UI와 성공적으로 통합했습니다. 이제 Assistant UI 프런트엔드가 독립형 Mastra Agent 서버와 통신합니다.