├── template ├── .npmrc ├── .env-sample ├── static │ ├── robots.txt │ └── favicon.png ├── postcss.config.js ├── src │ ├── lib │ │ ├── images │ │ │ ├── sender.png │ │ │ ├── receiver.png │ │ │ ├── github.svg │ │ │ └── svelte-logo.svg │ │ ├── components │ │ │ ├── Footer.svelte │ │ │ ├── TextArea.svelte │ │ │ ├── SubmitButton.svelte │ │ │ ├── Profile.svelte │ │ │ ├── Message.svelte │ │ │ └── Header.svelte │ │ ├── config │ │ │ └── index.ts │ │ └── utils │ │ │ └── formatMessage.ts │ ├── app.d.ts │ ├── routes │ │ ├── about │ │ │ ├── +page.ts │ │ │ └── +page.svelte │ │ ├── +layout.svelte │ │ ├── api │ │ │ └── chat │ │ │ │ └── +server.ts │ │ ├── +page.svelte │ │ └── styles.css │ └── app.html ├── tailwind.config.js ├── .gitignore ├── gitignore ├── .eslintignore ├── .prettierignore ├── .prettierrc ├── vite.config.ts ├── .eslintrc.cjs ├── tsconfig.json ├── svelte.config.js ├── package.json └── README.md ├── .gitignore ├── package.json ├── README.md └── bin └── cli.js /template/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /template/.env-sample: -------------------------------------------------------------------------------- 1 | OPENAI_API_KEY= 2 | -------------------------------------------------------------------------------- /template/static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /template/static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WillKre/create-svelte-chatgpt/HEAD/template/static/favicon.png -------------------------------------------------------------------------------- /template/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /template/src/lib/images/sender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WillKre/create-svelte-chatgpt/HEAD/template/src/lib/images/sender.png -------------------------------------------------------------------------------- /template/src/lib/images/receiver.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WillKre/create-svelte-chatgpt/HEAD/template/src/lib/images/receiver.png -------------------------------------------------------------------------------- /template/src/lib/components/Footer.svelte: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /template/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ['./src/**/*.{html,js,svelte,ts}'], 4 | theme: { 5 | extend: {} 6 | }, 7 | plugins: [] 8 | }; 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | .vercel 10 | .output 11 | vite.config.js.timestamp-* 12 | vite.config.ts.timestamp-* 13 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | .vercel 10 | .output 11 | vite.config.js.timestamp-* 12 | vite.config.ts.timestamp-* 13 | -------------------------------------------------------------------------------- /template/gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | .vercel 10 | .output 11 | vite.config.js.timestamp-* 12 | vite.config.ts.timestamp-* 13 | -------------------------------------------------------------------------------- /template/.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /template/.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /template/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "none", 4 | "printWidth": 100, 5 | "plugins": ["prettier-plugin-svelte"], 6 | "pluginSearchDirs": ["."], 7 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-svelte-chatgpt", 3 | "version": "1.0.0", 4 | "bin": { 5 | "create-svelte-chatgpt": "./bin/cli.js" 6 | }, 7 | "dependencies": { 8 | "chalk": "^5.2.0", 9 | "enquirer": "^2.3.6", 10 | "fs-extra": "^11.1.1" 11 | }, 12 | "type": "module" 13 | } 14 | -------------------------------------------------------------------------------- /template/src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface Platform {} 9 | } 10 | } 11 | 12 | export {}; 13 | -------------------------------------------------------------------------------- /template/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vitest/config'; 3 | import wasm from 'vite-plugin-wasm'; 4 | 5 | export default defineConfig({ 6 | plugins: [sveltekit(), wasm()], 7 | test: { 8 | include: ['src/**/*.{test,spec}.{js,ts}'] 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /template/src/routes/about/+page.ts: -------------------------------------------------------------------------------- 1 | import { dev } from '$app/environment'; 2 | 3 | // we don't need any JS on this page, though we'll load 4 | // it in dev so that we get hot module replacement 5 | export const csr = dev; 6 | 7 | // since there's no dynamic data here, we can prerender 8 | // it so that it gets served as a static asset in production 9 | export const prerender = true; 10 | -------------------------------------------------------------------------------- /template/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |

%sveltekit.body%

11 | 12 | 13 | -------------------------------------------------------------------------------- /template/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 |

