How to Build a Stock Tracker App in ChatGPT

TL;DR

Build a ChatGPT stock tracker by using TypeScript, the MCP SDK, Express, and Alpha Vantage’s TOP_GAINERS_LOSERS endpoint, then expose the local server through ngrok. After enabling developer mode in ChatGPT, create the app and connect it to the public server URL so users can request market movers and view responsive tables inline.

Transcript

I'm going to show you how to build something really cool in this video. Open AAI just announced what I think is the single biggest opportunity in AI at the moment. Last week at their developer conference, which for the record, I was there and it was awesome. Sam Alman announced the ability to build native applications right inside of Chat GPT. On t... Read More

Key Insights

• Native ChatGPT applications are embedded directly inside conversations, allowing users to address an app and interact with its results without leaving ChatGPT. The Spotify example shows how a conversational request can generate a playlist inside ChatGPT and then send that playlist to Spotify.
• The proposed business opportunity is based on entering a new app marketplace early. The presenter compares it with the initial iPhone App Store, where even simple applications reportedly earned substantial revenue, while emphasizing that any claim about future ChatGPT app revenue remains a prediction rather than a demonstrated result.
• The example application is a stock market tracker that identifies leading gainers and losers. When a user asks about the biggest market movers, ChatGPT can invoke the app and display live stock information through an inline experience rather than returning only ordinary conversational text.
• The application architecture uses TypeScript, Express, and the Model Context Protocol SDK. Its MCP server exposes a topMovers tool that queries Alpha Vantage’s TOP_GAINERS_LOSERS endpoint, connecting a conversational request in ChatGPT with external stock market data supplied by the selected API.
• The embedded widget works by calling window.openai.callTool('topMovers', { limit }) when it loads. It then renders the returned information in responsive tables, giving users a structured view of market results within the ChatGPT interface instead of requiring a separate website.
• Codex can generate the project from a detailed prompt that specifies the technology stack, data endpoint, tool behavior, widget requirements, and local deployment approach. The prompt also directs Codex to read OpenAI’s documentation because the application framework is described as new and potentially unfamiliar to the model.
• The local setup requires an Alpha Vantage API key stored in an .env.local file. The walkthrough copies the structure from the provided environment example, inserts the free key obtained from Alpha Vantage, and starts the generated application through the terminal with npm run dev.
• Ngrok makes the locally running MCP server reachable from ChatGPT by creating a public connection to port 3000. After the tunnel is running, the user enables developer mode under ChatGPT’s apps and connectors settings, selects the create option, and begins configuring the application.

Questions & Answers

Q: How do you build a stock tracker app for ChatGPT?

Start with a detailed Codex prompt requesting a minimal TypeScript application built with the Model Context Protocol SDK and Express. Define a topMovers tool that queries Alpha Vantage’s TOP_GAINERS_LOSERS endpoint, and request an inline widget that calls the tool on load. After Codex creates the server and widget, configure the API key, run the project, and connect it to ChatGPT through ngrok.

Q: What does the ChatGPT stock market app do?

The app answers questions about the biggest movers in the stock market by invoking a custom topMovers tool. That tool obtains live data from Alpha Vantage’s TOP_GAINERS_LOSERS endpoint. ChatGPT then embeds the application’s interface within the conversation, where responsive tables present the returned gainers and losers instead of directing the user to a separate stock market website.

Q: What technologies are used to create the ChatGPT app?

The demonstrated project uses TypeScript for the application, Express for the local server, and @modelcontextprotocol/sdk to expose the topMovers tool through an MCP server. Alpha Vantage supplies stock market data, while the widget uses window.openai.callTool to request results. Codex generates the code in Visual Studio Code, and ngrok exposes the local server to ChatGPT.

Q: How does the ChatGPT widget request stock data?

The widget calls window.openai.callTool('topMovers', { limit }) when it loads. This invokes the topMovers tool exposed by the application’s MCP server. The server requests market information from Alpha Vantage’s TOP_GAINERS_LOSERS endpoint, returns the results to the widget, and the widget displays the information as responsive tables embedded directly in the ChatGPT conversation.

Q: How do you configure the Alpha Vantage API key?

Open the generated project and locate the example environment file containing the placeholder for the Alpha Vantage key. Create a new file named .env.local, copy the example file’s contents into it, and replace the placeholder with your key. The walkthrough says a free key can be obtained by visiting Alpha Vantage and submitting an email address.

Q: Why is ngrok needed for a local ChatGPT app?

ChatGPT cannot access a server that is available only through the developer’s local host. Ngrok creates a public tunnel that links the local MCP server to the internet. After starting the development server, run ngrok for HTTP port 3000. The resulting public connection can then be used while configuring the application inside ChatGPT.

Q: How do you enable app development inside ChatGPT?

Open ChatGPT settings by selecting your name, then navigate to apps and connectors. Enter the advanced settings section and turn on developer mode. Enabling that option reveals a create button in the upper-right area. Select create, give the application a name such as Market Watch, and continue configuring it with the publicly accessible server connection.

Q: Why does the presenter consider ChatGPT apps an early opportunity?

The presenter argues that developers who enter a newly launched marketplace early can benefit from limited initial competition and strong user interest. He compares the situation with the early iPhone App Store and cites ChatGPT’s stated 800 million monthly active users. However, predictions about developers making millions or capturing 1% of users are presented as expectations, not verified outcomes.

Summary & Key Takeaways

• The walkthrough presents native ChatGPT applications as an early business opportunity because developers can create embedded conversational experiences and prepare them before the planned app store launch. The example demonstrates a stock market application that responds to questions about leading gainers and losers by displaying live market information directly within ChatGPT.

• The application uses TypeScript, Express, and the Model Context Protocol SDK to expose a topMovers tool. That tool requests data from Alpha Vantage’s TOP_GAINERS_LOSERS endpoint. An embedded widget calls the tool through window.openai.callTool when it loads, then organizes the returned market data into responsive tables that appear inline in the conversation.

• Codex generates the project structure, MCP server, front-end widget, documentation, and setup instructions from a detailed prompt referencing OpenAI’s documentation. The user adds a free Alpha Vantage API key to an .env.local file, starts the development server with npm run dev, and exposes port 3000 through ngrok for ChatGPT access.