Building an Asset Portfolio Dashboard by Switching Between Claude Artifacts and Claude Code

Claude Artifacts combined with Claude Code enables building an interactive dashboard for visually managing investment asset portfolios. According to Anthropic official documentation, Artifacts turn ideas into shareable apps, tools, or content. They target self-contained content typically over 15 lines that can be edited, iterated, and reused outside the conversation.

📑Table of Contents

1. What Claude Artifacts Are
2. The Role of Claude Code
3. Steps to Build an Asset Portfolio Dashboard
4. Comparison: Artifacts vs Traditional Claude Conversation
5. Frequently Asked Questions (FAQ)
6. Summary

---

What Claude Artifacts Are

Artifacts are available in Claude web and desktop versions, allowing immediate editing and previewing in a dedicated window. The official documentation lists examples such as Markdown documents, single-page HTML websites, SVG images, and interactive React components. This shifts workflows from chat-history-dependent conversations to independent deliverables.

Available content examples include: – Markdown or plain text documents – Code snippets – Interactive React components – Diagrams and flowcharts – MCP integration with external tools (Asana, Google Calendar, Slack, etc.)

Integration with Claude Code allows refining Artifacts-generated outputs further in a Claude Code session and publishing them as shareable pages.

---

The Role of Claude Code

Claude Code is Anthropic’s agentic coding system. The official site states that it reads an entire codebase, makes changes across multiple files, runs tests, and delivers committed code. With the concept “If you can describe it, you can build it,” the majority of code at Anthropic is now written by Claude Code. Engineers can focus on architecture and product thinking.

Claude Code understands project-wide dependencies and proposes changes accordingly. It supports automatic test execution and commits, enabling professional development workflows. Combining it with Artifacts allows rapid UI prototyping in Artifacts and robust backend implementation in Claude Code.

---

Steps to Build an Asset Portfolio Dashboard

Start by prompting Claude with “Create an asset portfolio dashboard.” Generate a React component in Artifacts displaying KPIs such as NAV, Total Return, Sharpe Ratio, and Max Drawdown. Add sheets for Positions (live P&L), Analytics, and Risk Metrics. For Excel integration, reference independent sources like PortfolioVisualizer to import backtest data.

Live Artifacts allow publishing Claude Code session outputs as private live pages. These are viewable only by organization members and support real-time updates. MCP integration enables automatic data retrieval from external stock price APIs or Google Sheets.

An independent example from Substack shows building an institutional-grade portfolio tracker with Claude in Excel, including KPI dashboards, allocation charts, and live P&L sheets.

---

Comparison: Artifacts vs Traditional Claude Conversation

Item	Artifacts	Traditional Conversation
Editability	Instant edit in dedicated window	Dependent on chat history
Reusability	Version control and easy export	Requires copy & paste
Interactivity	React/MCP support	Limited
Publishability	Live page shareable within organization	History sharing only

Source: Anthropic official support article (as of June 2026)

---

Frequently Asked Questions (FAQ)

1. On which plans can I use Artifacts?
   Available on Free, Pro, Max, Team, and Enterprise plans. Artifacts in Claude Code is a beta feature for Team/Enterprise.

2. How do I publish Artifacts with Claude Code?
   Use the publish command in a Claude Code session to create a private live page URL. Sharing is limited to organization members.

3. What data sources are needed for a portfolio dashboard?
   Stock price data, position information, and risk metrics. Use public sources such as PortfolioVisualizer or Google Finance.

4. What external tools can be used with MCP integration?
   Officially supported tools include Asana, Google Calendar, and Slack. Custom MCP servers can also be built.

5. Are there storage limits?
   Published Artifacts have a 20MB persistent storage limit. Management is available for personal and shared use.

6. Can multiple Artifacts be handled simultaneously?
   Yes, multiple Artifacts can be edited and version-controlled in parallel. Integration with Claude Code supports large-scale projects.

---

Related articles:

• Claude Codeをどのように キャッチアップしているか
• Steering Claude Code: skills, hooks, subagents and more | Claude
• DynatraceがAI Coding Agent監視を拡張：Claude Code・Gemini CLI・Codex CLIをOpenTelemetryで可視化

Summary

By moving between Claude Artifacts and Claude Code, practical tools like an asset portfolio dashboard can be built efficiently. Start with a small prototype following the official documentation procedures. Check related AI tool comparison articles for more information.