«Экосистема приложений ChatGPT построена на доверии», — говорится в рекомендациях OpenAI для разработчиков приложений.
По мере расширения экосистемы искусственного интеллекта ChatGPT OpenAI нуждается в помощи в детализации локальной информации — и в первую очередь для этого предназначен OpenAI Apps SDK, представленный в начале месяца. Проблема OpenAI в том, что на самом деле сеть построена на доверии; но по сути OpenAI хочет обойти это.
Процесс разработки относительно аскетичен и недоступен, поэтому в этой статье основное внимание уделяется базовым понятиям, которые вам необходимо понять, прежде чем вы сможете приступить к разработке.
Что такое приложения ChatGPT и какова их цель?
Для чего именно предназначено приложение ChatGPT? Основная цель приложения — улучшить общение в ChatGPT, не более того. Думайте о них как о визуальном опыте, который появляется в различных формах (например, карусели), которые легко интегрируются в разговор, не нарушая контекст пользователя.
OpenAI полагается на метаданные вашего приложения для точного описания вопросов, на которые оно может ответить — либо в целом, либо как часть приложения. Мы увидим это позже. Но помимо этого, я предполагаю, что это будет похоже на Apple App Store: некоторые приложения будут отдавать предпочтение OpenAI, а некоторые будут занесены в черный список. Без благосклонности ваше приложение не сможет выступать в качестве продавца.
Давайте кратко рассмотрим эффект, на который надеется OpenAI.
Понимание встроенного отображения приложения
Режим встроенного отображения появляется непосредственно в ходе разговора. Представьте, что вы находитесь в ChatGPT и спрашиваете о пицце в Сан-Франциско:
Давайте посмотрим сверху вниз на различные фиксированные аспекты:
- Вверху находится запрос; это будет то, на что, согласно метаданным вашего приложения, оно может ответить.
- Затем, прямо над основным изображением, находится значок с названием приложения «Pizzazz».
- Затем мы видим встроенный дисплей, который представляет собой «контент вашего приложения».
- Наконец, он заканчивается ответом, сгенерированным моделью. (Хотя это также может во многом зависеть от вашего приложения; документация здесь неоднозначна.)
Я не сомневаюсь, что появление браузера Atlas от OpenAI повысит интерес к предоставлению приложений — так же, как распространение Интернета увеличило интерес к веб-сайтам.
Фактически, вы даже можете попросить Atlas запустить пример приложения. Этот не сработал, но, по крайней мере, он попробовал:
Но не читайте ничего из вышеизложенного, пока не поймете, какая основная технология вам нужна.
Основная технология: протокол контекста модели (MCP)
Центральной звездой любого приложения OpenAI является протокол контекста модели (или MCP), о котором, к счастью, было написано несколько месяцев назад. Мы даже писали о богатых компонентах MCP, так что даже это не ново. Но не читайте дальше, пока не изучите основы MCP, потому что Apps SDK во многом опирается на него, рассматривая ваше приложение как набор вызовов инструментов.
Идея состоит в том, что вы достаточно описываете свои инструменты, чтобы ChatGPT знал, когда он может их использовать, и возвращал некоторый тип фиксированного формата данных, который он мог подключить к дизайну.
Но почему МКП? Многие причины сводятся к его независимой от протокола природе и использованию естественного языка в описаниях, с чем хорошо справляются большие языковые модели. Потоки OAuth 2.1 используются для контроля доступа. Кроме того, вы можете легко запускать локальные серверы MCP.
Итак, ваш минимальный сервер MCP для Apps SDK должен реализовать как минимум эти три возможности:
Одна из немного зловещих, но благонамеренных цитат в документе OpenAI Apps SDK звучит так: «Хорошая гигиена обнаружения означает, что ваше приложение появляется, когда оно должно, и остается бездействующим, когда не должно». Они имеют в виду, что каждый ответ инструмента должен быть направлен на «ориентированный на действие» запрос, инициированный пользователем в диалоге.
Роль и правила вашего сервера MCP
Таким образом, ваш сервер MCP является основой вашего приложения. Он предоставляет инструменты, которые может вызывать модель, и возвращает упакованные структурированные данные, а также компонент HTML, который клиент ChatGPT отображает в режиме онлайн. Также может потребоваться аутентификация, необходимая для доступа к определенным ресурсам.
На вашем сервере существует ряд правил. Для каждого инструмента должна быть одна «ориентированная на действие» задача. Возможно, это будет неэффективно писать, но это сделает путь клиента более совершенным. Например, поведение чтения и записи, безусловно, будет разными вызовами.
Помимо названия инструмента, ориентированного на действие, модель также ищет в описании инструмента предложения, ориентированные на действие, которые начинаются со слов «Используйте это, когда…». Пример в документации: «Используйте это, когда пользователь хочет просмотреть свою канбан-доску».
Помимо возврата структурированных данных, каждый инструмент на вашем сервере MCP также должен ссылаться на шаблон пользовательского интерфейса HTML в своем дескрипторе. Этот HTML-шаблон будет отображен в iframe с помощью ChatGPT. Мы кратко рассмотрим это ниже.
Пример приложения
Самый быстрый способ начать — использовать поддерживаемый официальный Python SDK или Typescript SDK. Затем добавьте предпочитаемую веб-инфраструктуру.
Мы закончим этот пост регистрацией шаблона пользовательского интерфейса HTML, который ChatGPT будет отображать с помощью iframe, как мы видели в примерах вверху. Все это есть в документации. В противном случае используйте приведенные примеры для создания своих первых попыток.
Пример узла показан ниже. Сначала создается сервер MCP:
// Создаем сервер MCP const server = new McpServer({ name: «kanban-server», version: «1.0.0»}); 12 // Создаем сервер MCP.const server = new McpServer({ name: «kanban-server», version: «1.0.0»});
Затем мы регистрируем шаблон пользовательского интерфейса:
// Ресурс пользовательского интерфейса (без встроенного назначения данных; хост будет вводить данные) server.registerResource( «kanban-widget», «ui://widget/kanban-board.html», {}, async () => ({contents: [
{
uri: «ui://widget/kanban-board.html»,
mimeType: «text/html+skybridge»,
text: `
<div id=»kanban-root»></div>
${KANBAN_CSS ? `<style>${KANBAN_CSS}</style>` : «»}
<script type=»module»>${KANBAN_JS}</script>
`.trim(),
_meta: {
/*
Renders the widget within a rounded border and shadow.
Otherwise, the HTML is rendered full-bleed in the conversation
*/
«openai/widgetPrefersBorder»: true,
/*
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»: ‘
/*
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: [‘
// Maps to style-src, style-src-elem, img-src, font-src, media-src etc. in the iframe CSP
resource_domains: [‘
}
}
},
]}) ); 1234567891011121314151617181920212223242526272829303132333435363738394041424344 // Ресурс пользовательского интерфейса (без встроенного назначения данных; хост будет вводить данные)server.registerResource( «kanban-widget», «ui://widget/kanban-board.html», {}, async () => ({contents: [ { uri: «ui://widget/kanban-board.html», mimeType: «text/html+skybridge», text: `<div id=»kanban-root»></div>${KANBAN_CSS ? `<style>${KANBAN_CSS}</style>` : «»}<script type=»module»>${KANBAN_JS}</script> `.trim(), _meta: { /* Renders the widget within a rounded border and shadow. Otherwise, the HTML is rendered full-bleed in the conversation */ «openai/widgetPrefersBorder»: true, /* 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»: ‘ /* 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: [‘ // Maps to style-src, style-src-elem, img-src, font-src, media-src etc. in the iframe CSP resource_domains: [‘ } } }, ]}));
С этого момента ресурс распознается по этому URL-адресу ui://widget/kanban-board.html. Также обратите внимание на требуемый тип MIME: text/html+skybridge. (Предполагается, что для самой канбан-доски существует контент CSS и HTML.)
Наконец, инструмент зарегистрирован:
server.registerTool( «kanban-board», { title: «Show Kanban Board», _meta: { // свяжем этот инструмент с HTML-шаблоном «openai/outputTemplate»: «ui://widget/kanban-board.html», // метки для отображения в ChatGPT, когда инструмент вызывается «openai/toolInvocating/invoking»: «Отображение доски», «openai/toolInvoked/invoked»: «Отображается board» }, inputSchema: {задачи: z.string() } }, async() => { return {content: [{ type: «text», text: «Displayed the kanban board!» }]структурированный контент: {} }; }); 1234567891011121314151617181920 server.registerTool( «kanban-board», { title: «Show Kanban Board», _meta: { // свяжем этот инструмент с шаблоном HTML «openai/outputTemplate»: «ui://widget/kanban-board.html», // метки для отображения в ChatGPT при вызове инструмента «openai/toolInfection/invoking»: «Отображение доски», «openai/toolInvocated/invoked»: «Отображение доски» }, inputSchema: { Tasks: z.string() } }, async () => { return { content: [{ type: «text», text: «Displayed the kanban board!» }]структурированный контент: {} }; });
Обратите внимание, что outTemplate соответствует URI шаблона.
Заключение
Я совершенно уверен, что появится более дружественный способ сделать все это — либо с помощью подобранных и согласованных шаблонов пользовательского интерфейса, либо с помощью более совершенных библиотек. Но на данный момент пионерам приложений ChatGPT приходится работать с тем, что предоставил OpenAI; призом является раннее присутствие в растущей экономике, основанной на искусственном интеллекте.
ТЕНДЕНЦИОННЫЕ ИСТОРИИ YOUTUBE.COM/THENEWSTACK Технологии развиваются быстро, не пропустите ни одной серии. Подпишитесь на наш канал YouTube, чтобы смотреть все наши подкасты, интервью, демонстрации и многое другое. ПОДПИСАТЬСЯ Группа, созданная в Sketch. Дэвид работал профессиональным разработчиком программного обеспечения в Лондоне в компаниях Oracle Corp. и British Telecom, а также консультантом, помогающим командам работать более гибко. Он написал книгу о дизайне пользовательского интерфейса и с тех пор пишет технические статьи. Подробнее Дэвид Истман