Skip to content

feat: Add dual language selector for AI Transport guides #3176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
GregHolmes wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat: Add dual language selector for AI Transport guides #3176

GregHolmes wants to merge 10 commits into from
+1,562 −151

Conversation

@GregHolmes
Copy link
Contributor

@GregHolmes GregHolmes commented Feb 2, 2026

Summary

Adds dual language selection for AI Transport guide pages, allowing users to independently choose Client (frontend) and Agent (backend) languages for code examples.

Changes

  • Dual language selector UI: Two dropdowns ("Client" and "Agent") replace the single language selector on AI Transport guide pages
  • URL param support: ?fe_lang=xxx&be_lang=yyy for bookmarking and sharing specific language combinations
  • Navigation preservation: Language params persist when navigating between guide pages
  • Code block prefixes: MDX files use fe_ and be_ prefixes (e.g., fe_javascript, be_python) to distinguish frontend vs backend code
  • aiTransport languages: javascript, python, swift, java with SDK versions

Supported languages

  • Client: JavaScript, Swift, Java
  • Agent: JavaScript, Python, Java

Dependencies

  • Requires @ably/ui@17.13.1-dev.c839343a (or later) with fe_/be_ prefix support in CodeSnippet
  • Also removes stale CookieMessage CSS import that was breaking builds with newer ably-ui versions

@GregHolmes GregHolmes self-assigned this Feb 2, 2026
@GregHolmes GregHolmes added the review-app Create a Heroku review app label Feb 2, 2026
@coderabbitai
Copy link

coderabbitai bot commented Feb 2, 2026 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch AIT-108-Framework-language-feature-combos-investigate-and-design-navigation

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@ably-ci ably-ci temporarily deployed to ably-docs-ait-108-frame-bxs5nk February 2, 2026 16:56 Inactive
@ably-ci ably-ci temporarily deployed to ably-docs-ait-108-frame-gtap38 February 2, 2026 17:03 Inactive
@ably-ci ably-ci temporarily deployed to ably-docs-ait-108-frame-6jgsbd February 4, 2026 14:34 Inactive
@GregHolmes GregHolmes temporarily deployed to ably-docs-ait-108-frame-6jgsbd February 4, 2026 14:52 Inactive
@GregHolmes GregHolmes temporarily deployed to ably-docs-ait-108-frame-6jgsbd February 6, 2026 12:28 Inactive
@GregHolmes GregHolmes temporarily deployed to ably-docs-ait-108-frame-6jgsbd February 6, 2026 12:29 Inactive
@GregHolmes GregHolmes had a problem deploying to ably-docs-ait-108-frame-6jgsbd February 6, 2026 13:51 Failure
@GregHolmes GregHolmes had a problem deploying to ably-docs-ait-108-frame-6jgsbd February 6, 2026 13:55 Failure
@GregHolmes GregHolmes force-pushed the AIT-108-Framework-language-feature-combos-investigate-and-design-navigation branch from a5fe2ec to c5eb002 Compare February 6, 2026 13:55
@GregHolmes GregHolmes temporarily deployed to ably-docs-ait-108-frame-6jgsbd February 6, 2026 13:56 Inactive
@mschristensen
Copy link
Contributor

mschristensen commented Feb 9, 2026

I haven't reviewed the code in detail, I will leave that to someone in the docs/deved team. But from a UX perspective, I really like the approach and I am happy with this :)

@GregHolmes
fix: Remove stale CookieMessage CSS import
bd18e9a
@GregHolmes
feat: Add dual language selector for AI Transport guides
ff046c9 
- Add Client/Agent dropdowns for separate frontend/backend language selection
- Support fe_/be_ prefixed code blocks in MDX files
- Preserve language params when navigating between guide pages
- Add aiTransport languages (javascript, python, swift, java)
- Add Guides section to AI Transport nav
- Update anthropic-message-per-response guide with dual language code blocks
- Update @ably/ui to 17.13.1-dev.c839343a

