Skip to content

Commit d18b3ed

Browse files
jmoseleygithub-advanced-security[bot]
jmoseley
and
github-advanced-security[bot]
authored
Add interactive SDK playground (#24)
* Add interactive SDK playground * Potential fix for code scanning alert no. 2: Use of externally-controlled format string Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Potential fix for code scanning alert no. 1: DOM text reinterpreted as HTML Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Fix package-lock. * Reactify. * Add ESLint/Prettier to playground, integrate into justfile lint - Add ESLint config with React/TypeScript support - Add Prettier config (matching nodejs SDK style) - Add lint/format/typecheck scripts to package.json - Fix lint issues (unused param, any type) - Format all source files - Update justfile lint-nodejs to include playground * Add disclaimer to API client about toy implementation * Add playground lint & build workflow Separate workflow for the playground demo app that only runs when playground or nodejs SDK files change. --------- Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
1 parent bc3ef71 commit d18b3ed

25 files changed

+9094
-0
lines changed

‎.github/workflows/playground.yml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
name: "Playground"
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- "demos/playground/**"
8+
- "nodejs/**"
9+
pull_request:
10+
paths:
11+
- "demos/playground/**"
12+
- "nodejs/**"
13+
workflow_dispatch:
14+
15+
permissions:
16+
contents: read
17+
18+
jobs:
19+
lint-and-build:
20+
name: "Lint & Build"
21+
runs-on: ubuntu-latest
22+
defaults:
23+
run:
24+
shell: bash
25+
working-directory: ./demos/playground
26+
steps:
27+
- uses: actions/checkout@v6
28+
- uses: actions/setup-node@v6
29+
with:
30+
cache: "npm"
31+
cache-dependency-path: "./demos/playground/package-lock.json"
32+
node-version: 22
33+
34+
- name: Build Node.js SDK (dependency)
35+
working-directory: ./nodejs
36+
run: npm ci --ignore-scripts && npm run build
37+
38+
- name: Install dependencies
39+
run: npm ci --ignore-scripts
40+
41+
- name: Run prettier check
42+
run: npm run format:check
43+
44+
- name: Run ESLint
45+
run: npm run lint
46+
47+
- name: Typecheck
48+
run: npm run typecheck
49+
50+
- name: Build
51+
run: npm run build

‎demos/playground/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
dist
3+
*.log
4+
.env

‎demos/playground/.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
node_modules

‎demos/playground/.prettierrc.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"semi": true,
3+
"trailingComma": "es5",
4+
"singleQuote": false,
5+
"printWidth": 100,
6+
"tabWidth": 4,
7+
"useTabs": false,
8+
"arrowParens": "always",
9+
"endOfLine": "lf"
10+
}

