1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Next.jsで5分あれば作れるチャットAI

Last updated at Posted at 2024-11-06

導入

ふとしたことからAIと会話するアプリを手元でサクッと作ることになったので備忘録。

使ったもの

  • Next.js
  • v0
  • Cohere

手順

Next.jsをインストール

shadcnのテンプレートを使いました。

npx create-next-app -e https://github.com/shadcn/next-template

v0でページ作り

AIとチャットできるサービスの画面を作成してください。 ChatGPTみたいな感じで。

shadcnのコンポーネントが足りないので必要なものはインストールする。

'use client'

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { MessageSquare, Send, Plus } from "lucide-react"

export default function Component() {
  const [messages, setMessages] = useState([
    { role: 'assistant', content: 'こんにちは!どのようなことでお手伝いできますか?' },
  ])
  const [input, setInput] = useState('')

  const handleSend = () => {
    if (input.trim()) {
      setMessages([...messages, { role: 'user', content: input }])
      // ここでAIの応答を生成する処理を追加します(この例では省略)
      setMessages(prev => [...prev, { role: 'assistant', content: 'AIの応答がここに表示されます。' }])
      setInput('')
    }
  }

  return (
    <div className="flex h-screen bg-gray-100">
      <main className="flex-1 flex flex-col">
        <Card className="flex-1 flex flex-col m-4 shadow-xl">
          <CardHeader>
            <CardTitle>AI チャットアシスタント</CardTitle>
          </CardHeader>
          <CardContent className="flex-1 overflow-hidden">
            <ScrollArea className="h-full">
              {messages.map((message, index) => (
                <div key={index} className={`flex items-start mb-4 ${message.role === 'user' ? 'justify-end' : ''}`}>
                  {message.role === 'assistant' && (
                    <Avatar className="mr-2">
                      <AvatarImage src="/placeholder.svg?height=40&width=40" alt="AI" />
                      <AvatarFallback><MessageSquare className="h-5 w-5" /></AvatarFallback>
                    </Avatar>
                  )}
                  <div className={`rounded-lg p-3 max-w-[80%] ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
                    {message.content}
                  </div>
                  {message.role === 'user' && (
                    <Avatar className="ml-2">
                      <AvatarImage src="/placeholder.svg?height=40&width=40" alt="User" />
                      <AvatarFallback>U</AvatarFallback>
                    </Avatar>
                  )}
                </div>
              ))}
            </ScrollArea>
          </CardContent>
          <CardFooter>
            <form onSubmit={(e) => { e.preventDefault(); handleSend(); }} className="flex w-full items-center space-x-2">
              <Input
                type="text"
                placeholder="メッセージを入力..."
                value={input}
                onChange={(e) => setInput(e.target.value)}
              />
              <Button type="submit" size="icon">
                <Send className="h-4 w-4" />
                <span className="sr-only">送信</span>
              </Button>
            </form>
          </CardFooter>
        </Card>
      </main>
    </div>
  )
}

CohereのAPIを利用できるようにする

npm i -s cohere-ai

tokenはここから取れます。



import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { MessageSquare, Send, Plus } from "lucide-react"
+ const { CohereClientV2 } = require('cohere-ai');
+ const cohere = new CohereClientV2({
+   token: '[tokenを入れてね]',
+ });

export default function Component() {
  const [messages, setMessages] = useState([
    { role: 'assistant', content: 'こんにちは!どのようなことでお手伝いできますか?' },
  ])
  const [input, setInput] = useState('')

+  const handleSend = async () => {
    if (input.trim()) {
      setMessages([...messages, { role: 'user', content: input }])
      
+      const response = await cohere.chat({
+        model: 'command-r-plus',
+        messages: [
+          {
+            role: 'user',
+            content: input,
+          },
+        ],
+      });

+      setMessages(prev => [...prev, { role: 'assistant', content: response.message.content[0].text }])
      setInput('')
    }
  }

  return 
}

できた(あまりに荒いもgif...)
ai-chat.gif

会話ができるようにしたいなら過去のやり取りを一緒に渡したり、用途を絞りたいならプロンプトを仕込めばいいと思います。
その他UIの調整などをして終わり。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?