URL params: ?fe_lang=xxx&be_lang=yyy
@GregHolmes
Fix LeftSidebar test by adding isDualLanguagePath mock
76b5b11 
The test mock for layout-context was missing the isDualLanguagePath
function that LeftSidebar imports, causing TypeError during test runs.
@GregHolmes
Add fe_lang, be_lang, and fe_or_be_lang props to If component
d894872 
Extends the If component to support dual-language page conditionals:
- fe_lang: show content when frontend language matches
- be_lang: show content when backend language matches
- fe_or_be_lang: show content when either matches (with deduplication)

Used in AI Transport guides for language-specific prerequisites and SDK links.
@GregHolmes
fix: Add directory context and fix Swift code blocks in Anthropic guide
c7e690d 
- Add directory references to file creation instructions (e.g., "In your
  ably-anthropic-agent directory, create publisher.mjs")
- Add cd commands to run instructions for publisher and subscriber
- Add directory context to Step 6 rewind instructions
- Fix Swift Package.swift code block to use fe_swift prefix
- Wrap URL code block in Code component with text language
@GregHolmes
chore: Reorder AI Transport guides to show message-per-response first
71caaea 
Move "Message per response" before "Message per token" in navigation
for all AI providers (Anthropic, OpenAI, LangGraph, Vercel AI SDK).
@GregHolmes GregHolmes force-pushed the AIT-108-Framework-language-feature-combos-investigate-and-design-navigation branch from c5eb002 to 71caaea Compare February 11, 2026 09:59
@GregHolmes GregHolmes temporarily deployed to ably-docs-ait-108-frame-6jgsbd February 11, 2026 09:59 Inactive
@GregHolmes GregHolmes had a problem deploying to ably-docs-ait-108-frame-6jgsbd February 11, 2026 17:01 Failure
@GregHolmes GregHolmes temporarily deployed to ably-docs-ait-108-frame-6jgsbd February 11, 2026 17:02 Inactive
@GregHolmes
fix: Fix Python code and add multi-language support to Anthropic mess…
a4b66f7 
…age-per-token guide

- Add multi-language support (Python, Java, Swift) to message-per-token
  guide, matching the structure of message-per-response
- Fix Python code in both guides: use AsyncAnthropic with async/await,
  use Message objects for publish with extras and append_message,
  use transport_params for echo suppression
- Scope "without await" asides to JavaScript only
@GregHolmes GregHolmes requested a deployment to ably-docs-ait-108-frame-6jgsbd February 12, 2026 09:58 Abandoned
@GregHolmes
Copy link
Contributor Author

GregHolmes commented Feb 12, 2026

This branch is heavily dependant on ably/ably-ui#1060. Which I need the devex web team to review. I'm very sorry but you're not going to be able to view the deployment as it stands as I've made changes to the ably-ui.

Note: I've asked April to make me a early release candidate version for ably-ui that I can use in this branch. I'll update with a new comment when it happens.

I've added quite a few people to the reviews. I think I'd like to recommend what each person reviews!

@m-hulbert Could I please have you review this from the docs perspective?
@lawrence-forooghian and @ttypic Could you please review the JS/Swift/Java/Python code snippets that these two guides compile into? I think I've got them where they should be but would be happier with some experts in the languages checking them out.
@kennethkalmer and @matt423 Would it be possible for you to first review ably/ably-ui#1060 as this branch won't work without those changes. Then hopefully could you review the code in this PR following that?

Let me know if you have any questions.

@GregHolmes
Copy link
Contributor Author

GregHolmes commented Feb 12, 2026

I've now moved the ably-ui code over to the new package in website repo: https://github.com/ably/website/pull/7827

@lawrence-forooghian
Copy link
Contributor

lawrence-forooghian commented Feb 13, 2026

I'm gonna see if the skill from #3192 can be helpful here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kennethkalmer kennethkalmer Awaiting requested review from kennethkalmer

@matt423 matt423 Awaiting requested review from matt423

@ttypic ttypic Awaiting requested review from ttypic

@m-hulbert m-hulbert Awaiting requested review from m-hulbert

@lawrence-forooghian lawrence-forooghian Awaiting requested review from lawrence-forooghian

At least 1 approving review is required to merge this pull request.

Assignees

@GregHolmes GregHolmes

Labels

review-app Create a Heroku review app

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@GregHolmes @mschristensen @lawrence-forooghian @ably-ci