skills.rest
lsst-sqre
lsst-sqreOFFICIAL
Explore all skills by this author →
WebsiteGitHub

times-square-integration

Integrate Times Square notebook execution with SSE updates and mock API endpoints.

2|1|Updated Jan 7, 2021
Search Tags:#API integration#Next.js#Times Square#Jupyter notebooks#Web integration#Frontend development#Real-time updates
One-click install
npx skills add https://github.com/lsst-sqre/squareone --skill times-square-integration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: times-square-integration
Source: https://github.com/lsst-sqre/squareone/tree/main/.claude/skills/times-square-integration
Command: npx skills add https://github.com/lsst-sqre/squareone --skill times-square-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, swr, next.js.

What problem does it solve?

Integrating the Times Square notebook execution system into a web application can be complex, involving real-time updates, URL parameter management, and API interactions. This skill provides clear patterns and best practices for a smooth integration.

Core Features & Use Cases

  • Notebook Display & Interaction: Guides on displaying Times Square pages, handling URL parameters, and managing real-time Server-Sent Events (SSE) updates.
  • API & Data Fetching: Provides patterns for using custom SWR hooks to fetch Times Square data and setting up mock API endpoints for local development.
  • Routing & Previews: Explains routing for regular pages and GitHub PR previews, simplifying navigation and review workflows.
  • Use Case: To embed a dynamic Jupyter notebook from Times Square into a new application page, use this skill to set up the necessary context providers, data fetching hooks, and parameter handling.

Quick Start

Fetch and display metadata for a Times Square page with the slug 'my-notebook-page'. useTimesSquarePage('my-notebook-page')

Frequently Asked Questions about times-square-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Jupyter notebooks from Times Square into a Next.js application?▼

Integrating Times Square notebooks into Next.js requires setting up context providers like TimesSquareUrlParametersContext and TimesSquareHtmlEventsContext, using the useTimesSquarePage hook to fetch notebook data, and establishing API routes for page rendering and real-time SSE updates. The skill provides complete patterns for this workflow.

How do I handle real-time updates when displaying Times Square notebooks?▼

Real-time updates from Times Square use Server-Sent Events (SSE) managed through TimesSquareHtmlEventsContext. Combine this with SWR data-fetching hooks to reactively display notebook execution results as they stream from the backend API.

Can I use Times Square notebooks for GitHub PR previews?▼

Yes. Times Square integration supports routing patterns specifically for GitHub PR previews. The skill provides guidance on implementing separate preview routes and URL parameter handling to display notebook outputs directly within PR workflows.

What's the best way to set up local development with Times Square without a live backend?▼

Use mock API endpoints during development. The skill explains how to structure API routes for pages, HTML rendering, and status responses, allowing you to test notebook display and parameter handling locally before connecting to a production Times Square instance.

Do I need React and SWR to integrate Times Square notebooks?▼

Yes. Times Square integration in Next.js relies on React components, SWR for data fetching, and custom hooks like useTimesSquarePage. These dependencies are core to managing notebook state, real-time updates, and URL parameter context.

How do I manage URL parameters when embedding Times Square notebooks?▼

Use TimesSquareUrlParametersContext to capture and pass URL parameters to the notebook execution engine. This enables parameterized notebook runs where users can customize inputs through the application's routing.

Related Skills

Explore More Software Engineering Skills→
pmarashianpmarashian
2

capacitor-vite-nextjs-backend

Set up a monorepo with Vite React frontend, Capacitor, and Next.js backend API.

Community
Intermediate
alongor666alongor666
1

backend-data-processor

Process vehicle insurance Excel/CSV data into clean, merged datasets.

Community
Intermediate
yutnayutna
2

nextjs-data-access

Orchestrate server and client data fetching with SWR in Next.js apps.

Community
Advanced
ihatesea69ihatesea69
3

sentence-transformers

Generate sentence, text, and image embeddings using pre-trained transformer models.

Community
Intermediate