├── README.md ├── .env.local.example ├── .vscode └── settings.json ├── app ├── favicon.ico ├── layout.tsx ├── api │ ├── chat │ │ └── route.ts │ └── chat-with-functions │ │ └── route.ts ├── globals.css ├── function-calling │ └── page.tsx └── page.tsx ├── public ├── images │ ├── banner │ │ ├── 01.png │ │ ├── 02.png │ │ ├── 03.png │ │ └── 02_SP.png │ ├── icons │ │ ├── close.png │ │ ├── submit.png │ │ └── phone-solid.png │ ├── common │ │ └── fix-btn.png │ └── logo │ │ ├── logo-img.png │ │ └── logo-text.png └── iframe │ └── index.html ├── next.config.js ├── postcss.config.js ├── .gitignore ├── tailwind.config.js ├── tsconfig.json ├── package.json └── yarn.lock /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.env.local.example: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY=xxxxxxx -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/images/banner/01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/banner/01.png -------------------------------------------------------------------------------- /public/images/banner/02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/banner/02.png -------------------------------------------------------------------------------- /public/images/banner/03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/banner/03.png -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /public/images/banner/02_SP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/banner/02_SP.png -------------------------------------------------------------------------------- /public/images/icons/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/icons/close.png -------------------------------------------------------------------------------- /public/images/icons/submit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/icons/submit.png -------------------------------------------------------------------------------- /public/images/common/fix-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/common/fix-btn.png -------------------------------------------------------------------------------- /public/images/logo/logo-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/logo/logo-img.png -------------------------------------------------------------------------------- /public/images/logo/logo-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/logo/logo-text.png -------------------------------------------------------------------------------- /public/images/icons/phone-solid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pingtinker/next-openai-app/HEAD/public/images/icons/phone-solid.png -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import './globals.css' 2 | import { Inter } from 'next/font/google' 3 | 4 | const inter = Inter({ subsets: ['latin'] }) 5 | 6 | export const metadata = { 7 | title: 'Create Next App', 8 | description: 'Generated by create next app' 9 | } 10 | 11 | export default function RootLayout({ 12 | children 13 | }: { 14 | children: React.ReactNode 15 | }) { 16 | return ( 17 | 18 | {children} 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | './pages/**/*.{js,ts,jsx,tsx,mdx}', 5 | './components/**/*.{js,ts,jsx,tsx,mdx}', 6 | './app/**/*.{js,ts,jsx,tsx,mdx}' 7 | ], 8 | theme: { 9 | extend: { 10 | backgroundImage: { 11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', 12 | 'gradient-conic': 13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))' 14 | } 15 | }, 16 | letterSpacing: { 17 | tight: '2.5px', 18 | } 19 | }, 20 | plugins: [] 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "paths": { 23 | "@/*": ["./*"] 24 | } 25 | }, 26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 27 | "exclude": ["node_modules"] 28 | } 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-openai", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "ai": "^2.1.31", 13 | "next": "13.4.12", 14 | "openai-edge": "^1.1.0", 15 | "react": "18.2.0", 16 | "react-dom": "^18.2.0" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^17.0.12", 20 | "@types/react": "18.2.8", 21 | "@types/react-dom": "18.2.4", 22 | "autoprefixer": "^10.4.14", 23 | "eslint": "^7.32.0", 24 | "eslint-config-next": "13.4.12", 25 | "postcss": "^8.4.23", 26 | "tailwindcss": "^3.3.2", 27 | "typescript": "5.1.3" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /app/api/chat/route.ts: -------------------------------------------------------------------------------- 1 | // ./app/api/chat/route.ts 2 | import { Configuration, OpenAIApi } from 'openai-edge' 3 | import { OpenAIStream, StreamingTextResponse } from 'ai' 4 | 5 | // Create an OpenAI API client (that's edge friendly!) 6 | const config = new Configuration({ 7 | apiKey: process.env.OPENAI_API_KEY 8 | }) 9 | const openai = new OpenAIApi(config) 10 | 11 | // IMPORTANT! Set the runtime to edge 12 | export const runtime = 'edge' 13 | 14 | export async function POST(req: Request) { 15 | // Extract the `prompt` from the body of the request 16 | const { messages } = await req.json() 17 | 18 | // Ask OpenAI for a streaming chat completion given the prompt 19 | const response = await openai.createChatCompletion({ 20 | model: 'gpt-3.5-turbo', 21 | stream: true, 22 | messages: messages.map((message: any) => ({ 23 | content: message.content, 24 | role: message.role 25 | })) 26 | }) 27 | 28 | // Convert the response into a friendly text-stream 29 | const stream = OpenAIStream(response) 30 | // Respond with the stream 31 | return new StreamingTextResponse(stream) 32 | } 33 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | 6 | .chatdlg { 7 | right: -100%; 8 | } 9 | 10 | .chatdlg.active { 11 | right: 0; 12 | animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; 13 | } 14 | 15 | .chatbtn { 16 | right: -100%; 17 | } 18 | 19 | .chatbtn.active { 20 | right: 0; 21 | /* animation: shrinkToRightSP 0.2s forwards; */ 22 | } 23 | 24 | .chatbtn.active.animation { 25 | animation: shrinkToRightSP 0.2s forwards; 26 | } 27 | 28 | @media(min-width: 640px) { 29 | .chatdlg { 30 | right: 0; 31 | opacity: 0; 32 | animation: slideOut 0s forwards; 33 | } 34 | 35 | .chatdlg.active { 36 | right: 0; 37 | animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards; 38 | } 39 | 40 | .chatbtn.active { 41 | right: 0; 42 | } 43 | 44 | .chatbtn.active.animation { 45 | animation: shrinkToRightPC 0.2s forwards; 46 | } 47 | } 48 | 49 | @keyframes slideIn { 50 | 0% { 51 | transform: translateX(250px); 52 | opacity: 0; 53 | } 54 | 55 | 100% { 56 | transform: translateX(0); 57 | } 58 | 59 | 80%, 60 | 100% { 61 | opacity: 1; 62 | } 63 | } 64 | 65 | @keyframes slideOut { 66 | 0% { 67 | opacity: 1; 68 | height: 750px; 69 | bottom: 20px; 70 | } 71 | 72 | 90% { 73 | height: 1px; 74 | width: 100%; 75 | } 76 | 77 | 100% { 78 | height: 0; 79 | width: 0; 80 | bottom: 20px; 81 | } 82 | } 83 | 84 | @keyframes shrinkToRightPC { 85 | 0% { 86 | width: 450px; 87 | padding-right: 270px; 88 | background-color: #2E63A5; 89 | border-radius: 35px; 90 | } 91 | 92 | 100% { 93 | width: 180px; 94 | padding-right: 0; 95 | background-color: #2E63A5; 96 | border-radius: 35px; 97 | } 98 | } 99 | 100 | @keyframes shrinkToRightSP { 101 | 0% { 102 | width: 96%; 103 | padding-right: calc(96% - 180PX); 104 | background-color: #2E63A5; 105 | border-radius: 35px; 106 | } 107 | 108 | 100% { 109 | width: 180px; 110 | padding-right: 0; 111 | background-color: #2E63A5; 112 | border-radius: 35px; 113 | } 114 | } -------------------------------------------------------------------------------- /app/function-calling/page.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import { Message } from 'ai/react' 4 | import { useChat } from 'ai/react' 5 | import { ChatRequest, FunctionCallHandler, nanoid } from 'ai' 6 | 7 | export default function Chat() { 8 | const functionCallHandler: FunctionCallHandler = async ( 9 | chatMessages, 10 | functionCall 11 | ) => { 12 | if (functionCall.name === 'eval_code_in_browser') { 13 | if (functionCall.arguments) { 14 | // Parsing here does not always work since it seems that some characters in generated code aren't escaped properly. 15 | const parsedFunctionCallArguments: { code: string } = JSON.parse( 16 | functionCall.arguments 17 | ) 18 | // WARNING: Do NOT do this in real-world applications! 19 | eval(parsedFunctionCallArguments.code) 20 | const functionResponse = { 21 | messages: [ 22 | ...chatMessages, 23 | { 24 | id: nanoid(), 25 | name: 'eval_code_in_browser', 26 | role: 'function' as const, 27 | content: parsedFunctionCallArguments.code 28 | } 29 | ] 30 | } 31 | return functionResponse 32 | } 33 | } 34 | } 35 | 36 | const { messages, input, handleInputChange, handleSubmit } = useChat({ 37 | api: '/api/chat-with-functions', 38 | experimental_onFunctionCall: functionCallHandler 39 | }) 40 | 41 | // Generate a map of message role to text color 42 | const roleToColorMap: Record = { 43 | system: 'red', 44 | user: 'black', 45 | function: 'blue', 46 | assistant: 'green' 47 | } 48 | 49 | return ( 50 |
51 | {messages.length > 0 52 | ? messages.map((m: Message) => ( 53 |
58 | {`${m.role}: `} 59 | {m.content || JSON.stringify(m.function_call)} 60 |
61 |
62 |
63 | )) 64 | : null} 65 |
66 | 67 |
68 | 74 |
75 |
76 | ) 77 | } 78 | -------------------------------------------------------------------------------- /app/api/chat-with-functions/route.ts: -------------------------------------------------------------------------------- 1 | import { Configuration, OpenAIApi } from 'openai-edge' 2 | import { OpenAIStream, StreamingTextResponse } from 'ai' 3 | import { ChatCompletionFunctions } from 'openai-edge/types/api' 4 | 5 | // Create an OpenAI API client (that's edge friendly!) 6 | const config = new Configuration({ 7 | apiKey: process.env.OPENAI_API_KEY 8 | }) 9 | const openai = new OpenAIApi(config) 10 | 11 | // IMPORTANT! Set the runtime to edge 12 | export const runtime = 'edge' 13 | 14 | const functions: ChatCompletionFunctions[] = [ 15 | { 16 | name: 'get_current_weather', 17 | description: 'Get the current weather', 18 | parameters: { 19 | type: 'object', 20 | properties: { 21 | format: { 22 | type: 'string', 23 | enum: ['celsius', 'fahrenheit'], 24 | description: 25 | 'The temperature unit to use. Infer this from the users location.' 26 | } 27 | }, 28 | required: ['format'] 29 | } 30 | }, 31 | { 32 | name: 'eval_code_in_browser', 33 | description: 'Execute javascript code in the browser with eval().', 34 | parameters: { 35 | type: 'object', 36 | properties: { 37 | code: { 38 | type: 'string', 39 | description: `Javascript code that will be directly executed via eval(). Do not use backticks in your response. 40 | DO NOT include any newlines in your response, and be sure to provide only valid JSON when providing the arguments object. 41 | The output of the eval() will be returned directly by the function.` 42 | } 43 | }, 44 | required: ['code'] 45 | } 46 | } 47 | ] 48 | 49 | export async function POST(req: Request) { 50 | const { messages } = await req.json() 51 | 52 | const response = await openai.createChatCompletion({ 53 | model: 'gpt-3.5-turbo-0613', 54 | stream: true, 55 | messages, 56 | functions 57 | }) 58 | 59 | const stream = OpenAIStream(response, { 60 | experimental_onFunctionCall: async ( 61 | { name, arguments: args }, 62 | createFunctionCallMessages 63 | ) => { 64 | if (name === 'get_current_weather') { 65 | // Call a weather API here 66 | const weatherData = { 67 | temperature: 20, 68 | unit: args.format === 'celsius' ? 'C' : 'F' 69 | } 70 | const newMessages = createFunctionCallMessages(weatherData) 71 | return openai.createChatCompletion({ 72 | messages: [...messages, ...newMessages], 73 | stream: true, 74 | model: 'gpt-3.5-turbo-0613', 75 | functions 76 | }) 77 | } 78 | } 79 | }) 80 | 81 | return new StreamingTextResponse(stream) 82 | } 83 | -------------------------------------------------------------------------------- /public/iframe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 116 | 117 | 118 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useState, useEffect, useRef } from "react"; 4 | import { useChat } from "ai/react"; 5 | import Image from "next/image"; 6 | import Link from "next/link"; 7 | import { useSearchParams } from "next/navigation"; 8 | 9 | export default function Chat() { 10 | const searchParams = useSearchParams(); 11 | const deviceType = searchParams.get('type'); 12 | const [isActive, setIsActive] = useState(false); 13 | const [isAnimation, setIsAnimation] = useState(false); 14 | const { messages, input, handleInputChange, handleSubmit } = useChat(); 15 | const [isModalVisible, setModalVisible] = useState(false); 16 | const chatHistoryRef_PC = useRef(null); 17 | const chatHistoryRef_SP = useRef(null); 18 | const chatHistoryRef_TB = useRef(null); 19 | 20 | const toggleClass = () => { 21 | setIsActive(!isActive); 22 | setIsAnimation(true); 23 | }; 24 | 25 | useEffect(() => { 26 | if (chatHistoryRef_PC.current) { 27 | const element = chatHistoryRef_PC.current; 28 | element.scrollTop = element.scrollHeight; 29 | } 30 | if (chatHistoryRef_SP.current) { 31 | const element = chatHistoryRef_SP.current; 32 | element.scrollTop = element.scrollHeight; 33 | } 34 | if (chatHistoryRef_TB.current) { 35 | const element = chatHistoryRef_TB.current; 36 | element.scrollTop = element.scrollHeight; 37 | } 38 | }); 39 | 40 | useEffect(() => { 41 | if (deviceType === "pc") { 42 | let height = "70px"; 43 | let width = "180px"; 44 | if (isActive) { 45 | width = "446px"; 46 | height = "720px"; 47 | } 48 | window.parent.postMessage({ width, height, isActive, deviceType }, "*"); 49 | } 50 | 51 | if (deviceType === "tablet") { 52 | let height = "70px"; 53 | let width = "180px"; 54 | if (isActive) { 55 | width = "446px"; 56 | height = "720px"; 57 | } 58 | window.parent.postMessage({ width, height, isActive, deviceType }, "*"); 59 | } 60 | 61 | if (deviceType === "sp") { 62 | let height = "70px"; 63 | let width = "180px"; 64 | if (isActive) { 65 | width = "calc(100% - 40px)"; 66 | height = "calc(100vh - 40px)"; 67 | } 68 | window.parent.postMessage({ width, height, isActive, deviceType }, "*"); 69 | } 70 | }, [isActive]); 71 | 72 | const handleCall = () => { 73 | window.location.href = "tel:+0120-965-982"; 74 | } 75 | 76 | const callTo = () => { 77 | window.location.href = "tel:0120-965-982"; 78 | } 79 | 80 | if (deviceType === "pc") { 81 | console.log(); 82 | return ( 83 |
84 |
88 |
89 | AIドクター うえの君 98 |
99 |
100 | AIドクター うえの君 108 |
109 |
110 | AIドクター うえの君 118 |

119 | 治療のことなど何でもお聞きください。 120 |

121 |

個人情報不要です。

122 |

123 | ※専門スタッフへの相談・カウンセリングもご利用ください。 124 |

125 |
126 |
127 |
131 |
132 | AIドクター 133 | うえの君です、上野クリニック治療に関することなど、お気軽にお聞きください。 134 |
135 | {messages.length > 0 136 | ? messages.map((m) => ( 137 |
145 | {m.content} 146 |
147 | )) 148 | : null} 149 |
150 |
151 |
152 |
153 |