8 |

9 | 10 |

11 | 12 |

13 | 14 |

16 | -------------------------------------------------------------------------------- /template/src/lib/config/index.ts: -------------------------------------------------------------------------------- 1 | import receiverImg from '../images/receiver.png'; 2 | import senderImg from '../images/sender.png'; 3 | 4 | export function createConfig() { 5 | return { 6 | nickName: 'Mr. Robot', 7 | fullName: 'ChatGPT', 8 | receiverImgSrc: receiverImg, 9 | senderImgSrc: senderImg, 10 | promptPrefix: '' // e.g. 'Answer this as if you were Elon Musk: \n\n' 11 | }; 12 | } 13 | 14 | export const config = createConfig(); 15 | -------------------------------------------------------------------------------- /template/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], 5 | plugins: ['svelte3', '@typescript-eslint'], 6 | ignorePatterns: ['*.cjs'], 7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 8 | settings: { 9 | 'svelte3/typescript': () => require('typescript') 10 | }, 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2020 14 | }, 15 | env: { 16 | browser: true, 17 | es2017: true, 18 | node: true 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /template/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias 14 | // 15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes 16 | // from the referenced tsconfig.json - TypeScript does not merge them in 17 | } 18 | -------------------------------------------------------------------------------- /template/src/lib/components/TextArea.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 |

{
 7 |     const shiftEnter = e.shiftKey && e.key === 'Enter';
 8 | 
 9 |     if (shiftEnter) {
10 |       e.stopPropagation();
11 |     } else if (e.key === 'Enter') {
12 |       e.preventDefault();
13 | 
14 |       if (e.target instanceof HTMLTextAreaElement) {
15 |         e?.target?.form?.requestSubmit();
16 |       }
17 |     }
18 |   }}
19 |   bind:value={$input}
20 |   name="message"
21 |   autocomplete="off"
22 |   placeholder="Write your message!"
23 |   class="w-full max-h-[200px] pr-32 resize-none focus:placeholder-gray-400 text-gray-600 placeholder-gray-600 pl-4 bg-gray-200 rounded-md py-3"
24 | />
25 |

--------------------------------------------------------------------------------
/template/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import { vitePreprocess } from '@sveltejs/kit/vite';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 |   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 7 |   // for more information about preprocessors
 8 |   preprocess: vitePreprocess(),
 9 | 
10 |   kit: {
11 |     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
12 |     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
13 |     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
14 |     adapter: adapter()
15 |   }
16 | };
17 | 
18 | export default config;
19 |

--------------------------------------------------------------------------------
/template/src/lib/components/SubmitButton.svelte:
--------------------------------------------------------------------------------
 1 | <div class="absolute bottom-0 right-0 items-center inset-y-0 flex m">
 2 |   <button
 3 |     type="submit"
 4 |     class="inline-flex items-center justify-center rounded-lg px-4 py-3 transition duration-500 ease-in-out text-white bg-blue-500 hover:bg-blue-400"
 5 |   >
 6 |     <span class="font-bold">Send</span>
 7 |     <svg
 8 |       xmlns="http://www.w3.org/2000/svg"
 9 |       viewBox="0 0 20 20"
10 |       fill="currentColor"
11 |       class="h-6 w-6 ml-2 transform rotate-90"
12 |     >
13 |       <path
14 |         d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"
15 |       />
16 |     </svg>
17 |   </button>
18 | </div>
19 |

