Πριν από μερικές εβδομάδες, το OpenAI εισήγαγε εφαρμογές για το ChatGPT. Όπως μπορείτε να δείτε παρακάτω, επιτρέπει στις επιχειρήσεις να εισάγουν το προϊόν τους απευθείας στο chat για να βοηθήσουν να ικανοποιήσουν την πρόταση του χρήστη. Μια εφαρμογή μπορεί να ενεργοποιηθεί είτε με μια ρητή αναφορά είτε όταν το μοντέλο αποφασίσει ότι η εφαρμογή θα είναι χρήσιμη. So, what is a ChatGPT App? Για έναν πελάτη, είναι ένας τρόπος για να αποκτήσετε πλουσιότερη εμπειρία χρήστη και λειτουργικότητα, πέρα από τους περιορισμούς μιας διασύνδεσης κειμένου. Για μια επιχείρηση, είναι ένας τρόπος να προσεγγίσετε πάνω από 800 εκατομμύρια χρήστες του ChatGPT τη σωστή στιγμή. Για έναν προγραμματιστή, είναι ένας διακομιστής MCP και μια εφαρμογή web που τρέχει σε ένα iframe <= αυτό είμαστε εδώ για να μιλήσουμε! ΔΕΙΜΟ Σε αυτή την ανάρτηση, θα περπατήσω μέσα από την οικοδόμηση μιας απλής εφαρμογής quiz, που παρουσιάζεται παρακάτω, χρησιμοποιώντας το ως παράδειγμα για να αποδείξω διαθέσιμες λειτουργίες. Σημαντική Σημείωση: Εάν θέλετε να ακολουθήσετε, θα χρειαστείτε μια πληρωμένη συνδρομή ChatGPT για να ενεργοποιήσετε τη Λειτουργία Προγραμματιστή. Αν θέλεις να ακολουθήσεις, Μια τυπική συνδρομή πελάτη $ 20 / μήνα θα είναι αρκετή. Important Note: you will need a paid ChatGPT subscription to enable Developer Mode Υψηλού επιπέδου ροή Εδώ είναι πώς λειτουργεί σε υψηλό επίπεδο (η πραγματική σειρά των βημάτων μπορεί να διαφέρει ελαφρώς): Πρώτον, ο προγραμματιστής της εφαρμογής την καταχωρίζει στο ChatGPT από Αυτό επιτρέπει την εφαρμογή . . Στέκεται για , και επιτρέπει σε μοντέλα όπως το ChatGPT να εξερευνήσουν και να αλληλεπιδράσουν με άλλες υπηρεσίες. ο διακομιστής MCP μας θα έχει " «Και» «Χρειάστηκε να δημιουργήσουμε μια εφαρμογή quiz ChatGPT. providing a link to the MCP server (1) MCP Model Context Protocol tools resources ChatGPT learns and remembers what our app does and when it can be useful. Όταν η εφαρμογή υπάρχει ήδη και ο χρήστης κάνει μια προειδοποίηση όπως "Κάνε ένα quiz για τον Sam Altman", το ChatGPT θα ελέγξει αν υπάρχει μια εφαρμογή που μπορεί να χρησιμοποιήσει αντί για μια απάντηση κειμένου για να προσφέρει μια καλύτερη εμπειρία στον χρήστη . (2) (3) Εάν βρεθεί μια εφαρμογή, η ChatGPT εξετάζει το σχήμα των δεδομένων που χρειάζεται η εφαρμογή Η Εφαρμογή μας πρέπει να λαμβάνει τα δεδομένα στην ακόλουθη μορφή JSON: (4) { questions: [ { question: "Where was Sam Altman born", options: ["San Francisco", ...], correctIndex: 2, ... }, ... ] } Αυτό ονομάζεται και θα το στείλουμε στην εφαρμογή μας . ChatGPT will generate quiz data exactly in this format toolInput (5) Η εφαρμογή θα επεξεργαστεί το Και θα παράγει Το ChatGPT θα αναπαράγει το HTML «υλικό» που παρέχεται από την εφαρμογή στο παράθυρο συνομιλίας και θα το ξεκινήσει με Δεδομένα Και τέλος, ο χρήστης θα δει την εφαρμογή και θα είναι σε θέση να αλληλεπιδράσει μαζί της. . toolInput toolOutput toolOutput (6) (7) Δημιουργία ενός MCP server Κωδικός repo για την εφαρμογή μας ChatGPT: . https://github.com/renal128/quizaurus-tutorial Υπάρχουν 2 έργα: και Πρώτον, θα επικεντρωθούμε στην που χρησιμοποιεί απλή JavaScript στο frontend για να κρατήσει τα πράγματα απλά. quizaurus-plain quizaurus-react quizaurus-plain Όλος ο κώδικας του διακομιστή είναι σε αυτό το αρχείο - μόνο περίπου 140 γραμμές κώδικα! https://github.com/renal128/quizaurus-tutorial/blob/main/quizaurus-plain/src/server.ts Σερβίρ εγκατάστασης Υπάρχουν πολλές επιλογές για τη δημιουργία ενός διακομιστή MCP χρησιμοποιώντας οποιοδήποτε από τα SDK που αναφέρονται εδώ: https://modelcontextprotocol.io/docs/sdk Εδώ θα χρησιμοποιήσουμε το . Ετικέτες MCP SDK Ο παρακάτω κώδικας δείχνει πώς να το ρυθμίσετε: // Create an MCP server const mcpServer = new McpServer({ name: 'quizaurus-server', version: '0.0.1' }); // Add the tool that receives and validates questions, and starts a quiz mcpServer.registerTool( ... ); // Add a resource that contains the frontend code for rendering the widget mcpServer.registerResource( ... ); // Create an Express app const expressApp = express(); expressApp.use(express.json()); // Set up /mcp endpoint that will be handled by the MCP server expressApp.post('/mcp', async (req, res) => { const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined, enableJsonResponse: true }); res.on('close', () => { transport.close(); }); await mcpServer.connect(transport); await transport.handleRequest(req, res, req.body); }); const port = parseInt(process.env.PORT || '8000'); // Start the Express app expressApp.listen(port, () => { console.log(`MCP Server running on http://localhost:${port}/mcp`); }).on('error', error => { console.error('Server error:', error); process.exit(1); }); Βασικά σημεία : Η εφαρμογή Express είναι ένας γενικός διακομιστής που λαμβάνει επικοινωνίες (όπως αιτήματα HTTP) από το εξωτερικό (από το ChatGPT) Χρησιμοποιώντας το Express, προσθέτουμε ένα τερματικό σημείο /mcp που θα παρέχουμε στο ChatGPT ως διεύθυνση του διακομιστή MCP (όπως https://mysite.com/mcp) The handling of the endpoint is delegated to the MCP server, that runs within the Express app /mcp all of the MCP protocol that we need is handled within that endpoint by the MCP server mcpServer.registerTool(...) και mcpServer.registerResource(...) είναι αυτό που θα χρησιμοποιήσουμε για να εφαρμόσουμε την εφαρμογή Quiz Εργαλείο MCP Ας γεμίσουμε το χάσμα στο Ο κάτοχος θέσης πάνω για να καταχωρίσετε το «εργαλείο». mcpServer.registerTool(…) Το ChatGPT θα διαβάσει τον ορισμό του εργαλείου όταν εγγράψουμε την εφαρμογή, και στη συνέχεια, όταν ο χρήστης το χρειάζεται, το ChatGPT θα επικαλεστεί το εργαλείο για να ξεκινήσει ένα quiz: // Add the tool that receives and validates questions, and starts a quiz mcpServer.registerTool( 'render-quiz', { title: 'Render Quiz', description: ` Use this when the user requests an interactive quiz. The tool expects to receive high-quality single-answer questions that match the schema in input/structuredContent: each item needs { question, options[], correctIndex, explanation }. Use 5–10 questions unless the user requests a specific number of questions. The questions will be shown to the user by the tool as an interactive quiz. Do not print the questions or answers in chat when you use this tool. Do not provide any sensitive or personal user information to this tool.`, _meta: { "openai/outputTemplate": "ui://widget/interactive-quiz.html", // <- hook to the resource }, inputSchema: { topic: z.string().describe("Quiz topic (e.g., 'US history')."), difficulty: z.enum(["easy", "medium", "hard"]).default("medium"), questions: z.array( z.object({ question: z.string(), options: z.array(z.string()).min(4).max(4), correctIndex: z.number().int(), explanation: z.string().optional(), }) ).min(1).max(40), }, }, async (toolInput) => { const { topic, difficulty, questions } = toolInput; // Here you can run any server-side logic to process the input from ChatGPT and // prepare toolOutput that would be fed into the frontend widget code. // E.g. you can receive search filters and return matching items. return { // Optional narration beneath the component content: [{ type: "text", text: `Starting a ${difficulty} quiz on ${topic}.` }], // `structuredContent` will be available as `toolOutput` in the frontend widget code structuredContent: { topic, difficulty, questions, }, // Private to the component; not visible to the model _meta: { "openai/locale": "en" }, }; } ); Το επάνω μισό του κώδικα παρέχει μια περιγραφή του εργαλείου - το ChatGPT θα βασιστεί σε αυτό για να καταλάβει πότε και πώς να το χρησιμοποιήσει: Η περιγραφή περιγράφει λεπτομερώς τι κάνει το εργαλείο.Το ChatGPT θα το χρησιμοποιήσει για να αποφασίσει αν το εργαλείο ισχύει για την προειδοποίηση χρήστη. Το inputSchema είναι ένας τρόπος για να πείτε στο ChatGPT ακριβώς ποια δεδομένα χρειάζεται να παράσχει στο εργαλείο και πώς θα πρέπει να είναι δομημένο. όπως μπορείτε να δείτε παραπάνω, περιέχει ενδείξεις και περιορισμούς που το ChatGPT μπορεί να χρησιμοποιήσει για να προετοιμάσει ένα σωστό φορτίο χρήσης (toolInput). outputSchema παραλείπεται εδώ, αλλά μπορείτε να το παρέχετε για να πείτε στο ChatGPT τι σχήμα θα έχει το structuredContent. Έτσι, κατά μία έννοια, το εργαλείο είναι αυτό που καθορίζει την εφαρμογή ChatGPT εδώ. Ας ρίξουμε μια ματιά στα άλλα δύο πεδία εδώ: _meta[«openai/outputTemplate»] είναι το αναγνωριστικό του πόρου MCP που η εφαρμογή ChatGPT θα χρησιμοποιήσει για την αναπαραγωγή του widget. async (toolInput) => { ... είναι η λειτουργία που λαμβάνει το toolInput από το ChatGPT και παράγει το toolOutput που θα είναι διαθέσιμο στο widget. Αυτό είναι όπου μπορούμε να εκτελέσουμε οποιαδήποτε λογική από την πλευρά του διακομιστή για να επεξεργαστούμε τα δεδομένα. στην περίπτωσή μας, δεν χρειαζόμαστε καμία επεξεργασία επειδή το toolInput περιέχει ήδη όλες τις πληροφορίες που χρειάζεται το widget, έτσι η λειτουργία επιστρέφει τα ίδια δεδομένα στο structuredContent που θα είναι διαθέσιμα ως toolOutput στο widget. MCP πόρος Παρακάτω είναι πώς ορίζουμε έναν πόρο MCP: // Add an MCP resource that contains frontend code for rendering the widget mcpServer.registerResource( 'interactive-quiz', "ui://widget/interactive-quiz.html", // must match `openai/outputTemplate` in the tool definition above {}, async (uri) => { // copy frontend script and css const quizaurusJs = await fs.readFile("./src/dist/QuizaurusWidget.js", "utf8"); const quizaurusCss = await fs.readFile("./src/dist/QuizaurusWidget.css", "utf8"); return { contents: [ { uri: uri.href, mimeType: "text/html+skybridge", // Below is the HTML code for the widget. // It defines a root div and injects our custom script from src/dist/QuizaurusWidget.js, // which finds the root div by its ID and renders the widget components in it. text: ` <div id="quizaurus-root" class="quizaurus-root"></div> <script type="module"> ${quizaurusJs} </script> <style> ${quizaurusCss} </style>` } ] } } ); Βασικά, ο “ πόρος” εδώ παρέχει το frontend (widget) μέρος της Εφαρμογής. ui://widget/interactive-quiz.html είναι το αναγνωριστικό πόρου, και θα πρέπει να ταιριάζει με το _meta[«openai/outputTemplate»] του ορισμού εργαλείου από την προηγούμενη ενότητα παραπάνω. provides HTML code of the widget contents the HTML here is very simple - we just define the root div and add that will find that root div by ID, create necessary elements (buttons, etc) and define the quiz app logic. We will look at the script in the next section below. quiz-app-root the custom script Δημιουργία του widget Εφαρμογή widget Ας ρίξουμε μια γρήγορη ματιά στο που εφαρμόζει το widget (το ορατό μέρος της εφαρμογής): Το σενάριο του QuizaurusWidget.js // Find the root div defined by the MCP resource const root = document.querySelector('#quiz-app-root'); // create HTML elements inside the root div ... // try to initialize for widgetState to restore the quiz state in case the chat page gets reloaded const selectedAnswers = window.openai.widgetState?.selectedAnswers ?? {}; let currentQuestionIndex = window.openai.widgetState?.currentQuestionIndex ?? 0; function refreshUI() { // Read questions from window.openai.toolOutput - this is the output of the tool defined in server.ts const questions = window.openai.toolOutput?.questions; // Initially the widget will be rendered with empty toolOutput. // It will be populated when ChatGPT receives toolOutput from our tool. if (!questions) { console.log("Questions have not yet been provided. Try again in a few sec.") return; } // Update UI according to the current state ... }; // when an answer button is clicked, we update the state and call refreshUI() optionButtons.forEach((b) => { b.onclick = (event) => { const selectedOption = event.target.textContent selectedAnswers[currentQuestionIndex] = selectedOption; // save and expose selected answers to ChatGPT window.openai.setWidgetState({ selectedAnswers, currentQuestionIndex }); refreshUI(); }; }); ... // at the end of the quiz, the user can click this button to review the answers with ChatGPT reviewResultsButton.onclick = () => { // send a prompt to ChatGPT, it will respond in the chat window.openai.sendFollowUpMessage({ prompt: "Review my answers and explain mistakes" }); reviewResultsButton.disabled = true; }; startQuizButton.onclick = refreshUI; refreshUI(); Υπενθύμιση: Αυτός ο κώδικας θα ενεργοποιηθεί από την HTML που ορίσαμε στον πόρο MCP παραπάνω (το Το HTML και το σενάριο θα είναι μέσα σε ένα iframe στη σελίδα συνομιλίας ChatGPT. <script type="module">… Το ChatGPT εκθέτει ορισμένα δεδομένα και hooks μέσω του παγκόσμιο αντικείμενο. εδώ είναι τι χρησιμοποιούμε εδώ: window.openai Το window.openai.toolOutput περιέχει τα δεδομένα ερωτήματος που επιστρέφονται από το εργαλείο MCP. Αρχικά, το html θα αναπαραχθεί πριν το εργαλείο επιστρέψει το toolOutput, οπότε το window.openai.toolOutput θα είναι κενό. Αυτό είναι λίγο ενοχλητικό, αλλά θα το διορθώσουμε αργότερα με το React. window.openai.widgetState και window.openai.setWidgetState() μας επιτρέπουν να ενημερώσουμε και να αποκτήσουμε πρόσβαση στην κατάσταση του widget. Μπορεί να είναι οποιαδήποτε δεδομένα θέλουμε, αν και η σύσταση είναι να το κρατήσουμε κάτω από 4000 tokens. Εδώ, το χρησιμοποιούμε για να θυμόμαστε ποιες ερωτήσεις έχουν ήδη απαντηθεί από τον χρήστη, έτσι ώστε αν η σελίδα φορτωθεί ξανά, το widget θα θυμάται την κατάσταση. Το window.openai.sendFollowUpMessage ({prompt: "..."}) είναι ένας τρόπος για να δώσετε μια προειδοποίηση στο ChatGPT σαν να το έγραψε ο χρήστης και το ChatGPT θα γράψει την απάντηση στο chat. Μπορείτε να βρείτε περισσότερες δυνατότητες στην τεκμηρίωση OpenAI εδώ: https://developers.openai.com/apps-sdk/build/custom-ux Βάζοντας όλα μαζί Ώρα να το δοκιμάσουμε! Μια γρήγορη υπενθύμιση, θα χρειαστείτε μια πληρωμένη συνδρομή ChatGPT για να ενεργοποιήσετε τη λειτουργία προγραμματιστή. Clone this repo [Download the code] https://github.com/renal128/quizaurus-tutorial There are 2 projects in this repo, a minimalistic one, described above, and a slicker-looking React one. We’ll focus on the first one for now. Open a terminal, navigate to the repo directory and run the following commands: [Starting the server] cd quizaurus-plain install NodeJS if you don’t have it https://nodejs.org/en/download/ to install dependencies defined in package.json npm install to start the Express app with MCP server - npm start keep it running [ ] Expose your local server to the web Create a free ngrok account: https://ngrok.com/ Open a (the other one with the Express app should keep running separately) new terminal Install ngrok: https://ngrok.com/docs/getting-started#1-install-the-ngrok-agent-cli on MacOS brew install ngrok Connect ngrok on your laptop to your ngrok account by configuring it with your auth token: https://ngrok.com/docs/getting-started#2-connect-your-account Start ngrok: ngrok http 8000 You should see something like this in the bottom of the output: Forwarding: https://xxxxx-xxxxxxx-xxxxxxxxx.ngrok-free ngrok created a tunnel from your laptop to a public server, so that your local server is available to everyone on the internet, including ChatGPT. Again, , don’t close the terminal keep it running - this is the part that r , $20/month, otherwise you may not see developer mode available. [Enable Developer Mode on ChatGPT] equires a paid customer subscription Go to ChatGPT website => Settings => Apps & Connectors => Advanced settings Enable the “Developer mode” toggle [Add the app] Go back to “Apps & Connectors” and click “Create” in the top-right corner Fill in the details as on the screenshot. For “MCP Server URL” use the URL that ngrok gave you in the terminal output and . add /mcp to it at the end Click on your newly added app You should see the MCP tool under Actions - now ChatGPT knows when and how to use the app. When you make changes to the code, sometimes , otherwise it can remain cached (sometimes I even delete and re-add the app due to avoid caching). you need to click Refresh to make ChatGPT pick up the changes [ ] Finally, we’re ready to test it! Test the app In the chat window you can nudge ChatGPT to use your app by selecting it under the “ ” button. In my experience, it’s not always necessary, but let’s do it anyway. Then try a prompt like “Make an interactive 3-question quiz about Sam Altman”. + You should see ChatGPT asking your approval to call the MCP tool with the displayed . I assume that it’s a feature for unapproved apps, and it won’t happen once the app is properly reviewed by OpenAI (although, as of Nov 2025 there’s no defined process to publish an app yet). So, just click “Confirm” and wait a few seconds. toolInput As I mentioned above, the widget gets rendered before is returned by our MCP server. This means that if you click “Start Quiz” too soon, it won’t do anything - try again a couple seconds later. (we will fix that with React in the next section below). When the data is ready, clicking “Start Quiz” should show the quiz! toolOutput Χρησιμοποιώντας React Πάνω, είδαμε τον κώδικα που χρησιμοποιεί απλή JavaScript. Το άλλο έργο στο ίδιο repo, , δείχνει πώς να εφαρμόσετε μια εφαρμογή ChatGPT χρησιμοποιώντας το React. Ετικέτες quizaurus-react Μπορείτε να βρείτε κάποια χρήσιμη τεκμηρίωση από το OpenAI εδώ: . https://developers.openai.com/apps-sdk/build/custom-ux/ Χρησιμοποιήστε το OpenAiGlobal helper hooks Μπορείτε να τα δείτε εδώ, ο κώδικας αντιγράφεται από την τεκμηρίωση: https://github.com/renal128/quizaurus-tutorial/blob/main/quizaurus-react/web/src/openAiHooks.ts Το πιο χρήσιμο είναι , το οποίο σας επιτρέπει να εγγραφείτε στην εφαρμογή React για τις ενημερώσεις στο Θυμηθείτε ότι στην απλή (μη αντιδρώντας) εφαρμογή παραπάνω, είχαμε το πρόβλημα ότι το κουμπί "Start Quiz" δεν έκανε τίποτα μέχρι να είναι έτοιμα τα δεδομένα; Τώρα μπορούμε να βελτιώσουμε το UX δείχνοντας μια κινούμενη κίνηση φόρτωσης: useToolOutput window.openai.toolOutput function App() { const toolOutput = useToolOutput() as QuizData | null; if (!toolOutput) { return ( <div className="quiz-container"> <p className="quiz-loading__text">Generating your quiz...</p> </div> ); } // otherwise render the quiz ... } Όταν το toolOutput πληρώνεται, το React θα επαναφέρει αυτόματα την εφαρμογή και θα εμφανίσει το quiz αντί για την κατάσταση φόρτωσης. Αντιδράσεις Router Το ιστορικό πλοήγησης του iframe στο οποίο εμφανίζεται η εφαρμογή συνδέεται με το ιστορικό πλοήγησης της σελίδας, ώστε να μπορείτε να χρησιμοποιήσετε API δρομολόγησης όπως το React Router για να εφαρμόσετε πλοήγηση μέσα στην εφαρμογή. Άλλα κουρκουμά και χαρακτηριστικά Σημείωση: Η ανάπτυξη της εφαρμογής ChatGPT δεν είναι πολύ σταθερή αυτή τη στιγμή, καθώς η δυνατότητα δεν έχει τεθεί πλήρως σε εφαρμογή, οπότε είναι δίκαιο να αναμένετε μη ανακοινωμένες αλλαγές στο API ή μικρά σφάλματα. https://developers.openai.com/apps-sdk Πώς και πότε το ChatGPT αποφασίζει να δείξει την εφαρμογή σας στο χρήστη The most important part is that your app’s metadata, such as the tool description, must feel relevant to the conversation. ChatGPT’s goal here is to provide the best UX to the user, so obviously if the app’s description is irrelevant to the prompt, the app won’t be shown. I’ve also seen ChatGPT asking the user to rate if the app was helpful or not, I suppose this feedback is also taken into account. App Metadata. Official recommendations: https://developers.openai.com/apps-sdk/guides/optimize-metadata The in order to be used. How would the user know to link an app? There are 2 ways: App Discovery. app needs to be linked/connected to the user’s account Manual - go to and find the app there. Settings => Apps & Connectors Contextual Suggestion - if the app is not connected, but is highly relevant in the conversation, ChatGPT may offer to connect it. I wasn’t able to make it work with my app, but I saw it working with pre-integrated apps like Zillow or Spotify: Εκκίνηση μιας Συνδεδεμένης Εφαρμογής Μόλις η εφαρμογή συνδεθεί, η ChatGPT μπορεί να τη χρησιμοποιήσει σε μια συνομιλία όταν είναι σκόπιμο. Ο χρήστης μπορεί να την προωθήσει απλά αναφέροντας το όνομα της εφαρμογής στο κείμενο, πληκτρολογώντας @AppName ή κάνοντας κλικ στο κουμπί + και επιλέγοντας την εφαρμογή στο μενού εκεί. Υποστηριζόμενες πλατφόρμες Web - δεδομένου ότι εφαρμόζεται μέσω iframe, το web είναι η ευκολότερη πλατφόρμα για υποστήριξη και δεν είχα σχεδόν κανένα πρόβλημα εκεί. Κινητή εφαρμογή - αν συνδέσετε την εφαρμογή στο διαδίκτυο, θα πρέπει, να είναι σε θέση να το δείτε στο κινητό. δεν ήμουν σε θέση να ενεργοποιήσετε την εφαρμογή στο κινητό - δεν κατάφερε να καλέσει το εργαλείο, αλλά όταν ενεργοποίησα την εφαρμογή στο διαδίκτυο, ήμουν σε θέση να αλληλεπιδράσω με αυτό στο κινητό. πιθανώς ένα προσωρινό σφάλμα. αυθεντικότητα Οι εφαρμογές ChatGPT υποστηρίζουν το OAuth 2.1: https://developers.openai.com/apps-sdk/build/auth Αυτό είναι ένα μεγάλο θέμα, αφήστε με να ξέρω αν θα ήταν χρήσιμο να γράψω ένα ξεχωριστό άρθρο γι 'αυτό! Υποβολή αιτήσεων δικτύου Εδώ είναι τι λέει το έγγραφο ( ) « Συνεργαστείτε με τον συνεργάτη σας OpenAI εάν χρειάζεστε συγκεκριμένους τομείς που επιτρέπονται». πηγή Standard fetch requests are allowed only when they comply with the CSP Σε ένα άλλο μέρος ( Προτείνει τη διαμόρφωση αντικείμενο στον ορισμό πόρου για να ενεργοποιήσετε τους τομείς σας: ΕΔΩ _meta _meta: { ... /* Assigns a subdomain for the HTML. When set, the HTML is rendered within `chatgpt-com.web-sandbox.oaiusercontent.com` It's also used to configure the base url for external links. */ "openai/widgetDomain": 'https://chatgpt.com', /* Required to make external network requests from the HTML code. Also used to validate `openai.openExternal()` requests. */ 'openai/widgetCSP': { // Maps to `connect-src` rule in the iframe CSP connect_domains: ['https://chatgpt.com'], // Maps to style-src, style-src-elem, img-src, font-src, media-src etc. in the iframe CSP resource_domains: ['https://*.oaistatic.com'], } } Ένα άλλο πράγμα που μπορείτε να χρησιμοποιήσετε είναι το Το widget της εφαρμογής σας (frontend) μπορεί να το χρησιμοποιήσει για να καλέσει ένα εργαλείο στον διακομιστή MCP σας - παρέχετε το όνομα του εργαλείου MCP και το εργαλείοΕισαγωγή δεδομένων και λαμβάνετε πίσω εργαλείοΕξόδου: window.openai.callTool await window.openai?.callTool("my_tool_name", { "param_name": "param_value" }); Άλλα χαρακτηριστικά του frontend Δείτε αυτή την τεκμηρίωση για το τι είναι διαθέσιμο στον κώδικα frontend σας μέσω : : window.openai https://developers.openai.com/apps-sdk/build/custom-ux Μπορείτε να αποκτήσετε πρόσβαση στα παρακάτω πεδία (π.χ. θα σας πει αν το ChatGPT είναι αυτή τη στιγμή σε φωτεινή ή σκοτεινή λειτουργία): window.openai.theme theme: Theme; userAgent: UserAgent; locale: string; // layout maxHeight: number; displayMode: DisplayMode; safeArea: SafeArea; // state toolInput: ToolInput; toolOutput: ToolOutput | null; toolResponseMetadata: ToolResponseMetadata | null; widgetState: WidgetState | null; Ομοίως, μπορείτε να χρησιμοποιήσετε τις ακόλουθες κλήσεις (π.χ. δοκιμάστε Για να κάνετε την εφαρμογή σας πλήρη οθόνη): await window.openai?.requestDisplayMode({ mode: "fullscreen" }); /** Calls a tool on your MCP. Returns the full response. */ callTool: ( name: string, args: Record<string, unknown> ) => Promise<CallToolResponse>; /** Triggers a followup turn in the ChatGPT conversation */ sendFollowUpMessage: (args: { prompt: string }) => Promise<void>; /** Opens an external link, redirects web page or mobile app */ openExternal(payload: { href: string }): void; /** For transitioning an app from inline to fullscreen or pip */ requestDisplayMode: (args: { mode: DisplayMode }) => Promise<{ /** * The granted display mode. The host may reject the request. * For mobile, PiP is always coerced to fullscreen. */ mode: DisplayMode; }>; /** Update widget state */ setWidgetState: (state: WidgetState) => Promise<void>; Σας ευχαριστώ! Αυτό είναι όλο, ευχαριστώ για την ανάγνωση και καλή τύχη με ό, τι χτίζετε!
