어시스턴트 UI 사용

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

정보

Mastra가 Next.js API 경로에서 직접 실행되는 전체 스택 통합 접근 방식은 다음을 참조하세요.Full-Stack Integration Guide on Assistant UI's documentation site.

마스트라(Mastra)를 방문해 보세요"UI Dojo" Mastra와 통합된 Assistant UI의 실제 사례를 확인하세요.

통합 가이드
통합 가이드에 대한 직접 링크

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

디렉터리 구조를 설정합니다. 가능한 디렉터리 구조는 다음과 같습니다.
```
project-root
├── mastra-server
│   ├── src
│   │   └── mastra
│   └── package.json
└── my-app
    └── package.json
```
Mastra 서버를 부트스트랩합니다.
```
npx create-mastra@latest
```
이 명령은 프로젝트 이름을 묻는 메시지와 기본 구성 설정을 포함하여 새로운 Mastra 프로젝트를 스캐폴드하는 데 도움이 되는 대화형 마법사를 시작합니다. 메시지에 따라 서버 프로젝트를 만듭니다.
새로 생성된 Mastra 서버 디렉터리로 이동합니다.
```
cd mastra-server # Replace with the actual directory name you provided
```
이제 기본 Mastra 서버 프로젝트가 준비되었습니다. 다음 파일과 폴더가 있어야 합니다.
```
src
└── mastra
    ├── agents
    │   └── weather-agent.ts
    ├── scorers
    │   └── weather-scorer.ts
    ├── tools
    │   └── weather-tool.ts
    ├── workflows
    │   └── weather-workflow.ts
    └── index.ts
```
노트
다음에서 LLM 공급자에 대한 적절한 환경 변수를 설정했는지 확인하세요..env file.

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

npm
pnpm
Yarn
Bun

npm install @mastra/ai-sdk@latest

pnpm add @mastra/ai-sdk@latest

yarn add @mastra/ai-sdk@latest

bun add @mastra/ai-sdk@latest

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

src/mastra/index.ts
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.

다음 명령을 사용하여 Mastra 서버를 실행하십시오.
```
npm run dev
```
기본적으로 Mastra 서버는 다음에서 실행됩니다.http://localhost:4111. 다음 단계에서 Assistant UI 프런트엔드가 이 서버에 연결되도록 설정할 예정이므로 서버를 계속 실행해 두세요.
프로젝트 루트의 한 디렉터리로 이동합니다.
```
cd ..
```
새로 만들기assistant-ui project with the following command.
```
npx assistant-ui@latest create
```
노트
API 키 추가, 기본 구성, 수동 설정 단계를 포함한 자세한 설정 지침은 다음을 참조하세요.assistant-ui's official documentation.
기본 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로 설정합니다:
app/assistant.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 서버에 직접 채팅 요청을 보냅니다.
조각들을 연결할 준비가 되었습니다! Mastra 서버와 Assistant UI 프런트엔드가 모두 실행되고 있는지 확인하세요. Next.js 개발 서버를 시작합니다:
```
npm run dev
```
이제 브라우저에서 Agent과 채팅할 수 있습니다.

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

통합 가이드통합 가이드에 대한 직접 링크

통합 가이드
통합 가이드에 대한 직접 링크