use-mcp/examples/chat-ui
Repository files (latest commit first)
Filename Latest commit message Latest commit date
Glen Maddern c3ee0e9b09
Fixing oauth flow on chat example (#27)
* wip

* Successfully getting a token from Groq!

* Simplify PKCE flow to use single key per provider

Previously, the PKCE flow stored multiple keys with timestamps (pkce_${providerId}_${timestamp})
and had complex logic to find the most recent key. This simplified implementation:

- Changes storage key format from `pkce_${providerId}_${timestamp}` to `pkce_${providerId}`
- Removes timestamp-based key sorting logic in completeOAuthFlow()
- Ensures only one PKCE key is stored per provider at any time
- Eliminates potential race conditions with multiple concurrent auth flows
- Simplifies debugging by having predictable key names

This applies to both OpenRouter and Groq OAuth flows. Also fixes TypeScript
build error by removing unused 'state' variable in OAuthCallback component.

Amp-Thread: https://ampcode.com/threads/T-12223468-a950-40a8-9d44-2e1a66e6efbe
Co-authored-by: Amp <amp@ampcode.com>

* Amp getting confused

* Able to run inference against staging Groq

* The old oauth callback got clobbered, try to restore it

* Restored, but still buggy

* updated data

* Pruning Groq models

* deploying

---------

Co-authored-by: Amp <amp@ampcode.com>
2025-07-16 22:21:20 +10:00
..
api Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
e2e Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
public Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
scripts Added openrouter (#25) 2025-07-11 14:34:33 +10:00
src Fixing oauth flow on chat example (#27) 2025-07-16 22:21:20 +10:00
.env.example Added openrouter (#25) 2025-07-11 14:34:33 +10:00
.gitignore Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
.prettierrc Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
AGENT.md Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
eslint.config.js Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
index.html Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
MODEL_SELECTOR_GUIDE.md Added openrouter (#25) 2025-07-11 14:34:33 +10:00
package.json Added openrouter (#25) 2025-07-11 14:34:33 +10:00
playwright.config.ts Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
pnpm-lock.yaml Added openrouter (#25) 2025-07-11 14:34:33 +10:00
README.md Updated chat example readme 2025-07-09 10:58:44 +10:00
tailwind.config.js Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
tsconfig.app.json Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
tsconfig.json Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
tsconfig.node.json Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
tsconfig.worker.json Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
vite.config.ts Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00
wrangler.jsonc Adding a full chat example (#19) 2025-07-02 16:24:03 +10:00

AI Chat with MCP

A React-based AI chat application demonstrating Model Context Protocol (MCP) integration with multiple AI providers.

This static web application showcases how to use the use-mcp library to connect to MCP servers, providing extensible AI capabilities through external tools and services. The app supports multiple AI models, stores conversations locally in IndexedDB, and includes OAuth authentication for MCP server connections.

Live demo: chat.use-mcp.dev

Features

  • MCP Integration: Connect to MCP servers with OAuth authentication support
  • Multi-model Support: Anthropic (Claude) and Groq (Llama) models with API key authentication
  • Local Storage: Conversations stored in browser's IndexedDB
  • Static Deployment: Builds to static assets for deployment anywhere
  • Modern Stack: React 19, TypeScript, Tailwind CSS, Vite

Get started

pnpm install
pnpm dev

Build and deploy:

pnpm build
pnpm run deploy  # deploys to Cloudflare Pages

Development

  • Dev server: pnpm dev (runs on port 5002)
  • Build: pnpm build
  • Lint: pnpm lint
  • Test: pnpm test (Playwright E2E tests)