Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drylikov/chatgpt_artifacts
Bring Claude's Artifacts feature to ChatGPT.
https://github.com/drylikov/chatgpt_artifacts
Last synced: 8 days ago
JSON representation
Bring Claude's Artifacts feature to ChatGPT.
- Host: GitHub
- URL: https://github.com/drylikov/chatgpt_artifacts
- Owner: drylikov
- License: mit
- Created: 2024-08-13T05:32:35.000Z (3 months ago)
- Default Branch: drylikov
- Last Pushed: 2024-08-13T05:39:58.000Z (3 months ago)
- Last Synced: 2024-08-13T06:43:45.875Z (3 months ago)
- Language: JavaScript
- Size: 1.4 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# ChatGPT artifacts
Bring Claude's Artifacts feature to ChatGPT
## Preview
https://github.com/ozgrozer/chatgpt-artifacts/assets/651938/abc68e48-2a85-4cb8-a17a-ae795de1ed26
## Usage
Clone this repository
```
git clone https://github.com/drylikov/ChatGPT_artifacts.git
```
Install dependencies
```
npm install
```
Duplicate `.env.example` as `.env` and add your OPEN AI API key
```
cp .env.example .env
vim .env
```
Build the app
```
npm run build
```
Start the app
```
npm start
```
## Ollama Support
To make it work with your local LLMs like Llama3 or Gemma2 you just need to make a simple update in the code.
Open `/pages/api/chat.js` file
```js
// change this
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
})
// to this
const openai = new OpenAI({
apiKey: 'ollama',
baseURL: 'http://127.0.0.1:11434/v1'
})
// change this
const stream = await openai.chat.completions.create({
stream: true,
model: 'gpt-4o',
messages: conversations[conversationId]
})
// to this
const stream = await openai.chat.completions.create({
stream: true,
model: 'llama3',
messages: conversations[conversationId]
})
```
## Groq Support
To make it work with Groq you just need to get an API key [here](https://console.groq.com/keys) and make a simple update in the code.
Open `/pages/api/chat.js` file
```js
// change this
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
})
// to this
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
baseURL: 'https://api.groq.com/openai/v1'
})
// change this
const stream = await openai.chat.completions.create({
stream: true,
model: 'gpt-4o',
messages: conversations[conversationId]
})
// to this
const stream = await openai.chat.completions.create({
stream: true,
model: 'llama3-70b-8192',
messages: conversations[conversationId]
})
```
## Azure OpenAI Support
To make it work with Azure OpenAI, you need to create a resource in the [Azure Portal](https://portal.azure.com/) and then create a deployment in the [Azure OpenAI Studio](https://oai.azure.com/) and get your API key, API version, API endpoint and make a simple update in the code.
Open `/pages/api/chat.js` file
```js
// change this
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
})
// to this (change the API version if yours is different)
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
defaultQuery: { 'api-version': '2023-03-15-preview' },
defaultHeaders: { 'api-key': process.env.OPENAI_API_KEY },
baseURL: 'https://.openai.azure.com/openai/deployments/'
})
// change your model here
const stream = await openai.chat.completions.create({
stream: true,
model: 'gpt-4o',
messages: conversations[conversationId]
})
```