Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ozgrozer/chatgpt-artifacts
Bring Claude's Artifacts feature to ChatGPT
https://github.com/ozgrozer/chatgpt-artifacts
artifacts chatgpt claude
Last synced: 7 days ago
JSON representation
Bring Claude's Artifacts feature to ChatGPT
- Host: GitHub
- URL: https://github.com/ozgrozer/chatgpt-artifacts
- Owner: ozgrozer
- License: gpl-3.0
- Created: 2024-06-23T20:32:48.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-01T17:37:38.000Z (3 months ago)
- Last Synced: 2024-10-11T18:15:06.962Z (28 days ago)
- Topics: artifacts, chatgpt, claude
- Language: JavaScript
- Homepage: https://thenextaitool.com
- Size: 1.57 MB
- Stars: 428
- Watchers: 3
- Forks: 79
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome-ChatGPT-repositories - chatgpt-artifacts - Bring Claude's Artifacts feature to ChatGPT (Others)
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/ozgrozer/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]
})
```
## License
[GPL-3.0](https://github.com/ozgrozer/chatgpt-artifacts/blob/main/license)