--------------------------------------------------------------------------------
/template/src/lib/utils/formatMessage.ts:
--------------------------------------------------------------------------------
 1 | export function formatMessage(message: string) {
 2 |   let formattedMessage = '';
 3 | 
 4 |   const codeBlockRegex = /```([^`]+?)```/g;
 5 |   const inlineCodeRegex = /`([^`]+?)`/g;
 6 |   const hasCodeBlock = codeBlockRegex.test(message);
 7 |   const hasInlineCode = inlineCodeRegex.test(message);
 8 | 
 9 |   formattedMessage = message.replace(/\n/g, '<br>');
10 | 
11 |   if (hasCodeBlock) {
12 |     formattedMessage = formattedMessage.replace(
13 |       codeBlockRegex,
14 |       '<pre style="background-color: #f0f0f0; border-radius: 4px; margin-top: 8px; margin-bottom: 8px; font-size: 12px; white-space: pre-wrap; font-family: monospace; overflow-x: auto;"><code>$1</code></pre>'
15 |     );
16 |   }
17 | 
18 |   if (hasInlineCode) {
19 |     formattedMessage = formattedMessage.replace(
20 |       inlineCodeRegex,
21 |       '<code style="background-color: #f0f0f0; border-radius: 4px; padding: 2px 4px; font-family: monospace;">$1</code>'
22 |     );
23 |   }
24 | 
25 |   return formattedMessage;
26 | }
27 |

--------------------------------------------------------------------------------
/template/src/routes/api/chat/+server.ts:
--------------------------------------------------------------------------------
 1 | import { Configuration, OpenAIApi } from 'openai-edge';
 2 | import { OpenAIStream, StreamingTextResponse } from 'ai';
 3 | 
 4 | import { OPENAI_API_KEY } from '$env/static/private';
 5 | 
 6 | import type { RequestHandler } from './$types';
 7 | 
 8 | // Create an OpenAI API client
 9 | const config = new Configuration({
10 |   apiKey: OPENAI_API_KEY
11 | });
12 | const openai = new OpenAIApi(config);
13 | 
14 | export const POST = (async ({ request }) => {
15 |   // Extract the `prompt` from the body of the request
16 |   const { messages } = await request.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 | }) satisfies RequestHandler;
33 |

--------------------------------------------------------------------------------
/template/src/lib/components/Profile.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { config } from '$lib/config';
 3 | </script>
 4 | 
 5 | <div class="flex sm:items-center justify-between py-3 border-b-2 border-gray-200">
 6 |   <div class="relative flex items-center space-x-4">
 7 |     <div class="relative">
 8 |       <span class="absolute text-green-500 right-1 bottom-1">
 9 |         <span class="relative flex h-3 w-3">
10 |           <span
11 |             class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
12 |           />
13 |           <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500" />
14 |         </span>
15 |       </span>
16 |       <img
17 |         src={config.receiverImgSrc}
18 |         alt="midjourney generated portrait"
19 |         class="w-10 sm:w-16 h-10 sm:h-16 rounded-full"
20 |       />
21 |     </div>
22 |     <div class="flex flex-col leading-tight">
23 |       <div class="text-2xl mt-1 flex items-center">
24 |         <span class="text-gray-700 mr-3">{config.nickName}</span>
25 |       </div>
26 |       <span class="text-lg text-gray-600">{config.fullName}</span>
27 |     </div>
28 |   </div>
29 | </div>
30 |

--------------------------------------------------------------------------------
/template/src/lib/components/Message.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { config } from '$lib/config';
 3 |   import { formatMessage } from '$lib/utils/formatMessage';
 4 | 
 5 |   export let message: {
 6 |     role: string;
 7 |     content: string;
 8 |   };
 9 | 
10 |   let formattedContent = '';
11 | 
12 |   $: {
13 |     formattedContent = formatMessage(message.content);
14 |   }
15 | </script>
16 | 
17 | <div class={`flex items-end ${message.role === 'user' ? 'justify-end' : ''}`}>
18 |   <div
19 |     class={`flex flex-col space-y-2 text-xs max-w-xs mx-2 ${
20 |       message.role === 'user' ? 'order-1 items-end' : 'order-2 items-start'
21 |     }`}
22 |   >
23 |     <div>
24 |       <span
25 |         class={`px-4 py-2 rounded-lg inline-block shadow-md ${
26 |           message.role === 'user'
27 |             ? 'rounded-br-none bg-blue-600 text-white'
28 |             : 'rounded-bl-none bg-gray-300 text-gray-600'
29 |         }`}
30 |       >
31 |         {@html formattedContent}
32 |       </span>
33 |     </div>
34 |   </div>
35 | 
36 |   <img
37 |     src={message.role === 'user' ? config.senderImgSrc : config.receiverImgSrc}
38 |     alt={message.role === 'user' ? 'Sender' : 'Receiver'}
39 |     class={`w-6 h-6 rounded-full ${message.role === 'user' ? 'order-2' : 'order-1'}`}
40 |   />
41 | </div>
42 |

--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-svelte-chatgpt",
 3 |   "version": "0.1.0",
 4 |   "scripts": {
 5 |     "dev": "vite dev",
 6 |     "build": "vite build",
 7 |     "preview": "vite preview",
 8 |     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 9 |     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
10 |     "test:unit": "vitest",
11 |     "lint": "prettier --plugin-search-dir . --check . && eslint .",
12 |     "format": "prettier --plugin-search-dir . --write ."
13 |   },
14 |   "dependencies": {
15 |     "ai": "^2.1.8",
16 |     "openai-edge": "^1.1.0"
17 |   },
18 |   "devDependencies": {
19 |     "@fontsource/fira-mono": "^5.0.3",
20 |     "@neoconfetti/svelte": "^1.0.0",
21 |     "@sveltejs/adapter-auto": "^2.1.0",
22 |     "@sveltejs/kit": "^1.20.5",
23 |     "@types/cookie": "^0.5.1",
24 |     "@types/node": "^20.3.1",
25 |     "@typescript-eslint/eslint-plugin": "^5.60.0",
26 |     "@typescript-eslint/parser": "^5.60.0",
27 |     "autoprefixer": "^10.4.14",
28 |     "eslint": "^8.43.0",
29 |     "eslint-config-prettier": "^8.8.0",
30 |     "eslint-plugin-svelte3": "^4.0.0",
31 |     "postcss": "^8.4.24",
32 |     "prettier": "^2.8.8",
33 |     "prettier-plugin-svelte": "^2.10.1",
34 |     "svelte": "^3.59.1",
35 |     "svelte-check": "^3.4.4",
36 |     "tailwindcss": "^3.3.2",
37 |     "tslib": "^2.5.3",
38 |     "typescript": "^5.1.3",
39 |     "vite": "^4.3.9",
40 |     "vite-plugin-wasm": "^3.2.2",
41 |     "vitest": "^0.32.2"
42 |   },
43 |   "type": "module"
44 | }
45 |

