1. Technologies
2. Superblocks
3. ChatGPT copilot

Add ChatGPT AI Prompt to Your Superblocks App

Create a powerful AI-assisted chat experience using OpenAI's ChatGPT in your Superblocks app. This tutorial shows how to set up an AI bot that responds to user queries using the GPT-4o model.

Prerequisites

You will need:

• A Weavy API key
• A Superblocks account with admin rights
• A Superblocks app with installed Weavy components (see Add to Your App)
• A developer account with OpenAI

Step 1: Select Weavy API Key and Backend

Choose your Weavy environment and API key for the AI bot configuration.

Step 2: Get Your OpenAI API Key

1. Log in to your OpenAI account
2. Navigate to the API keys section
3. Create or copy an existing API key
4. Keep this key secure (you'll need it soon)

Step 3: Name Your AI Bot

The bot needs a unique identifier and display name:

Display name: What users will see in title bars and search results (e.g., "ChatGPT Assistant")

Unique identifier: A unique ID for the bot that cannot contain whitespace and must include at least one non-digit character (e.g., "chatgpt-assistant")

Step 4: Create the Bot in Weavy

Open your terminal and run this command to create the bot:

curl WY_BACKEND_URL/api/users -H "Authorization: Bearer WY_API_*" --json "{ 'uid': 'BOT_UID', 'name': 'BOT_NAME', is_bot: true, 'metadata': {'family': 'OpenAI', 'model': 'gpt-4o', 'api_key': 'OPENAI_API_*'} }"

Replace the placeholders with your actual values:

• WY_BACKEND_URL: Your Weavy backend URL
• WY_API_*: Your Weavy API key
• BOT_UID: Your chosen unique identifier
• BOT_NAME: Your bot's display name
• OPENAI_API_*: Your OpenAI API key

Note: This creates a bot user in Weavy using OpenAI's GPT-4o model.

Step 5: Add Weavy Messenger Component

1. Open the Add components panel in your Superblocks app editor
2. Locate the Weavy Messenger component
3. Drag it onto your page canvas

Step 6: Enable Bot Mode

1. Select the Weavy Messenger component
2. Find the Bot mode property in the side panel
3. Enter your bot's unique identifier (the BOT_UID you created earlier)

Step 7: Done!

Your AI-powered chat is now active! The Weavy Messenger with bot mode enabled will load instantly. Your ChatGPT bot is fully operational and available to all users.

Users can now:

• Chat with the ChatGPT AI bot
• Ask questions and get intelligent responses
• Benefit from GPT-4o's advanced reasoning capabilities
• Experience seamless AI integration in your app

Tip: The AI functionality is production-ready and available to all your users immediately.