‎demos/playground/README.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# Copilot SDK Playground
2+
3+
An interactive web-based playground for testing and exploring the GitHub Copilot SDK. Create sessions, send messages, and watch responses stream in real-time.
4+
5+
## Quick Start
6+
7+
**Prerequisites:** [Install the Copilot CLI](https://docs.github.com/en/copilot/how-tos/set-up/install-copilot-cli)
8+
9+
```bash
10+
cd demos/playground
11+
npm install
12+
npm start
13+
```
14+
15+
Open **http://localhost:5173** in your browser.
16+
17+
### Point at a specific repo
18+
19+
```bash
20+
COPILOT_CWD=/path/to/your/repo npm start
21+
```
22+
23+
## Features
24+
25+
- **Session Management** - Create and manage multiple SDK sessions
26+
- **Interactive Chat** - Send messages and receive streaming responses
27+
- **Tool Execution** - Watch tool calls execute with collapsible details
28+
- **Custom Providers** - Use your own API keys (OpenAI, Azure, Anthropic)
29+
- **Multiple Models** - Test with GPT-5, Claude, Gemini, and more
30+
31+
## Usage
32+
33+
1. **Create a Session** - Select a model and click "Create Session"
34+
2. **Send Messages** - Type in the input area and press Enter
35+
3. **View Responses** - Watch the assistant respond in real-time
36+
4. **Inspect Tools** - Click on tool cards to expand arguments/results
37+
38+
### Custom Providers (BYOK)
39+
40+
Expand "Provider Config" when creating a session to use your own API:
41+
42+
| Provider | Base URL | Notes |
43+
|----------|----------|-------|
44+
| OpenAI | `https://api.openai.com/v1` | Use your OpenAI API key |
45+
| Azure | `https://your-resource.openai.azure.com` | Supports bearer token auth |
46+
| Anthropic | `https://api.anthropic.com` | Use your Anthropic API key |
47+
| Ollama | `http://localhost:11434/v1` | No API key needed |
48+
49+
## Architecture
50+
51+
```
52+
React App (Vite)
53+
↓ HTTP API
54+
Express Server
55+
↓ TypeScript SDK
56+
Copilot CLI (stdio)
57+
```
58+
59+
The playground uses the SDK to communicate with the CLI process via JSON-RPC over stdio. All session state is managed by the SDK.
60+
61+
## Development
62+
63+
```bash
64+
# Run with custom CLI path (for local development)
65+
COPILOT_CLI_PATH=/path/to/cli npm start
66+
67+
# Build for production
68+
npm run build
69+
```
70+
71+
## Project Structure
72+
73+
```
74+
src/
75+
├── App.tsx # Main app component
76+
├── App.css # Styles
77+
├── api.ts # API client
78+
├── types.ts # TypeScript types
79+
├── hooks/
80+
│ └── useCopilotSDK.ts # Main SDK hook
81+
└── components/
82+
├── Sidebar.tsx # Session list + form
83+
├── ChatArea.tsx # Messages + input
84+
├── Message.tsx # User/assistant message
85+
├── ToolMessage.tsx # Tool execution card
86+
└── StatusBar.tsx # Connection status
87+
```
88+
89+
The `useCopilotSDK` hook encapsulates all SDK interaction logic - a good starting point for understanding how to integrate the SDK into your own React application.

‎demos/playground/eslint.config.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import tseslint from "@typescript-eslint/eslint-plugin";
2+
import parser from "@typescript-eslint/parser";
3+
import reactPlugin from "eslint-plugin-react";
4+
import reactHooksPlugin from "eslint-plugin-react-hooks";
5+
6+
export default [
7+
{
8+
files: ["**/*.ts", "**/*.tsx"],
9+
languageOptions: {
10+
parser: parser,
11+
parserOptions: {
12+
ecmaVersion: 2022,
13+
sourceType: "module",
14+
ecmaFeatures: {
15+
jsx: true,
16+
},
17+
},
18+
},
19+
plugins: {
20+
"@typescript-eslint": tseslint,
21+
react: reactPlugin,
22+
"react-hooks": reactHooksPlugin,
23+
},
24+
settings: {
25+
react: {
26+
version: "detect",
27+
},
28+
},
29+
rules: {
30+
"@typescript-eslint/no-unused-vars": [
31+
"error",
32+
{
33+
args: "all",
34+
argsIgnorePattern: "^_",
35+
caughtErrors: "all",
36+
caughtErrorsIgnorePattern: "^_",
37+
destructuredArrayIgnorePattern: "^_",
38+
varsIgnorePattern: "^_",
39+
ignoreRestSiblings: true,
40+
},
41+
],
42+
"@typescript-eslint/no-explicit-any": "warn",
43+
"no-console": "off",
44+
"react/react-in-jsx-scope": "off",
45+
"react/prop-types": "off",
46+
"react-hooks/rules-of-hooks": "error",
47+
"react-hooks/exhaustive-deps": "warn",
48+
},
49+
},
50+
{
51+
ignores: ["dist/**", "node_modules/**", "*.config.ts", "*.config.js"],
52+
},
53+
];

‎demos/playground/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Copilot SDK Playground</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)