--------------------------------------------------------------------------------
/template/src/routes/about/+page.svelte:
--------------------------------------------------------------------------------
 1 | <svelte:head>
 2 |   <title>About</title>
 3 |   <meta name="description" content="About this app" />
 4 | </svelte:head>
 5 | 
 6 | <div class="text-column">
 7 |   <h1 class="mb-8">About</h1>
 8 | 
 9 |   <p>
10 |     This is a <a href="https://kit.svelte.dev">SvelteKit</a> app with built-in support for
11 |     <a href="https://openai.com/api/">ChatGPT</a> and
12 |     <a href="https://tailwindcss.com">TailwindCSS</a>. You can make your own by typing the following
13 |     into your command line and following the prompts:
14 |   </p>
15 | 
16 |   <pre class="my-8">npx create-svelte-chatgpt@latest</pre>
17 | 
18 |   <p>
19 |     The page you're looking at is purely static HTML, with no client-side interactivity needed.
20 |     Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
21 |     the devtools network panel and reloading.
22 |   </p>
23 | 
24 |   <h2 class="mt-4 mb-4 font-bold">ChatGPT</h2>
25 |   <p>
26 |     ChatGPT is a powerful language model developed by OpenAI. This app leverages ChatGPT to provide
27 |     AI-powered conversation and content generation capabilities. To interact with ChatGPT, we're
28 |     using the
29 |     <a href="https://github.com/vercel-labs/ai">AI</a> package by Vercel. Read more about their SDK
30 |     <a href="https://sdk.vercel.ai/docs">here</a>.
31 |   </p>
32 | 
33 |   <h2 class="mt-4 mb-4 font-bold">TailwindCSS</h2>
34 |   <p>
35 |     TailwindCSS is a utility-first CSS framework that allows you to build custom designs quickly and
36 |     easily. It comes preconfigured in this app, allowing you to use its utility classes to style
37 |     your components.
38 |   </p>
39 | </div>
40 |

--------------------------------------------------------------------------------
/template/src/lib/images/github.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30">
 2 | 	<path
 3 | 		fill-rule="evenodd"
 4 | 		clip-rule="evenodd"
 5 | 		d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z"
 6 | 		fill="rgba(0,0,0,0.7)"
 7 | 		stroke="none"
 8 | 	/>
 9 | 	<path
10 | 		fill-rule="evenodd"
11 | 		clip-rule="evenodd"
12 | 		d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z"
13 | 		fill="rgba(0,0,0,0.7)"
14 | 		stroke="none"
15 | 	/>
16 | </svg>

