Share your wildest ChatGPT conversations with one click.
Introduction
ShareGPT is an open-source Chrome Extension for you to share your wildest ChatGPT conversations with one click. Imagine capturing the most entertaining or insightful poster sessions with your AI companion and effortlessly sharing them with the world. With ShareGPT, that dream becomes a reality!
Features
- Share your ChatGPT conversations with one-click
- Browse examples on sharegpt.com/explore
- Save your favorite conversations for later
- Leave comments on conversations
Tech Stack
ShareGPT is built with the following stack:
- Next.js – framework
- Typescript – language
- Tailwind – CSS
- Upstash – redis
- Planetscale – database
- NextAuth.js – auth
- Vercel – hosting
REST API
The ShareGPT API is a REST-styled API that allows you to write and read conversations from our database, exposed as HTTP endpoints.
Conversations Endpoint
POST: sharegpt.com/api/conversations
You can use this endpoint to add new conversations to our database.
Details Summary
First, if you haven’t already, process the ShareGPT conversation using the following code:
function conversationData() {
const threadContainer = document.querySelector(
'#__next main div:nth-of-type(1) div:nth-of-type(1) div:nth-of-type(1) div:nth-of-type(1)'
);
var result = {
avatarUrl: getAvatarImage(),
items: [],
};
for (const node of threadContainer.children) {
const markdownContent = node.querySelector('.markdown');
// tailwind class indicates human or gpt
if ([...node.classList].includes('dark:bg-gray-800')) {
result.items.push({
from: 'human',
value: node.textContent,
});
} else if ([...node.classList].includes('bg-gray-50')) {
result.items.push({
from: 'gpt',
value: markdownContent.outerHTML,
});
}
}
return result;
}
function getAvatarImage() {
// Create a canvas element
const canvas = document.createElement('canvas');
const image = document.querySelectorAll('img')[1];
// Set the canvas size to 30x30 pixels
canvas.width = 30;
canvas.height = 30;
// Draw the img onto the canvas
canvas.getContext('2d').drawImage(image, 0, 0);
// Convert the canvas to a base64 string as a JPEG image
const base64 = canvas.toDataURL('image/jpeg');
return base64;
}
Think of this code as a treasure map for finding and preserving the bounty that results from your interactions with ChatGPT. The `conversationData` function acts like a skilled explorer, navigating the tangled terrain of HTML to collect valuable information about your conversation. It identifies the speaker—be it the human or AI—much like deciphering ancient hieroglyphs, all while the `getAvatarImage` function converts images into a form that can be packaged and preserved for your future reference.
Next Steps
Then, send a POST request to the endpoint above with the payload and request headers:
const res = await fetch('https://sharegpt.com/api/conversations', {
body: JSON.stringify(conversationData),
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
});
This will return an object with an id attribute which will be the unique identifier for the generated post:
const id = await res.json();
const url = `https://shareg.pt/${id}`; // short link to the ShareGPT post
GET: sharegpt.com/api/conversations
PLEASE NOTE: This endpoint is currently disabled due to excess traffic.
This endpoint takes 3 optional query parameters:
- type: Used for sorting the results. Takes 2 string values:
new
ortop
. - page: Used for pagination. Takes an integer as a factor of the
PAGINATION_LIMIT
, which is set to 50. - search: Used for filtering records by title. E.g.
search=python
returns all records with “python” in the title.
Example:
await fetch(
'https://sharegpt.com/api/conversations?type=new&page=2&search=python'
);
This returns a list of conversations with the following structure:
interface ConversationMeta {
id: string; // unique id for the conversation
title: string; // title of the conversation (first user prompt)
avatar: string; // base64 encoded URI of the user's avatar
saves: number; // number of times the conversation is saved on ShareGPT
comments: number; // number of comments the conversation has on ShareGPT
views: number; // number of times the conversation has been viewed on ShareGPT
createdAt: Date; // timestamp when the conversation was created
}
Troubleshooting
If you encounter any issues while using ShareGPT, here are a few troubleshooting ideas:
- Ensure that you are using the latest version of the ShareGPT Chrome Extension.
- Check your internet connection as unstable networks can affect the sharing functionality.
- Make sure that your conversations conform to the system’s requirements (such as text format).
- If the API returns errors, check the console for any error messages that can guide you to a solution.
For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.