--------------------------------------------------------------------------------
/template/src/lib/images/svelte-logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Create Svelte ChatGPT
 2 | 
 3 | **`create-svelte-chatgpt`** is a project generator for building [SvelteKit](https://kit.svelte.dev/) applications powered by [ChatGPT](https://platform.openai.com/docs/api-reference). It comes with a pre-built example chat interface and other common features integrated.
 4 | 
 5 | Features include:
 6 | 
 7 | - [ChatGPT](https://platform.openai.com/docs/api-reference) integration using Vercel's [AI](https://github.com/vercel-labs/ai) package, which allows for streamed responses.
 8 | - Chat interface using [TailwindCSS](https://tailwindcss.com/) for styling / animations.
 9 | 
10 | ## Getting Started
11 | 
12 | ### Installation
13 | 
14 | ```bash
15 | npx create-svelte-chatgpt@latest
16 | ```
17 | 
18 | ### Add Environment Variable(s)
19 | 
20 | Create a `.env` file in the root directory and add your OpenAI API key.
21 | 
22 | **You can get your API key [here](https://platform.openai.com/account/api-keys) from the OpenAI dashboard.**
23 | 
24 | ```bash
25 | OPENAI_API_KEY=xxx
26 | ```
27 | 
28 | ## Demo
29 | 
30 | https://github.com/WillKre/create-svelte-chatgpt/assets/7396157/de9897bb-28e3-4e71-b142-7ce81afdd264
31 | 
32 | ## Development
33 | 
34 | To start a development server:
35 | 
36 | ```bash
37 | npm run dev
38 | 
39 | # Or start the server and open the app in a new browser tab
40 | npm run dev -- --open
41 | ```
42 | 
43 | ## Building
44 | 
45 | To create a production version of your app:
46 | 
47 | ```bash
48 | npm run build
49 | ```
50 | 
51 | You can preview the production build with `npm run preview`.
52 | 
53 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
54 | 
55 | ## Contributing
56 | 
57 | Contributions are welcome! Please create a fork of the repository, make your changes, and submit a pull request.
58 | 
59 | ## License
60 | 
61 | This project is open-source and available under the MIT License.
62 |

--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
 1 | # Create Svelte ChatGPT
 2 | 
 3 | **`create-svelte-chatgpt`** is a project generator for building [SvelteKit](https://kit.svelte.dev/) applications powered by [ChatGPT](https://platform.openai.com/docs/api-reference). It comes with a pre-built example chat interface and other common features integrated.
 4 | 
 5 | Features include:
 6 | 
 7 | - [ChatGPT](https://platform.openai.com/docs/api-reference) integration using Vercel's [AI](https://github.com/vercel-labs/ai) package, which allows for streamed responses.
 8 | - Chat interface using [TailwindCSS](https://tailwindcss.com/) for styling / animations.
 9 | 
10 | ## Getting Started
11 | 
12 | ### Installation
13 | 
14 | ```bash
15 | npx create-svelte-chatgpt@latest
16 | ```
17 | 
18 | ### Add Environment Variable(s)
19 | 
20 | Create a `.env` file in the root directory and add your OpenAI API key.
21 | 
22 | **You can get your API key [here](https://platform.openai.com/account/api-keys) from the OpenAI dashboard.**
23 | 
24 | ```bash
25 | OPENAI_API_KEY=xxx
26 | ```
27 | 
28 | ## Demo
29 | 
30 | https://github.com/WillKre/create-svelte-chatgpt/assets/7396157/de9897bb-28e3-4e71-b142-7ce81afdd264
31 | 
32 | ## Development
33 | 
34 | To start a development server:
35 | 
36 | ```bash
37 | npm run dev
38 | 
39 | # Or start the server and open the app in a new browser tab
40 | npm run dev -- --open
41 | ```
42 | 
43 | ## Building
44 | 
45 | To create a production version of your app:
46 | 
47 | ```bash
48 | npm run build
49 | ```
50 | 
51 | You can preview the production build with `npm run preview`.
52 | 
53 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
54 | 
55 | ## Contributing
56 | 
57 | Contributions are welcome! Please create a fork of the repository, make your changes, and submit a pull request.
58 | 
59 | ## License
60 | 
61 | This project is open-source and available under the MIT License.
62 |

--------------------------------------------------------------------------------
/template/src/routes/+page.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { useChat } from 'ai/svelte';
 3 |   import TextArea from '$lib/components/TextArea.svelte';
 4 |   import Profile from '$lib/components/Profile.svelte';
 5 |   import SubmitButton from '$lib/components/SubmitButton.svelte';
 6 |   import Message from '$lib/components/Message.svelte';
 7 | 
 8 |   let messageContainer: HTMLElement | null = null;
 9 | 
10 |   function scrollToBottom() {
11 |     if (messageContainer) {
12 |       messageContainer.scroll({
13 |         top: messageContainer.scrollHeight,
14 |         behavior: 'smooth'
15 |       });
16 |     }
17 |   }
18 | 
19 |   const { input, handleSubmit, messages } = useChat();
20 | 
21 |   $: {
22 |     if ($messages) {
23 |       scrollToBottom();
24 |     }
25 |   }
26 | </script>
27 | 
28 | <svelte:head>
29 |   <title>SvelteGPT</title>
30 | </svelte:head>
31 | 
32 | <div
33 |   class="flex-1 p-6 justify-between flex flex-col h-screen border-2 border-white bg-slate-300 rounded-2xl"
34 | >
35 |   <Profile />
36 | 
37 |   <div
38 |     bind:this={messageContainer}
39 |     class="max-h-[50vh] flex flex-col space-y-4 p-3 overflow-y-scroll scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch mt-auto"
40 |   >
41 |     {#each $messages as message}
42 |       <Message {message} />
43 |     {/each}
44 |   </div>
45 | 
46 |   <div class="border-t-2 border-gray-200 px-4 pt-4 mb-2 sm:mb-0">
47 |     <div class="relative flex">
48 |       <form class="w-full relative" on:submit={handleSubmit}>
49 |         <TextArea {input} />
50 |         <SubmitButton />
51 |       </form>
52 |     </div>
53 |   </div>
54 | </div>
55 | 
56 | <style lang="postcss">
57 |   .scrollbar-w-2::-webkit-scrollbar {
58 |     @apply w-1 h-1;
59 |   }
60 | 
61 |   .scrollbar-track-blue-lighter::-webkit-scrollbar-track {
62 |     @apply bg-slate-200;
63 |   }
64 | 
65 |   .scrollbar-thumb-blue::-webkit-scrollbar-thumb {
66 |     @apply bg-slate-400;
67 |   }
68 | 
69 |   .scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
70 |     @apply rounded;
71 |   }
72 | </style>
73 |

--------------------------------------------------------------------------------
/template/src/routes/styles.css:
--------------------------------------------------------------------------------
  1 | @import '@fontsource/fira-mono';
  2 | 
  3 | @tailwind base;
  4 | @tailwind components;
  5 | @tailwind utilities;
  6 | 
  7 | :root {
  8 |   --font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
  9 |     Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 10 |   --font-mono: 'Fira Mono', monospace;
 11 |   --color-bg-0: rgb(202, 216, 228);
 12 |   --color-bg-1: hsl(209, 36%, 86%);
 13 |   --color-bg-2: hsl(224, 44%, 95%);
 14 |   --color-theme-1: #ff3e00;
 15 |   --color-theme-2: #4075a6;
 16 |   --color-text: rgba(0, 0, 0, 0.7);
 17 |   --column-width: 42rem;
 18 |   --column-margin-top: 4rem;
 19 |   font-family: var(--font-body);
 20 |   color: var(--color-text);
 21 | }
 22 | 
 23 | body {
 24 |   min-height: 100vh;
 25 |   margin: 0;
 26 |   background-attachment: fixed;
 27 |   background-color: var(--color-bg-1);
 28 |   background-size: 100vw 100vh;
 29 |   background-image: radial-gradient(
 30 |       50% 50% at 50% 50%,
 31 |       rgba(255, 255, 255, 0.75) 0%,
 32 |       rgba(255, 255, 255, 0) 100%
 33 |     ),
 34 |     linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
 35 | }
 36 | 
 37 | h1,
 38 | h2,
 39 | p {
 40 |   font-weight: 400;
 41 | }
 42 | 
 43 | p {
 44 |   line-height: 1.5;
 45 | }
 46 | 
 47 | a {
 48 |   color: var(--color-theme-1);
 49 |   text-decoration: none;
 50 | }
 51 | 
 52 | a:hover {
 53 |   text-decoration: underline;
 54 | }
 55 | 
 56 | h1 {
 57 |   font-size: 2rem;
 58 |   text-align: center;
 59 | }
 60 | 
 61 | h2 {
 62 |   font-size: 1rem;
 63 | }
 64 | 
 65 | pre {
 66 |   font-size: 16px;
 67 |   font-family: var(--font-mono);
 68 |   background-color: rgba(255, 255, 255, 0.45);
 69 |   border-radius: 3px;
 70 |   box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
 71 |   padding: 0.5em;
 72 |   overflow-x: auto;
 73 |   color: var(--color-text);
 74 | }
 75 | 
 76 | .text-column {
 77 |   display: flex;
 78 |   max-width: 48rem;
 79 |   flex: 0.6;
 80 |   flex-direction: column;
 81 |   justify-content: center;
 82 |   margin: 0 auto;
 83 | }
 84 | 
 85 | input,
 86 | button {
 87 |   font-size: inherit;
 88 |   font-family: inherit;
 89 | }
 90 | 
 91 | button:focus:not(:focus-visible) {
 92 |   outline: none;
 93 | }
 94 | 
 95 | @media (min-width: 720px) {
 96 |   h1 {
 97 |     font-size: 2.4rem;
 98 |   }
 99 | }
100 |

--------------------------------------------------------------------------------
/bin/cli.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | import { execSync } from 'child_process';
 4 | import enquirer from 'enquirer';
 5 | import chalk from 'chalk';
 6 | import fs from 'fs-extra';
 7 | import path from 'path';
 8 | import { fileURLToPath } from 'url';
 9 | 
10 | async function main() {
11 | 	const response = await enquirer.prompt([
12 | 		{
13 | 			type: 'input',
14 | 			name: 'projectName',
15 | 			message: 'What is your project name?',
16 | 			initial: 'my-svelte-chatgpt',
17 | 		},
18 | 	]);
19 | 
20 | 	const projectPath = path.resolve(process.cwd(), response.projectName);
21 | 
22 | 	if (!fs.existsSync(projectPath)) {
23 | 		fs.mkdirSync(projectPath);
24 | 	} else {
25 | 		console.error(`Error: Directory ${response.projectName} already exists.`);
26 | 		process.exit(1);
27 | 	}
28 | 
29 | 	console.log('Creating a new app in', projectPath);
30 | 
31 | 	const __filename = fileURLToPath(import.meta.url);
32 | 	const __dirname = path.dirname(__filename);
33 | 	const templatePath = path.join(__dirname, '..', 'template');
34 | 
35 | 	try {
36 | 		// Copies the entire contents of the template directory to the new project directory
37 | 		await fs.copy(templatePath, projectPath);
38 | 
39 | 		// Copies the 'gitignore' file from the new project directory to the same directory as '.gitignore'
40 | 		fs.copyFileSync(
41 | 			path.join(projectPath, 'gitignore'),
42 | 			path.join(projectPath, '.gitignore'),
43 | 		);
44 | 
45 | 		// Removes the 'gitignore' file from the new project directory after renaming it to '.gitignore'
46 | 		fs.unlinkSync(path.join(projectPath, 'gitignore'));
47 | 
48 | 		// Changes the current working directory to the new project directory
49 | 		process.chdir(projectPath);
50 | 
51 | 		// Installs the dependencies, initializes Git, and makes the initial commit
52 | 		execSync('npm install', { stdio: 'inherit' });
53 | 		execSync('git init', { stdio: 'inherit' });
54 | 		execSync('git add -A', { stdio: 'inherit' });
55 | 		execSync('git commit -m "initial commit"', {
56 | 			stdio: 'inherit',
57 | 		});
58 | 
59 | 		console.log(
60 | 			chalk.green(
61 | 				`\nSuccess! Created ${response.projectName} at ${projectPath}`,
62 | 			),
63 | 		);
64 | 		console.log('\nTo get started, run the following commands:');
65 | 		console.log(chalk.cyan(`  cd ${response.projectName}`));
66 | 		console.log(
67 | 			chalk.cyan('  npm run dev'),
68 | 			'   Starts the development server. 🚀',
69 | 		);
70 | 		console.log(
71 | 			chalk.cyan('  npm run build'),
72 | 			' Builds the app for production. 🏗️',
73 | 		);
74 | 		console.log(
75 | 			chalk.cyan('  npm run preview'),
76 | 			' Runs the built app in production mode. 🌐',
77 | 		);
78 | 	} catch (error) {
79 | 		console.error('Error:', error);
80 | 	}
81 | }
82 | 
83 | main();
84 |

--------------------------------------------------------------------------------
/template/src/lib/components/Header.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { page } from '$app/stores';
  3 |   import logo from '$lib/images/svelte-logo.svg';
  4 |   import github from '$lib/images/github.svg';
  5 | </script>
  6 | 
  7 | <header>
  8 |   <div class="corner">
  9 |     <a href="https://kit.svelte.dev">
 10 |       <img src={logo} alt="SvelteKit" />
 11 |     </a>
 12 |   </div>
 13 | 
 14 |   <nav>
 15 |     <svg viewBox="0 0 2 3" aria-hidden="true">
 16 |       <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
 17 |     </svg>
 18 |     <ul>
 19 |       <li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
 20 |         <a href="/">Home</a>
 21 |       </li>
 22 |       <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 23 |         <a href="/about">About</a>
 24 |       </li>
 25 |     </ul>
 26 |     <svg viewBox="0 0 2 3" aria-hidden="true">
 27 |       <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
 28 |     </svg>
 29 |   </nav>
 30 | 
 31 |   <div class="corner">
 32 |     <a href="https://github.com/WillKre/create-svelte-chatgpt">
 33 |       <img src={github} alt="GitHub" />
 34 |     </a>
 35 |   </div>
 36 | </header>
 37 | 
 38 | <style>
 39 |   header {
 40 |     display: flex;
 41 |     justify-content: space-between;
 42 |   }
 43 | 
 44 |   .corner {
 45 |     width: 3em;
 46 |     height: 3em;
 47 |   }
 48 | 
 49 |   .corner a {
 50 |     display: flex;
 51 |     align-items: center;
 52 |     justify-content: center;
 53 |     width: 100%;
 54 |     height: 100%;
 55 |   }
 56 | 
 57 |   .corner img {
 58 |     width: 2em;
 59 |     height: 2em;
 60 |     object-fit: contain;
 61 |   }
 62 | 
 63 |   nav {
 64 |     display: flex;
 65 |     justify-content: center;
 66 |     --background: rgba(255, 255, 255, 0.7);
 67 |   }
 68 | 
 69 |   svg {
 70 |     width: 2em;
 71 |     height: 3em;
 72 |     display: block;
 73 |   }
 74 | 
 75 |   path {
 76 |     fill: var(--background);
 77 |   }
 78 | 
 79 |   ul {
 80 |     position: relative;
 81 |     padding: 0;
 82 |     margin: 0;
 83 |     height: 3em;
 84 |     display: flex;
 85 |     justify-content: center;
 86 |     align-items: center;
 87 |     list-style: none;
 88 |     background: var(--background);
 89 |     background-size: contain;
 90 |   }
 91 | 
 92 |   li {
 93 |     position: relative;
 94 |     height: 100%;
 95 |   }
 96 | 
 97 |   li[aria-current='page']::before {
 98 |     --size: 6px;
 99 |     content: '';
100 |     width: 0;
101 |     height: 0;
102 |     position: absolute;
103 |     top: 0;
104 |     left: calc(50% - var(--size));
105 |     border: var(--size) solid transparent;
106 |     border-top: var(--size) solid var(--color-theme-1);
107 |   }
108 | 
109 |   nav a {
110 |     display: flex;
111 |     height: 100%;
112 |     align-items: center;
113 |     padding: 0 0.5rem;
114 |     color: var(--color-text);
115 |     font-weight: 700;
116 |     font-size: 0.8rem;
117 |     text-transform: uppercase;
118 |     letter-spacing: 0.1em;
119 |     text-decoration: none;
120 |     transition: color 0.2s linear;
121 |   }
122 | 
123 |   a:hover {
124 |     color: var(--color-theme-1);
125 |   }
126 | </style>
127 |

--------------------------------------------------------------------------------